I several screen but every to add bottom navigation animation I used Pageview.
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: PageView(
physics: NeverScrollableScrollPhysics(),
controller: parcelController.pageController,
onPageChanged: (index) {
setState(() {
parcelController.currentStep.value = index;
});
},
children: [
_buildPage1(),
const PageTwo(),
const PageThree(),
PageFour(),
PageFive(),
PageSix(),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: List.generate(6, (index) {
return _buildStep(index);
}),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
InkWell(
onTap: parcelController.goToPreviousStep,
borderRadius: BorderRadius.circular(100),
child: const CircleAvatar(
backgroundColor: Colors.white,
radius: 25,
child: Icon(
Icons.arrow_back,
color: Colors.black,
),
),
),
ButtonWidget(
onPressed: parcelController.goToNextStep,
label: parcelController.currentStep.value == 5
? "next".tr
: "next".tr,
textColor: Colors.white,
buttonWidth: 105,
buttonHeight: 50,
icon: Icons.arrow_forward,
iconColor: Colors.white,
fontWeight: FontWeight.w500,
fontSize: 16,
iconSize: 20,
),
],
),
),
],
),
);
}
The page view I am using and _buildStep use every page bottom Icon and button.
Widget _buildStep(int index) {
return Obx(() => Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
flex: 3,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
parcelController.currentStep.value >= index
? Image.asset(
height: 15,
width: 15,
images[index],
)
: Image.asset(
height: 15,
width: 15,
images[index],
color: Colors.white,
),
const SizedBox(height: 4),
Container(
height: 10,
width: 10,
margin: const EdgeInsets.symmetric(horizontal: 0),
decoration: BoxDecoration(
color: parcelController.currentStep.value >= index
? Colors.black
: Colors.grey,
borderRadius: BorderRadius.circular(100),
),
),
const SizedBox(height: 4),
Text(
texts[index],
maxLines: 1,
style: TextStyle(
color: parcelController.currentStep.value >= index
? Colors.black
: Colors.white,
fontWeight: FontWeight.normal,
fontSize: 8,
overflow: TextOverflow.ellipsis,
),
),
],
),
),
if (index < texts.length - 1)
Expanded(
flex: 2,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 30),
margin: const EdgeInsets.only(top: 4),
height: 1,
decoration: BoxDecoration(
color: parcelController.currentStep.value >= index
? Colors.black
: Colors.grey,
borderRadius: BorderRadius.circular(100),
),
),
),
],
),
));
}
After that I called a map into the PageTwo().
GoogleMap(
initialCameraPosition: const CameraPosition(
target: LatLng(23.76171, 90.43128),
zoom: 12.0,
),
onMapCreated: (GoogleMapController controller) {
_mapController = controller;
},
mapType: MapType.terrain,
markers: _markers,
zoomControlsEnabled: true,
polylines: _polyline != null ? {_polyline!} : {},
myLocationButtonEnabled: true,
myLocationEnabled: true,
scrollGesturesEnabled: true,
zoomGesturesEnabled: true,
tiltGesturesEnabled: true,
rotateGesturesEnabled: true,
),
I used this map but I can't use this map properly. When trying to navigate map using my finger but it doesn't work.
is there any solution????
The issue is Google Maps inside a PageView can sometimes conflict with gesture detectors, especially if the parent widget interferes with pointer events.If you're embedding the GoogleMap inside a widget tree with layout constraints (like inside Column > Expanded > PageView), and the GoogleMap doesn't get full space or gesture priority, you might lose gesture interaction.
Solution :
Wrap your GoogleMap in a GestureDetector that absorbs nothing, OR make sure it's given proper space using a full Expanded widget in a layout that isn't interfering.
or you can also add this gestureRecognizers property in GoogleMap widget :
code :
GoogleMap(
initialCameraPosition: const CameraPosition(
target: LatLng(23.76171, 90.43128),
zoom: 12.0,
),
onMapCreated: (GoogleMapController controller) {
mapController?.complete(controller);
},
mapType: MapType.terrain,
markers: markers,
zoomControlsEnabled: true,
polylines: polyline != null ? {polyline!} : {},
myLocationButtonEnabled: true,
myLocationEnabled: true,
scrollGesturesEnabled: true,
zoomGesturesEnabled: true,
tiltGesturesEnabled: true,
rotateGesturesEnabled: true,
gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{
Factory<OneSequenceGestureRecognizer>(
() => EagerGestureRecognizer(),
),
},
),