Flutter如何在AppBar后添加微显高度模糊的背景图实现特殊视觉效果

你要的透背景+偏紫渐变+毛玻璃效果核心依赖BackdropFilter组件实现，同时需要调整Scaffold配置让页面内容延伸到导航栏下方，具体修改步骤如下：

注意：使用ImageFilter需要先导入dart:ui库，在文件顶部添加 import 'dart:ui'; 即可。

第一步：调整Scaffold配置 #

在使用这个BottomAppBar的页面Scaffold中添加对应属性，保证页面内容可以延伸到导航栏底部：

Scaffold(
  extendBody: true, // 核心属性：body内容延伸到底部导航栏下方
  // 如果是顶部AppBar还需要额外添加 extendBodyBehindAppBar: true,
  bottomNavigationBar: 你的BottomAppBar组件,
  body: 你的页面内容（要包含你要透出的背景图）,
)

第二步：修改BottomAppBar代码 #

你现有代码的问题是给BottomAppBar设置了不透明的深灰色底色，同时渐变全是灰色调，也没有添加模糊效果，修改后代码如下：

Widget build(BuildContext context) {
  return BottomAppBar(
    color: Colors.transparent, // 把原有不透明底色改成透明
    elevation: 0, // 去掉默认阴影避免影响效果
    child: BackdropFilter(
      // 背景模糊效果，数值越大模糊程度越高，可按需调整
      filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [
              // 替换原有灰色渐变，添加偏紫的半透明颜色，可自行调整色值和透明度
              Color(0xFF7B61FF).withOpacity(0.25),
              Color(0xFF838383).withOpacity(0.2),
            ],
            stops: [0.0, 1.0]
          ),
          // 可选：加细边框强化玻璃拟态效果
          border: Border.all(color: Colors.white.withOpacity(0.1), width: 0.5),
        ),
        height: 70,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            IconButton(
              onPressed: () {
                Navigator.pushNamed(context, '/');
              },
              icon: Icon(
                Icons.home,
                color: Colors.white,
              ),
            ),
            // 其余图标代码保持不变
          ],
        ),
      ),
    ),
  );
}

替代实现方案 #

如果不需要兼容特别老的Flutter版本，也可以使用第三方库glassmorphism的封装组件，只需要传入模糊度、渐变、边框参数即可快速实现效果，不需要手动组合BackdropFilter。

带模糊渐变的容器实现逻辑 #

和导航栏实现逻辑完全一致，用BackdropFilter包裹你的容器，设置对应模糊度和渐变透明度即可：

BackdropFilter(
  filter: ImageFilter.blur(sigmaX: 5, sigmaY:5),
  child: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [
          // 按设计师给的渐变色值设置对应透明度即可
          Colors.purple.withOpacity(0.2),
          Colors.grey.withOpacity(0.15),
        ]
      )
    ),
    // 容器其余尺寸、子组件配置保持不变
  ),
)

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