如何根据Flutter应用主题（深色/浅色）切换Google Map主题？

要让Google Map跟着Flutter的深色/浅色主题同步切换，核心是根据当前主题模式加载对应的地图自定义样式，下面是具体实现步骤：

1. 添加依赖 #

在pubspec.yaml里引入google_maps_flutter包：

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.5.0 # 建议使用最新版本

2. 准备地图样式JSON #

你需要两套自定义样式：一套对应浅色主题，一套对应深色主题。可以通过Google官方的地图样式工具生成（搜索「Google Map Style Generator」即可找到），生成后导出JSON字符串。举个简单示例：

• 浅色样式示例（lightMapStyle）：

[
  {
    "elementType": "geometry",
    "stylers": [{"color": "#f5f5f5"}]
  },
  {
    "elementType": "labels.icon",
    "stylers": [{"visibility": "off"}]
  }
]

• 深色样式示例（darkMapStyle）：

[
  {
    "elementType": "geometry",
    "stylers": [{"color": "#212121"}]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [{"color": "#757575"}]
  }
]

3. 实现主题同步逻辑 #

通过MediaQuery获取当前主题的亮度模式，动态给Google Map设置对应样式。下面是完整的StatefulWidget示例：

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class ThemedMapScreen extends StatefulWidget {
  const ThemedMapScreen({super.key});

  @override
  State<ThemedMapScreen> createState() => _ThemedMapScreenState();
}

class _ThemedMapScreenState extends State<ThemedMapScreen> {
  late GoogleMapController _mapController;

  // 浅色地图样式JSON
  final String _lightMapStyle = '''
[
  {
    "elementType": "geometry",
    "stylers": [{"color": "#f5f5f5"}]
  },
  {
    "elementType": "labels.icon",
    "stylers": [{"visibility": "off"}]
  }
]
''';

  // 深色地图样式JSON
  final String _darkMapStyle = '''
[
  {
    "elementType": "geometry",
    "stylers": [{"color": "#212121"}]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [{"color": "#757575"}]
  }
]
''';

  // 根据当前主题设置地图样式
  void _setMapTheme(Brightness brightness) async {
    if (brightness == Brightness.dark) {
      await _mapController.setMapStyle(_darkMapStyle);
    } else {
      await _mapController.setMapStyle(_lightMapStyle);
    }
  }

  @override
  Widget build(BuildContext context) {
    final currentBrightness = MediaQuery.of(context).platformBrightness;

    return Scaffold(
      appBar: AppBar(title: const Text("主题同步地图")),
      body: GoogleMap(
        initialCameraPosition: const CameraPosition(
          target: LatLng(37.7749, -122.4194), // 示例坐标
          zoom: 12,
        ),
        onMapCreated: (controller) {
          _mapController = controller;
          // 地图初始化时设置对应样式
          _setMapTheme(currentBrightness);
        },
      ),
      // 可选：手动切换主题的按钮（需结合你的主题管理逻辑）
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          final targetTheme = Theme.of(context).brightness == Brightness.light
              ? ThemeMode.dark
              : ThemeMode.light;
          // 这里替换成你的主题切换逻辑，比如用Provider/ GetX等状态管理工具更新主题
        },
        child: const Icon(Icons.color_lens),
      ),
    );
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 主题变化时自动更新地图样式
    final currentBrightness = MediaQuery.of(context).platformBrightness;
    _setMapTheme(currentBrightness);
  }
}

4. 关键说明 #

• didChangeDependencies方法会在系统主题切换或App内部主题更新时触发，保证地图样式实时同步。
• 如果你的App用状态管理工具（如Provider、GetX）手动管理主题模式，可以监听主题模式的变化，直接调用_setMapTheme更新样式。
• 地图样式可以根据App主题自定义调整，比如修改道路、标签、水域的颜色，让视觉风格更统一。

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