为什么背景过滤器会使我的整个应用模糊

Question

我正在尝试实现与flutter频道https://www.youtube.com/watch?v=dYRs7Q1vfYI#t=1m20s

上的本周视频小部件中显示的效果非常相似的效果

在右侧，您可以看到所需的结果，在左侧，您可以看到我的应用程序当前正在运行的内容。

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

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),
              ),
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

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

  

如果没有剪辑，则滤镜将应用于全屏。

因此解决方案是将过滤器包装到ClipRect中，如示例所示：

name(john).
name(mary).
name(jack).

rating(john,2).
rating(mary,3).
rating(jack,4).

ratings(VKs) :-
    setof(V-K,(name(K),rating(K,V)),VKs).