Flutter：如何在切换页面时保持谷歌地图折线的状态答案

【问题标题】：Flutter: How to keep state of Google Maps Polylines while switching pagesFlutter：如何在切换页面时保持谷歌地图折线的状态
【发布时间】：2021-08-22 23:00:09
【问题描述】：

我正在使用 Google Maps Flutter 包，我的应用显示用户使用折线行驶的路线。我的问题是，当我更改为新页面（例如设置页面）然后更改回地图页面时，折线消失了。有谁知道如何解决这个问题？

这是我的 Google 地图小部件（我在其中创建折线）：

  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(),
          ),
        );
      },
    );

这里是抽屉小部件（我在页面之间切换的地方）：

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');
              },
            ),

【问题讨论】：

标签： flutter google-maps state google-polyline

【解决方案1】：

对于遇到此问题的其他人，我不知道是否可以使用 Drawer，但如果您切换到 BottomNavigationBar，并使用 IndexedStack 小部件，它的工作原理与缩进完全相同。这是我用来修复它的链接。 https://stackoverflow.com/a/60775505/12087596

【讨论】：