Flutter跨平台运行问题：导入dart:html致Android模拟器构建失败

核心问题是dart:html为Web专属库，非Web平台导入会直接报错，需通过平台拆分+条件导入实现兼容，同时原生平台改用Google Maps官方Flutter插件集成。

1. 拆分平台专属代码 #

1.1 定义公共初始化接口 #

新建map_initializer.dart作为跨平台统一入口：

abstract class MapInitializer {
  void initializeMap();
}

1.2 分别实现Web/原生平台逻辑 #

• Web平台实现（map_initializer_web.dart）：

import 'dart:html';
import 'current_flavour.dart';
import 'map_initializer.dart';

class WebMapInitializer implements MapInitializer {
  @override
  void initializeMap() {
    ScriptElement script = ScriptElement();
    script.src = "https://maps.googleapis.com/maps/api/js?key=${currentFlavor()}&language=en&libraries=drawing&callback=Function.prototype";
    script.id = "super-script";
    document.head?.append(script);
  }
}

• 原生平台实现（map_initializer_native.dart，适配Android/iOS）：

import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'current_flavour.dart';
import 'map_initializer.dart';

class NativeMapInitializer implements MapInitializer {
  @override
  void initializeMap() {
    // 原生平台通过官方插件初始化地图
    GoogleMapsFlutter.initialize(apiKey: currentFlavor());
  }
}

1.3 条件导入工厂类 #

新建map_initializer_factory.dart，自动匹配当前平台的实现：

import 'map_initializer.dart';

// 条件导入：Web加载Web实现，其他平台加载原生实现
import 'map_initializer_native.dart' if (dart.library.html) 'map_initializer_web.dart';

MapInitializer getMapInitializer() {
  if (dart.library.html) {
    return WebMapInitializer();
  } else {
    return NativeMapInitializer();
  }
}

2. 集成Google Maps Flutter插件（原生平台） #

在pubspec.yaml添加依赖：

dependencies:
  google_maps_flutter: ^2.5.0 # 使用最新稳定版本

原生平台密钥配置 #

• Android：在android/app/src/main/AndroidManifest.xml中添加：

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="${flavor}" />

• iOS：在ios/Runner/Info.plist中添加：

<key>GoogleMapsAPIKey</key>
<string>你的API密钥</string>

（若需动态替换密钥，可通过Xcode构建设置传递环境变量）

3. 统一调用初始化逻辑 #

在应用入口（如main.dart）替换原有的createScriptElement()调用：

import 'map_initializer_factory.dart';

void main() {
  // 自动适配平台初始化地图
  getMapInitializer().initializeMap();
  runApp(MyApp());
}

4. 保留原有Flavor密钥管理 #

current_flavour.dart逻辑无需修改，跨平台通用：

const String flavorDev = "dev-key";
const String flavorProd = "prod-key";

String currentFlavor() {
  final flavor = const String.fromEnvironment("flavor", defaultValue: "dev");
  return flavor == "prod" ? flavorProd : flavorDev;
}

5. 运行命令 #

• Web端：

flutter run -d chrome --dart-define=flavor="prod"

• Android模拟器：

flutter run -d emulator-5554 --dart-define=flavor="prod"

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