Flutter：如何实现底部应用栏透明？模态底栏模糊效果失效问题

你当前的实现仅通过LinearGradient添加了半透明颜色，但未实现背景模糊效果，单纯的渐变无法让底栏真正"透明"显示背后的内容。结合需求，需要用BackdropFilter配合模糊滤镜实现，同时保留渐变效果，修改后的代码如下：

修改后的模糊效果Widget #

import 'dart:ui'; // 必须导入此包以使用ImageFilter

Widget _buildSeeMore() {
  return Container(
    width: double.infinity,
    height: 315,
    child: Stack(
      children: [
        // 核心：添加背景模糊滤镜
        BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10), // 调整sigma值控制模糊程度
          child: Container(color: Colors.transparent),
        ),
        // 保留你的渐变遮罩
        Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                kWhiteColor.withOpacity(0.5),
                kWhiteColor,
              ],
            ),
          ),
        ),
        // 底部按钮内容
        Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            TextButton(
              onPressed: () {},
              child: Text(
                'See More',
                style: TextStyle(
                  color: kBlueColor,
                  fontSize: 16,
                  fontWeight: semiBold,
                ),
              ),
            ),
          ],
        ),
      ],
    ),
  );
}

关键说明 #

1. BackdropFilter是实现屏幕模糊的核心，它会模糊当前Widget下方的所有内容，必须配合ImageFilter.blur使用
2. 用Stack将模糊层、渐变层、内容层叠加，确保渐变的半透明效果和模糊效果同时生效
3. 你之前设置的extendBody: true已正确配置，它保证Scaffold的body内容会延伸到底部导航栏下方，让模糊层能捕捉到背后的内容

若调整后仍有问题，可检查：

• 确保kWhiteColor本身不是完全不透明的纯色（你的代码已添加透明度，无需额外调整）
• 微调sigmaX和sigmaY的值，数值越大模糊程度越高

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