Flutter中如何实现Scaffold或bottomNavigationBar模糊背景效果

直接修改Scaffold配置和底部导航栏外层嵌套结构即可，不需要引入第三方依赖。

前置配置 #

首先给Scaffold添加extendBody: true属性，让页面内容可以延伸到底部导航栏所在区域下方，否则模糊层下只会显示Scaffold背景，无法透出内容实现毛玻璃效果：

Scaffold(
  extendBody: true,
  // 原有appBar、body等属性保持不变
)

核心模糊实现 #

将你原本传给bottomNavigationBar参数的导航栏组件，按以下结构嵌套：

1. 最外层用ClipRect包裹，裁切模糊效果的生效范围，避免整个页面被模糊
2. 第二层嵌套BackdropFilter，配置高斯模糊参数
3. 导航栏组件本身设置透明/半透明背景，关闭默认高程

完整代码示例：

import 'dart:ui'; // 必须引入，ImageFilter在这个库中

// ...

bottomNavigationBar: ClipRect(
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10), // sigma值越大模糊强度越高
    child: BottomNavigationBar(
      backgroundColor: Colors.white.withOpacity(0.2), // 半透明底色，兼顾可读性和毛玻璃效果
      elevation: 0, // 关闭默认阴影，避免和模糊效果冲突
      // 原有BottomNavigationBar的items、currentIndex、onTap等逻辑全部保留
      items: const [
        BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
        BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
      ],
    ),
  ),
)

效果调整说明 #

• 模糊强度：修改ImageFilter.blur的sigmaX、sigmaY值即可，推荐数值在8~15之间，效果最自然
• 底色透明度：调整backgroundColor的透明度参数，0.1~0.3区间的透明度视觉效果最佳，也可以根据主题换成半透明黑色/其他主题色
• 圆角需求：如果需要带圆角的底部导航栏，在ClipRect外层套ClipRRect组件，配置对应borderRadius即可
• 自定义底部栏：如果不用系统自带的BottomNavigationBar，用自定义Container写底部栏，嵌套逻辑完全一致

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