为什么背景过滤器会模糊我的整个应用程序答案

【问题标题】：Why does Backdrop filter blur my entire app为什么背景过滤器会模糊我的整个应用程序
【发布时间】：2019-10-17 17:17:42
【问题描述】：

我正在尝试实现与 Flutter 频道上本周视频小部件中显示的非常相似的效果：https://www.youtube.com/watch?v=dYRs7Q1vfYI#t=1m20s

在右侧，您可以看到所需的结果，在左侧，您可以看到我的应用中当前正在发生的事情。

我一直在使用的代码与示例视频中的代码非常相似，它使用堆栈将背景滤镜放置在我的图像上。圆形图像及其上的模糊位于一个小部件内，该小部件将放置在另一个堆栈内（连同底部的文本）。由于我只应用了图像的一小部分过滤器，我不明白为什么整个应用程序都模糊了。这是图像小部件的代码：

Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size.width - 75;
    return Container(
      height: size,
      width: size,
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Image(imageUri: "...", size: size - 30), // this is just a container with the image
          Positioned(
            top: 100,
            left: 100,
            bottom: 100,
            right: 100,
            child: BackdropFilter(
              filter: ImageFilter.blur(
                sigmaX: 5,
                sigmaY: 5,
              ),
              child: Container(
                color: Color(0x66FF0000),
              ),
            ),
          )
        ],
      ),
    );
  }
}

【问题讨论】：

这个问题只出现在 ios 上！！！

标签： flutter flutter-layout

【解决方案1】：

事实证明，视频缺少documentation 中的一个重要部分：

如果没有剪辑，过滤器将应用到全屏。

所以解决办法就是把过滤器包装成一个ClipRect，取自例子：

ClipRect(  // <-- clips to the 200x200 [Container] below
        child: BackdropFilter(
          filter: ui.ImageFilter.blur(
            sigmaX: 5.0,
            sigmaY: 5.0,
          ),
          child: Container(
            alignment: Alignment.center,
            width: 200.0,
            height: 200.0,
            child: Text('Hello World'),
          ),
        ),
      ),

【讨论】：

我写了一篇文章来展示如何使用 BackdropFilter 和 ImageFilter 在 Flutter 上制作模糊效果 - 阅读它on Medium
这个答案应该得到奖牌?
天啊...非常感谢 - 这让我发疯了！
Flutter 团队没有包含这个事实是很糟糕的。谢谢你救了我的命。

【解决方案2】：

2021 年的另一个解决方案：

将clipBehavior: Clip.hardEdge 应用到BackdropFilter 的父级

Container(
  clipBehavior: Clip.hardEdge,
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 2.0, sigmaY: 2.0),
    child: Container(
      color: Colors.black.withOpacity(0.2),
    ),
  ),
)

解释：
clipBehavior: Clip.hardEdge 表示overflow: none
如果没有剪辑，过滤器将向上溢出（在小部件树中）直到它们遇到剪辑。

【讨论】：