Flutter实现单个模糊圆形问题：容器整体模糊而非仅圆形区域

需求是仅保留一个模糊圆形区域，但实际运行后圆形外的容器区域也被完全模糊，使用CustomClipper时也存在相同问题。

初始代码 #

Center(
    child: Stack(alignment: Alignment.center, children: [
      Image.network(
          "https://mojekooh.com/wp-content/uploads/2020/09/1024px-Matterhorn_from_Domhütte_-_2.jpg"),
      ClipRRect(
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
          child: Container(
            width: 200,
            height: 100,
            decoration: const BoxDecoration(
                color: Color.fromARGB(33, 255, 0, 0),
                shape: BoxShape.circle),
          ),
        ),
      )
    ]),
  ),

解决后的代码 #

通过自定义Clipper结合ClipOval实现了仅圆形区域模糊的效果，最终代码如下：

Stack(alignment: Alignment.center, children: [
        Image.network(
            "https://mojekooh.com/wp-content/uploads/2020/09/1024px-Matterhorn_from_Domhütte_-_2.jpg"),
        ClipOval(
         clipper: CoustomCircle(),
          child: BackdropFilter(
           filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
            child: Container(
              width: 200,
              height: 200,
              decoration: const BoxDecoration(
                  color: Color.fromARGB(57, 255, 0, 0),
                  shape: BoxShape.circle),
            ),
          ),
        )
      ]),


class CoustomCircle extends CustomClipper<Rect> {

  @override
  Rect getClip(size){
    return const Rect.fromLTWH(0, 0, 200, 200);
  }

@override
  bool shouldReclip(oldClipper){
  return true;
}
}

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