构建Flutter Web Wasm应用时，如何跳过不支持的google_maps_flutter库？

核心思路 #

利用Flutter Web的代码拆分与条件加载能力，将依赖google_maps_flutter的模块与其他Wasm兼容模块分离：Wasm兼容部分用Wasm编译，地图模块保留JS编译版本，通过动态导入或条件渲染实现环境隔离，同时保证Web端地图功能正常运行。

具体实现步骤 #

1. 拆分业务模块 #

把项目拆成两个独立部分：

• Wasm兼容模块：不含google_maps_flutter的通用业务逻辑、UI组件等，这部分可完全用Wasm编译。
• 地图专属模块：仅包含与google_maps_flutter相关的页面、组件，这部分保持JS编译。

2. 条件编译与导入 #

用Flutter的编译条件和kIsWeb区分加载逻辑，避免Wasm编译时引入不兼容代码：

import 'package:flutter/foundation.dart';

// 条件导入不同环境的地图组件
import 'map_component_js.dart' if (dart.library.wasm) 'map_component_placeholder.dart';

// 通用业务组件（Wasm兼容）
import 'common_widgets.dart';

• map_component_js.dart：基于google_maps_flutter的真实地图实现，仅在JS环境加载。
• map_component_placeholder.dart：Wasm环境下的占位组件（比如显示静态地图或提示文字），避免编译报错。

3. 配置Web构建与动态加载 #

修改web/index.html，实现Wasm环境下动态加载JS版本的地图模块：

<script>
  // 检测当前渲染器类型
  if (window.flutterWebRenderer === 'wasm') {
    // 动态加载JS版本的地图代码块
    const mapScript = document.createElement('script');
    mapScript.src = 'map_component.js';
    document.body.appendChild(mapScript);
  }
</script>

构建时，为地图模块单独生成JS代码块，主应用用Wasm编译，两者通过全局变量或消息机制传递状态。

4. 替代方案：直接封装Google Maps JS API #

放弃google_maps_flutter插件，基于Google Maps JavaScript API封装自定义组件，完全控制代码兼容性：

import 'dart:js' as js;
import 'package:flutter/material.dart';
import 'dart:html' as html;

class CustomGoogleMap extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return HtmlElementView(
      viewType: 'google-map-container',
      onPlatformViewCreated: (int id) {
        // 调用JS初始化地图
        js.context.callMethod('initGoogleMap', [id]);
      },
    );
  }
}

在web/index.html中添加对应的JS初始化逻辑，这种方式彻底避开Flutter插件的Wasm兼容性问题。

注意事项 #

• Wasm与JS模块间的状态通信尽量用全局变量或postMessage，避免直接代码依赖。
• 分别测试Wasm构建和JS构建场景，确保地图功能在Web端正常运行。
• 关注google_maps_flutter官方更新，未来可能会支持Wasm编译。

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