Flutter: How to keep state of Google Maps Polylines while switching pages

Question

I am using the Google Maps Flutter package, and my app shows the route that the user has driven with polylines. My problem is that when I change to a new page (e.g. settings page) then change back to the map page, the polylines disappear. Does anyone know how to fix this issue?

Here is my Google Map Widget (where I create the polylines):

  List<LatLng> _polylineCoordinates = [];
  @override
  void initState() {
    super.initState();
    LatLng userLocation = LocationProvider().locationPosition;
    if (userLocation != null) {
      _polylineCoordinates.add(userLocation);
    }
  }

  Completer<GoogleMapController> _controllerGoogleMap = Completer();
  @override
Widget build(BuildContext context) {
    // this will hold the generated polylines
    Set<Polyline> _polylines = {};

    return Consumer<LocationProvider>(
      builder: (consumeContext, model, child) {

        // If we have user's location, then display the google map
        if (model.locationPosition != null) {
          _polylineCoordinates.add(model.locationPosition);
          Polyline polyline = Polyline(
              polylineId: PolylineId("poly"),
              color: Color.fromARGB(255, 40, 122, 198),
              points: _polylineCoordinates);
          _polylines.add(polyline);

          return Container(
            width: 400,
            height: 450,
            child: GoogleMap(
              polylines: _polylines,
              mapType: MapType.normal,
              initialCameraPosition: CameraPosition(
                target: model.locationPosition,
                zoom: 18,
              ),
              myLocationEnabled: true,
              myLocationButtonEnabled: true,
              onMapCreated: (GoogleMapController _controller) {
                _controllerGoogleMap.complete(_controller);
              },
            ),
          );
        }
        // Else, display container with loading animation
        return Container(
          width: 400,
          height: 450,
          child: Center(
            child: CircularProgressIndicator(),
          ),
        );
      },
    );

And here is the Drawer widget (where I switch between pages):

Drawer(
      child: SafeArea(
        child: Column(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.home),
              title: Text("Home"),
              onTap: () {
                Navigator.pushReplacementNamed(context, 'home_screen');
              },
            ),
            Padding(
              padding: EdgeInsets.all(10),
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text("Settings"),
              onTap: () {
                Navigator.pushReplacementNamed(context, 'settings_screen');
              },
            ),

score 0 · Answer 1 · answered Jun 08 '21 at 19:02

For anyone else running into this issue, I do not know if it is possible with a Drawer, but if you switch to a BottomNavigationBar, and use the IndexedStack widget, it works exactly as indented. Here is a link I used to fix it. https://stackoverflow.com/a/60775505/12087596

Flutter: How to keep state of Google Maps Polylines while switching pages

1 Answers1