如何在flutter_map中实现OpenStreetMap的深色模式

针对你遇到的使用tileBuilder或darkModeTilesContainerBuilder后地图显示空白的问题，提供以下几种可行方案：

方案1：修复ColorFilter矩阵的空值处理 #

你的反色矩阵逻辑本身是正确的，但可能因为瓦片加载失败时tileWidget为null，导致显示空白。修改tileBuilder增加空值判断，同时保留滤镜效果：

TileLayerOptions(
  urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
  subdomains: ['a', 'b', 'c'],
  minNativeZoom: 6,
  maxNativeZoom: 11,
  tileBuilder: (BuildContext context, Widget? tileWidget, Tile tile) {
    // 瓦片加载失败时返回深色占位符，避免空白
    if (tileWidget == null) {
      return Container(color: const Color(0xFF2D2D2D));
    }
    return ColorFiltered(
      colorFilter: const ColorFilter.matrix(<double>[
        -1,  0,  0, 0, 255,
        0, -1,  0, 0, 255,
        0,  0, -1, 0, 255,
        0,  0,  0, 1,   0,
      ]),
      child: tileWidget,
    );
  },
)

方案2：确保darkModeTilesContainerBuilder的主题环境 #

darkModeTilesContainerBuilder的生效依赖于当前应用处于深色主题环境，需在父级组件中配置深色主题：

MaterialApp(
  themeMode: ThemeMode.dark, // 强制使用深色主题
  darkTheme: ThemeData.dark(),
  home: Scaffold(
    body: FlutterMap(
      mapController: mapController,
      options: const MapOptions(
        center: LatLng(51.5074, -0.1278),
        zoom: 10,
      ),
      layers: [
        TileLayerOptions(
          minNativeZoom: 6,
          maxNativeZoom: 11,
          urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
          subdomains: ['a', 'b', 'c'],
          tilesContainerBuilder: darkModeTilesContainerBuilder,
        ),
      ],
    ),
  ),
);

如果未配置深色主题，该方法可能无法正确应用滤镜，导致显示空白。

方案3：直接使用深色主题的瓦片服务（推荐） #

相比滤镜处理，直接使用第三方提供的深色OSM瓦片更稳定，无需额外渲染逻辑：

TileLayerOptions(
  urlTemplate: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
  subdomains: ['a', 'b', 'c'],
  minNativeZoom: 6,
  maxNativeZoom: 11,
)

该瓦片原生为深色风格，加载速度和显示效果都更可靠。

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