Flutter GoogleMap in a PageView build only ONCE - google-maps

Question

I have a PageView.builder and 3 GoogleMap-s in it.
I had to create the 3 widgets only the first time, and I do not want to rebuild them again.
Now it is annoying when I just change the page it is flashing once before load. And slow.
Any way to build a FIXED state on that widget?
I tried:
AutomaticKeepAliveClientMixin
and
#override
bool get wantKeepAlive => true;
but not worked.

Answer 1

maybe you forget to call super.build(context); in build method.
Like this:
class TestInnerPage extends StatefulWidget {
#override
_TestInnerPageState createState() => _TestInnerPageState();
}
class _TestInnerPageState extends State<TestInnerPage>
with AutomaticKeepAliveClientMixin {
#override
Widget build(BuildContext context) {
/// Dont't forget this
super.build(context);
return Container();
}
#override
// TODO: implement wantKeepAlive
bool get wantKeepAlive => true;
}

Answer 2

According to the accepted answer, this will be an example using google maps.
class TestInnerPage extends StatefulWidget {
#override
_TestInnerPageState createState() => _TestInnerPageState();
}
class _TestInnerPageState extends State<TestInnerPage>
with AutomaticKeepAliveClientMixin {
//Variables
Completer<GoogleMapController> _controller = Completer();
void onMapCreated(GoogleMapController controller) {
controller.setMapStyle(Utils.mapStyles);
_controller.complete(controller);
}
#override
Widget build(BuildContext context) {
/// Dont't forget this
super.build(context);
return GoogleMap(
myLocationButtonEnabled: false,
compassEnabled: false,
myLocationEnabled: false,
zoomControlsEnabled: false,
// compassEnabled: true,
tiltGesturesEnabled: false,
// markers: _markers,
// polylines: _polylines,
mapType: MapType.normal,
initialCameraPosition: CameraPosition(
zoom: CAMERA_ZOOM,
bearing: CAMERA_BEARING,
tilt: CAMERA_TILT,
target: LatLng(
//SOURCE_LOCATION
7.8731,
80.7718),
),
onMapCreated: onMapCreated,
);
}
#override
// TODO: implement wantKeepAlive
bool get wantKeepAlive => true;
}

Answer 3

I had a similar issue working with google map in pageview but after searching online I got a solution that finally worked
All I did was put the google map in a stateful widget, used the with AutomaticKeepAliveClientMixin and #override bool get wantKeepAlive => true; and called in the required widget
This is the stateful widget containing the google map
class GoogleMapWidget extends StatefulWidget{
const GoogleMapWidget({Key? key}) : super(key: key);
#override
_GoogleMapWidgetState createState() => _GoogleMapWidgetState();
}
class _GoogleMapWidgetState extends State<GoogleMapWidget> with AutomaticKeepAliveClientMixin {
#override
bool get wantKeepAlive => true;
#override
Widget build(BuildContext context) {
return Container(
child:GoogleMap(initialCameraPosition: CameraPosition(target:LatLng(0, 0)),)
);
}
}
Then you can call it from your Homepage like so
class Homepage extends StatelessWidget {
#override
build(BuildContext context){
return PageView(
children: <Widget>[
GoogleMapWidget(),
GoogleMapWidget(),
],
);
}
}
I hope this is the answer you're looking for