Flutter中如何正确实现容器内所有Widget的模糊效果

你的BackdropFilter没生效，核心是用错了组件逻辑：

• BackdropFilter只会模糊它自己绘制区域下方、被父组件裁剪住的内容，它的child属性里放的是浮在模糊层上方的组件，既不会被模糊，也不能作为模糊的基底。
• 现有代码直接把图标、文字容器全塞在BackdropFilter的child里，既没给模糊层加半透明的承载容器，也没让模糊层叠在需要模糊的背景内容上方，自然出不来毛玻璃效果。
• 你设置的sigmaX/Y=5模糊度太低，再加上没有半透明底色，视觉上和普通半透明白块几乎没有区别。

调整组件结构，给模糊层加半透明承载容器，确保模糊层叠在背景内容上方，可直接替换原有代码：

ClipRRect(
  borderRadius: BorderRadius.circular(20), // 匹配卡片圆角，裁剪模糊溢出的直角区域
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10), // 模糊度调到8-15区间效果更自然，可按需调整
    child: Container(
      // 半透明底色是毛玻璃效果生效的关键，不能省略
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.2), // 透明度可在0.1-0.3区间调整，数值越低越通透
        borderRadius: BorderRadius.circular(20),
        border: Border.all(color: Colors.white.withOpacity(0.3), width: 1), // 可选：加细白边匹配预期的玻璃质感
      ),
      padding: const EdgeInsets.symmetric(vertical: 10),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        mainAxisSize: MainAxisSize.min, // 列高度自适应内容，避免不必要的拉伸
        children: <Widget>[
          SvgPicture.asset('assets/svg/debit_account.svg', width: 50),
          Container(
            width: selectedWidthInActive * 0.6,
            decoration: BoxDecoration(
              color: Colors.white.withOpacity(0.75),
              borderRadius: const BorderRadius.all(Radius.circular(20)),
            ),
            padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
            child: const Text(
              'Savings',
              style: TextStyle(fontSize: 13, fontFamily: 'Gilroy Medium'),
              textAlign: TextAlign.center,
            ),
          ),
        ],
      ),
    ),
  ),
)

• 上述毛玻璃组件必须放在Stack中，作为子组件叠在你需要模糊的背景（渐变、图片等）上方，不能和背景平级，也不能作为背景的子组件，否则BackdropFilter下方没有可模糊的内容，效果不会生效。
• 调整毛玻璃通透度只需要修改Container的白色透明度即可，不需要改动模糊sigma值。
• 不要给BackdropFilter的child设置完全透明的背景，否则模糊效果会几乎不可见。

• 当前运行效果：
  
• 预期实现效果：
  

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