Flutter中如何优雅实现自定义模糊底部导航栏覆盖页面？

你可以借助Flutter Scaffold的extendBody: true属性解决页面被挤压的问题，同时直接在bottomNavigationBar中实现模糊效果，不用嵌套多层冗余的Stack，结构更清爽：

关键优化点 #

• 开启extendBody: true：让页面内容延伸至底部导航栏所在区域，不会被导航栏挤压缩小，页面滚动功能完全正常。
• 简化布局层级：砍掉多余的嵌套容器、Stack，直接将模糊效果集成到bottomNavigationBar的组件中，代码更易维护。

完整实现代码 #

Scaffold(
  extendBody: true, // 核心属性：让body占满整个屏幕，导航栏覆盖在上方
  body: screens[...], // 你的页面内容，滚动不受任何影响
  bottomNavigationBar: Container(
    height: MediaQuery.of(context).size.height / 10,
    child: ClipRRect(
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
        child: Container(
          decoration: BoxDecoration(
            color: Theme.of(context).brightness == Brightness.light
                ? const Color.fromRGBO(184, 99, 99, 0.28)
                : const Color.fromRGBO(255, 255, 255, 0.05),
            border: Border(
              top: BorderSide(
                width: 1,
                color: Theme.of(context).brightness != Brightness.light
                    ? Colors.white.withOpacity(0.2)
                    : Colors.pink.withOpacity(0.2),
              ),
            ),
          ),
          // 这里添加你的导航栏按钮/图标
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: const [
              Icon(Icons.home),
              Icon(Icons.search),
              Icon(Icons.person),
            ],
          ),
        ),
      ),
    ),
  ),
)

方案优势 #

• extendBody: true从根源解决页面缩小问题：允许Scaffold的body内容占据整个屏幕空间，底部导航栏直接覆盖在body上方，不会挤压布局。
• 布局层级大幅简化：砍掉了原有的多层嵌套结构，代码可读性和维护性显著提升。
• 完全保留原有视觉效果：玻璃态模糊、明暗主题适配的颜色和边框逻辑完整保留，没有损失任何设计效果。

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