Flutter中嵌套GoogleMap时ClipRRect对BackdropFilter失效问题

问题说明 #

在Stack组件中嵌套GoogleMap时，ClipRRect无法对上层的BackdropFilter实现圆角裁剪效果，但替换为Image.network等Flutter内置组件时功能正常。已尝试切换至Flutter master和beta渠道，问题仍未解决。

相关代码 #

ClipRRect(
  borderRadius: BorderRadius.circular(52),
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 19, sigmaY: 19),
    child: Container(
        height: 219,
        padding: const EdgeInsets.all(9),
        decoration: BoxDecoration(
          color: Colors.white.withOpacity(0.39),
        ),
        child: Column(
          children: [
            GestureDetector(
              onTap: () async {
                setState(() {
                  firstSelecting = true;
                });
                await getLocation();
                final GoogleMapController controller = await _controller.future;
                controller.animateCamera(CameraUpdate.newCameraPosition(CameraPosition(
                  target: _currentPosition!,
                  zoom: 15,
                )));
                controller.dispose();
              },
              child: ListTile(
                leading: Container(
                  height: 34,
                  width: 34,
                  decoration: BoxDecoration(
                      border: Border.all(color: Colors.black.withOpacity(firstSelecting ? 0.79 : 0.49)), shape: BoxShape.circle),
                  child: Center(
                      child: Container(
                    height: 25,
                    width: 25,
                    decoration: BoxDecoration(color: Colors.black.withOpacity(firstSelecting ? 0.79 : 0.49), shape: BoxShape.circle),
                    child: const Center(
                      child: Text(
                        "1",
                        style: TextStyle(color: Colors.white, fontSize: 19),
                      ),
                    ),
                  )),
                ),
                title: Text(
                  firstPlace,
                  style: TextStyle(color: Colors.black.withOpacity(firstSelecting ? 0.79 : 0.49), fontSize: 19),
                ),
                trailing: Icon(
                  Icons.location_pin,
                  color: Colors.black.withOpacity(firstSelecting ? 0.79 : 0.49),
                ),
              ),
            ),
          ],
        )),
  ),
),

效果说明 #

实际效果中，BackdropFilter的模糊区域未被ClipRRect裁剪为圆角，直角边缘依然清晰可见。

解决方案 #

方法1：同步设置圆角与裁剪行为 #

由于GoogleMap是原生平台视图，Flutter的ClipRRect无法直接对其上层的BackdropFilter模糊效果进行完整裁剪，需同步在BackdropFilter的子容器中设置圆角，并显式指定裁剪行为：

ClipRRect(
  borderRadius: BorderRadius.circular(52),
  clipBehavior: Clip.hardEdge, // 显式启用硬裁剪
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 19, sigmaY: 19),
    child: Container(
      height: 219,
      padding: const EdgeInsets.all(9),
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.39),
        borderRadius: BorderRadius.circular(52), // 与外层ClipRRect同步圆角
      ),
      clipBehavior: Clip.hardEdge, // 子容器也启用裁剪
      child: Column(
        children: [
          // 原ListTile等内容保持不变
        ],
      ),
    ),
  ),
)

方法2：使用ShaderMask替代组合 #

通过ShaderMask将模糊效果与圆角裁剪合并，绕开原生视图的裁剪限制：

ShaderMask(
  shaderCallback: (Rect rect) {
    return ImageFiltered(
      imageFilter: ImageFilter.blur(sigmaX: 19, sigmaY: 19),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(52),
          color: Colors.white.withOpacity(0.39),
        ),
      ),
    ).createShader(rect);
  },
  blendMode: BlendMode.srcATop,
  child: Container(
    height: 219,
    padding: const EdgeInsets.all(9),
    child: Column(
      children: [
        // 原ListTile等内容保持不变
      ],
    ),
  ),
)

方法3：调整GoogleMap层级 #

将GoogleMap也包裹在ClipRRect中，确保模糊效果作用的区域本身已被裁剪：

Stack(
  children: [
    ClipRRect(
      borderRadius: BorderRadius.circular(52),
      clipBehavior: Clip.hardEdge,
      child: GoogleMap(
        // GoogleMap配置内容
      ),
    ),
    ClipRRect(
      borderRadius: BorderRadius.circular(52),
      clipBehavior: Clip.hardEdge,
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 19, sigmaY: 19),
        child: Container(
          height: 219,
          padding: const EdgeInsets.all(9),
          color: Colors.white.withOpacity(0.39),
          child: Column(
            // 原内容保持不变
          ),
        ),
      ),
    ),
  ],
)

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