Flutter中使用BackdropFilter+ImageFilter.blur出现黑屏问题求助

你遇到的问题是因为BackdropFilter的工作逻辑是模糊它后方的内容，而不是父组件自身的背景装饰。你现在把它放在带背景图的Container子节点里，它的后方没有可模糊的内容（父容器的背景图属于自身装饰，不在BackdropFilter的“ backdrop”范围内），所以默认模糊了黑色背景，就出现了黑屏。

修复方法很简单，把背景图和模糊层分开成Stack的两层：

Stack(
  children: [
    // 第一层：背景图，铺满屏幕
    Container(
      width: double.infinity,
      height: double.infinity,
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/images/u2.jpg'),
          fit: BoxFit.cover,
        ),
      ),
    ),
    // 第二层：模糊层，铺满屏幕，模糊下方的背景图
    Container(
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
        child: Container(
          // 可选：加半透明底色让模糊效果更自然
          color: Colors.black.withOpacity(0.1),
        ),
      ),
    ),
    // 此处可添加页面其他UI组件
  ],
)

核心要点：

• 背景图单独作为Stack底层，确保处于BackdropFilter的后方
• 模糊层容器要铺满屏幕（用double.infinity或SizedBox.expand），让BackdropFilter能覆盖整个背景图
• 半透明底色是可选操作，能让模糊后的视觉效果更柔和

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