Flutter容器添加背景模糊问题：仅容器模糊而非全屏

你的问题出在BackdropFilter默认会作用于其绘制区域背后的所有内容，未加裁剪时它会延伸至全屏。只需通过ClipRRect将模糊效果限制在容器边界内即可，无需手动指定精确尺寸，具体修改如下：

Widget loginContainer() {
  return ClipRRect(
    // 与容器圆角保持一致，确保模糊效果也为圆角
    borderRadius: BorderRadius.circular(10),
    child: BackdropFilter(
      filter: ImageFilter.blur(
        sigmaX: 5.0,
        sigmaY: 5.0,
      ),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white70.withOpacity(0.3), // 可调整透明度优化模糊+半透明效果
          borderRadius: BorderRadius.circular(10),
        ),
        child: getLoginContainer(),
      ),
    ),
  );
}

Widget getLoginContainer() {
  return Column(
    children: [
      space(20),
      emailTextField(),
      space(10),
      passwordTextField(),
      space(10),
      forgotPassword(),
      space(20),
      loginButton(),
      space(10),
      signUpTextLine(),
      space(30),
      copyrightTextLine(),
      space(10),
    ],
  );
}

关键说明： #

• ClipRRect会根据内部Container的尺寸（由getLoginContainer的内容撑开）自动裁剪模糊区域，无需手动设置宽高。
• 保持ClipRRect和Container的borderRadius一致，避免模糊效果溢出圆角边界。
• 调整Container的color透明度，能让模糊背景和半透明效果更好融合，提升视觉体验。

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