Flutter中使用ClipOval将BackdropFilter裁剪为圆形不生效的问题

嘿，我之前也踩过这个坑！你用ClipOval包裹BackdropFilter想得到圆形模糊，但结果还是方形的，这其实是BackdropFilter的渲染特性搞的鬼——它的模糊效果是基于自身的布局边界来计算的，父级的ClipOval虽然能裁剪显示区域，但没办法限制它的模糊计算范围，所以模糊还是会覆盖整个方形区域，看起来就没生效。

给你两个亲测有效的解决办法：

• 方法一：用ShaderMask做圆形遮罩，把超出圆形的模糊部分“切掉”
  这个思路是通过径向渐变的遮罩，把圆形外面的模糊内容过滤掉，只保留圆形范围内的效果：

  return ShaderMask(
    shaderCallback: (Rect rect) {
      return RadialGradient(
        center: Alignment.center,
        radius: 0.5,
        colors: const [Colors.black, Colors.transparent],
        stops: const [0.99, 1.0],
      ).createShader(rect);
    },
    blendMode: BlendMode.dstOut,
    child: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
      child: Container(
        height: 100,
        width: 100,
        color: Colors.transparent,
      ),
    ),
  );
  

• 方法二：调整组件层级，让BackdropFilter只作用在裁剪后的圆形区域
  把ClipOval放到BackdropFilter里面，这样BackdropFilter会只对已经裁剪好的圆形区域应用模糊，从根源上避免方形模糊的问题：

  return Container(
    height: 100,
    width: 100,
    child: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
      child: ClipOval(
        child: Container(
          color: Colors.transparent,
        ),
      ),
    ),
  );
  

备注：内容来源于stack exchange，提问作者Chris