google_maps_flutter_web v0.4.0+1关闭页面出现Bad state错误求助

错误信息 #

Error: Bad state: Cannot add new events after calling close
    at Object.throw_ [as throw] (http://localhost:46385/dart_sdk.js:5080:11)
    at _AsyncBroadcastStreamController.new.add (http://localhost:46385/dart_sdk.js:34435:44)
    at http://localhost:46385/packages/google_maps_flutter_web/src/types.dart.lib.js:572:33
    at _RootZone.runUnaryGuarded (http://localhost:46385/dart_sdk.js:40448:11)
    at [_sendData] (http://localhost:46385/dart_sdk.js:33985:22)
    at _DelayedData.new.perform (http://localhost:46385/dart_sdk.js:37447:28)
    at _StreamImplEvents.new.handleNext (http://localhost:46385/dart_sdk.js:37557:15)
    at async._AsyncCallbackEntry.new.callback (http://localhost:46385/dart_sdk.js:37305:16)
    at Object._microtaskLoop (http://localhost:46385/dart_sdk.js:40778:13)
    at _startMicrotaskLoop (http://localhost:46385/dart_sdk.js:40784:13)
    at http://localhost:46385/dart_sdk.js:36261:9

问题原因 #

页面调用Get.back()关闭后，地图组件的事件流仍在尝试向已关闭的StreamController发送事件，属于组件销毁时资源清理不及时导致的问题。

解决思路 #

• 主动销毁地图控制器：在页面销毁前手动调用GoogleMapController的dispose()方法，确保所有事件流被正确关闭。如果使用GetX，可在页面或控制器的onClose方法中执行：

class MapPage extends GetView<MapController> {
  @override
  void onClose() {
    super.onClose();
    controller.mapController?.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 页面布局代码
  }
}

• 延迟执行页面关闭：给地图事件处理留足收尾时间，延迟调用Get.back()：

// 替换原有的Get.back()调用
Future.delayed(const Duration(milliseconds: 100), () {
  Get.back();
});

• 升级依赖包版本：当前使用的google_maps_flutter_web: ^0.4.0+1版本较旧，后续版本大概率修复了这类资源泄漏问题，执行命令升级到最新稳定版：

flutter pub upgrade google_maps_flutter_web

• 监听页面生命周期：通过WidgetsBinding监听页面弹出事件，在页面即将被移除时提前清理地图资源：

class MapPage extends StatefulWidget {
  @override
  State<MapPage> createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> with WidgetsBindingObserver {
  GoogleMapController? mapController;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void didPopRoute() {
    super.didPopRoute();
    mapController?.dispose();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    mapController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      onMapCreated: (controller) => mapController = controller,
      // 其他地图配置
    );
  }
}

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