Flutter Web：如何通过环境变量传递Google Maps API Key并兼容多端

针对你遇到的Web端方案依赖dart:js/dart:html导致移动端无法编译的问题，下面是一套无需额外平台依赖、跨iOS/Android/Web的解决方案：

核心思路 #

利用Flutter的平台条件编译隔离不同端的代码逻辑，统一从.env文件读取API密钥，既避免硬编码，又不会让移动端引入Web专属依赖。

1. 配置.env文件与环境变量加载 #

首先确保.env文件存放在项目根目录，内容如下：

GOOGLE_MAPS_API_KEY=你的Google Maps密钥

如果使用flutter_dotenv包（读取.env的标准工具），在pubspec.yaml中添加资产配置：

flutter:
  assets:
    - .env

2. 多端适配的Dart代码 #

在main.dart中通过条件编译分别处理Web和移动端的地图初始化逻辑：

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart'; // 用于kIsWeb判断
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart'; // 移动端地图依赖

void main() async {
  await dotenv.load(); // 加载.env文件
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final apiKey = dotenv.env['GOOGLE_MAPS_API_KEY']!;
    return MaterialApp(home: Scaffold(body: _buildMapWidget(apiKey)));
  }

  Widget _buildMapWidget(String apiKey) {
    // 移动端：直接使用google_maps_flutter组件
    if (!kIsWeb) {
      return GoogleMap(
        initialCameraPosition: const CameraPosition(target: LatLng(0, 0), zoom: 1),
        apiKey: apiKey,
      );
    } 
    // Web端：仅在此分支引入Web专属依赖，不影响移动端编译
    else {
      _injectApiKeyToWeb(apiKey);
      return const HtmlElementView(viewType: 'google-map-container');
    }
  }
}

// 仅Web端会编译此部分代码
void _injectApiKeyToWeb(String apiKey) {
  assert(kIsWeb);
  import 'dart:js' as js;
  import 'dart:html' as html;

  js.context['googleMapsApiKey'] = apiKey;
  html.document.dispatchEvent(html.CustomEvent("google-maps-api-key-loaded"));
}

3. Web端index.html调整 #

保留你原有的事件监听逻辑，确保Web端动态加载地图脚本：

<script>
  // 监听Dart端触发的密钥加载事件
  document.addEventListener("google-maps-api-key-loaded", function (){
    const apiKey = window.googleMapsApiKey;
    const script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&callback=initMap`;
    script.defer = true;
    script.async = true;
    document.head.appendChild(script);
  });

  // 地图初始化回调
  function initMap() {
    const mapContainer = document.querySelector('#map');
    if (mapContainer) {
      new google.maps.Map(mapContainer, {
        center: { lat: 39.9042, lng: 116.4074 },
        zoom: 10,
      });
    }
  }
</script>

关键优势 #

• 无跨端冲突：通过kIsWeb条件编译，Web专属的dart:js/dart:html代码只会在Web编译时被引入，移动端完全不受影响。
• 统一配置：所有端的API密钥都从.env读取，无需在多个地方重复配置。
• 无额外依赖：仅使用Flutter官方包和标准的.env加载工具，没有引入非必要的第三方库。

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