Flutter中如何在Google Maps上实现毛玻璃（Glass Effect）效果？

核心原因 #

Google Maps在Flutter中是原生平台视图（Android为MapView，iOS为MKMapView），它独立于Flutter的Skia渲染层，会直接绘制在Flutter组件的上层。而BackdropFilter仅能作用于Flutter自身Skia渲染的内容，因此无法对原生地图生效。

解决方案 #

方案1：使用地图快照实现真实模糊（静态场景）

通过GoogleMapController的takeSnapshot()方法获取当前地图的截图，将截图作为静态图片展示，再对图片应用模糊滤镜。适合不需要交互的静态地图场景。

代码示例：

late GoogleMapController mapController;
Uint8List? mapSnapshot;

// 捕获地图快照
void _captureMap() async {
  final snapshot = await mapController.takeSnapshot();
  setState(() {
    mapSnapshot = snapshot;
  });
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: [
        // 原始地图，未捕获快照时显示
        if (mapSnapshot == null)
          GoogleMap(
            onMapCreated: (controller) => mapController = controller,
            initialCameraPosition: const CameraPosition(
              target: LatLng(37.7749, -122.4194),
              zoom: 12,
            ),
          ),
        // 模糊后的地图快照
        if (mapSnapshot != null)
          Image.memory(
            mapSnapshot!,
            fit: BoxFit.cover,
            width: double.infinity,
            height: double.infinity,
          ),
        // 模糊滤镜层
        BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
          child: Container(color: Colors.black.withOpacity(0.1)),
        ),
        // 触发快照的按钮
        Positioned(
          bottom: 20,
          right: 20,
          child: ElevatedButton(
            onPressed: _captureMap,
            child: const Text('模糊地图'),
          ),
        ),
      ],
    ),
  );
}

方案2：模拟模糊效果（保留交互）

如果需要保留地图的交互功能，无法直接模糊原生地图，可通过叠加深色半透明层+模糊滤镜的组合，模拟视觉上的模糊遮罩效果。虽然不是真正模糊地图内容，但能达到一致的视觉体验。

代码示例：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: [
        // 可交互的原生地图
        GoogleMap(
          initialCameraPosition: const CameraPosition(
            target: LatLng(37.7749, -122.4194),
            zoom: 12,
          ),
        ),
        // 深色半透明层降低地图亮度，增强模糊视觉效果
        Container(color: Colors.black.withOpacity(0.3)),
        // 模糊滤镜层
        BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
          child: Container(color: Colors.black.withOpacity(0.1)),
        ),
        // 其他操作按钮
        Positioned(
          bottom: 20,
          right: 20,
          child: ElevatedButton(
            onPressed: () {},
            child: const Text('操作按钮'),
          ),
        ),
      ],
    ),
  );
}

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