Flutter使用Stack实现Widget局部模糊时出现全屏模糊的问题

问题出在BackdropFilter的模糊效果会默认超出父组件的布局边界——哪怕你用Positioned指定了顶部区域的尺寸，它还是会对整个屏幕范围内的内容应用模糊。

只需要给Positioned的子组件套一层ClipRect，就能把模糊效果限制在你设定的区域内：

return Scaffold(
  body: Stack(
    children: [
      Padding(
        // 你的内容
      ),
      Positioned(
        top: 0,
        bottom: height * 0.85,
        right: 0,
        left: 0,
        child: ClipRect(
          child: BackdropFilter(
            filter: ui.ImageFilter.blur(
              sigmaX: 5, sigmaY: 5,
            ),
            child: Container(color: Colors.transparent),
          ),
        ),
      )
    ],
  ),
);

ClipRect的作用是将子组件的绘制区域严格裁剪到父组件（这里就是Positioned定义的顶部小块）的边界内，这样BackdropFilter的模糊就只会作用在这个限定区域，不会扩散到全屏。

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