Flutter Web下google_maps_flutter_web新建地图实例内存无法释放问题

问题根因 #

• google_maps_flutter_web 0.3.x 版本未实现Web端地图实例的销毁逻辑：Widget被卸载时，没有主动调用谷歌地图JS SDK的实例销毁方法，也没有清除绑定的DOM引用、事件监听器，导致每新建一个地图实例就多留一份内存垃圾，没有GC触发时机，内存会持续上涨
• PageView.builder默认不会缓存页面，每次切换页面都会销毁旧MapView、新建新实例，进一步放大了泄漏问题

可行解决方案 #

临时规避方案（无需修改依赖源码，可立即生效） #

• 缓存地图Widget，避免反复新建销毁实例
  给MapView添加AutomaticKeepAliveClientMixin标记为保活，多个地图页面的实例仅初始化一次，后续切换不再新建，从根源减少实例生成。参考实现代码：

class MapView extends StatefulWidget {
  final String title;
  const MapView({Key? key, required this.title}) : super(key: key);

  @override
  State<MapView> createState() => _MapViewState();
}

class _MapViewState extends State<MapView> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true; // 开启页面保活

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用父类方法
    return Scaffold(
      appBar: AppBar(
        title: Text('Map ${widget.title}'),
      ),
      body: const GoogleMap(
        initialCameraPosition:
            CameraPosition(target: LatLng(33.5731, -7.5898), zoom: 5.5),
      ),
    );
  }
}

• 若业务场景需要动态生成大量不同的地图页面，可限制地图实例最大缓存数量，最多保留最近3-5个地图实例，超过阈值主动将最旧的实例完全从Widget树移除，强制触发浏览器GC回收部分内存。

永久修复方案 #

• 升级依赖到google_maps_flutter_web 0.4.0及以上版本：官方在0.4.0版本已经修复了Web端实例泄漏问题，新增了dispose生命周期的JS侧实例销毁逻辑，升级后无需额外修改代码即可解决泄漏
• 若必须停留在0.3.2版本，可手动覆写Web端的地图插件逻辑：在MapWidget的dispose生命周期中，主动调用JS侧地图实例的销毁方法，移除对应DOM节点，清除所有绑定的事件监听。

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