Flutter跨页面添加Google Map Marker后地图UI不实时刷新的问题

主页面通过GoogleMap组件展示Marker，从第三页面添加Marker后，Marker列表已更新，但返回主页面后新Marker不显示，仅移动地图时才会出现。需要实现添加后直接显示新Marker。

原因分析 #

MarkerList已经继承ChangeNotifier并在添加Marker时调用notifyListeners()，但主页面的State没有监听这个变化，导致build方法不会自动重新执行——只有onCameraMove触发setState()时，才会刷新UI并读取更新后的Marker列表。

解决方案 #

在主页面的State中监听MarkerList的变化，当收到更新通知时主动调用setState()刷新UI，同时在页面销毁时移除监听器避免内存泄漏。

修改后主页面代码 #

class _MyHomePageState extends State<MyHomePage> {
  late GoogleMapController mapController;
  MarkerList markersList = MarkerList();
  late VoidCallback _markerUpdateListener;

  @override
  void initState() {
    super.initState();
    // 注册监听器：MarkerList更新时触发UI刷新
    _markerUpdateListener = () {
      setState(() {});
    };
    markersList.addListener(_markerUpdateListener);
  }

  @override
  void dispose() {
    // 移除监听器，防止内存泄漏
    markersList.removeListener(_markerUpdateListener);
    super.dispose();
  }

  // 以下原有代码保持不变
  Route _createRouteToSecondScreen(MarkerList markerList) {
    return PageRouteBuilder(
      opaque: false,
      pageBuilder: (context, animation, secondaryAnimation) => SecondScreen(
        centerMove: LatLng(-33.865143, 151.209900),
        markerList: markerList,
      ),
    );
  }

  Future<void> _onMapCreated(GoogleMapController controller) async {
    mapController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        markers: Set<Marker>.of(markersList.markers),
        mapType: MapType.hybrid,
        myLocationButtonEnabled: false,
        myLocationEnabled: true,
        compassEnabled: false,
        onMapCreated: _onMapCreated,
        onCameraMove: (CameraPosition cp) {
          setState(() {});
        },
        initialCameraPosition: const CameraPosition(
          target: LatLng(0, 0),
          zoom: 2,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.of(context).push(_createRouteToSecondScreen(markersList));
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

说明 #

• 当第三页面调用markersList.addMarker()时，MarkerList会调用notifyListeners()，主页面的监听器收到通知后执行setState()，触发build方法重新执行，GoogleMap会读取更新后的Marker列表并显示新添加的Marker。
• 必须在dispose中移除监听器，避免页面销毁后仍持有引用导致内存泄漏。

内容的提问来源于stack exchange，提问作者Nicolas