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

时间:2019-06-01 09:39:33

标签: flutter flutter-layout

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

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

在右侧,您可以看到所需的结果,在左侧,您可以看到我的应用程序当前正在运行的内容。 On the right my app, on the left the wanted result

我一直在使用的代码与示例视频中的代码非常相似,使用了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),
              ),
            ),
          )
        ],
      ),
    );
  }
}

1 个答案:

答案 0 :(得分: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).