容器完全模糊而不是圆形答案

【问题标题】：Full blurring of the container instead of a circle容器完全模糊而不是圆形
【发布时间】：2022-12-01 16:41:24
【问题描述】：

我只想有一个模糊的圆圈，但这是不可能的，圆圈的外部，即 Container 完全模糊。 CustomPoint 也是如此。

代码：

Center(
    child: Stack(alignment: Alignment.center, children: [
      Image.network(
          "https://mojekooh.com/wp-content/uploads/2020/09/1024px-Matterhorn_from_Domh%C3%BCtte_-_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),
          ),
        ),
      )
    ]),
  ),

我搜索了互联网但没有找到任何东西

更新:

我的朋友们，我解决了这个问题：

    Stack(alignment: Alignment.center, children: [
        Image.network(
            "https://mojekooh.com/wp-content/uploads/2020/09/1024px-Matterhorn_from_Domh%C3%BCtte_-_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;
}
}

【问题讨论】：

你能包括你想要的图像吗？

标签： flutter dart

【解决方案1】：

使用 ImageFiltered 小部件而不是 BackdropFilter

   Center(
        child: Stack(alignment: Alignment.center, children: [
          Image.network(
              "https://mojekooh.com/wp-content/uploads/2020/09/1024px-Matterhorn_from_Domh%C3%BCtte_-_2.jpg"),
          ClipRRect(
            child: ImageFiltered(
              imageFilter: 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),
              ),
            ),
          )
        ]),
      ),

记得导入 'dart:ui'

【讨论】：

谢谢，但是没用

【解决方案2】：

您可以模糊一个CircleAvatar，而不是模糊一个容器。也参考这个Create a blur shadow to a circular image in flutter

【讨论】：

谢谢，我测试了，但是我的问题还是没有解决

【解决方案3】：

我的朋友们，我解决了这个问题：

Stack(alignment: Alignment.center, children: [
        Image.network(
            "https://mojekooh.com/wp-content/uploads/2020/09/1024px-Matterhorn_from_Domh%C3%BCtte_-_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;
}
}

【讨论】：