如何在Flutter中实现底部导航栏模糊效果？

问题分析 #

你当前代码的核心问题：BottomNavigationBar自带默认背景色，直接遮挡了BackdropFilter的模糊效果；同时BackdropFilter的层级和承载容器设置错误，导致模糊无法作用于导航栏下方的内容。

修改后的代码 #

bottomNavigationBar: Container(
  height: 50,
  decoration: BoxDecoration(
    borderRadius: const BorderRadius.only(
      topRight: Radius.circular(10),
      topLeft: Radius.circular(10),
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.2),
        spreadRadius: 2,
        blurRadius: 5,
        offset: Offset(0, 3),
      ),
    ],
  ),
  child: Stack(
    children: [
      // 模糊背景层：置于最底层，负责模糊下方页面内容
      ClipRRect(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10),
          topRight: Radius.circular(10),
        ),
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
          // 半透明容器：承载模糊效果，避免完全透明导致模糊不可见
          child: Container(
            color: Colors.white.withOpacity(0.3),
            height: 50,
          ),
        ),
      ),
      // 导航栏层：设置透明背景，让下方模糊层透出
      BottomNavigationBar(
        backgroundColor: Colors.transparent,
        elevation: 0, // 移除导航栏自带阴影，避免和外层阴影冲突
        showSelectedLabels: false,
        showUnselectedLabels: false,
        type: BottomNavigationBarType.fixed,
        selectedItemColor: Colors.lightBlue,
        unselectedItemColor: Colors.grey[200],
        currentIndex: _currentIndex,
        onTap: navigationTapped,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.crop_square_rounded), label: ''),
          BottomNavigationBarItem(icon: Icon(Icons.square_rounded), label: ''),
          BottomNavigationBarItem(icon: Icon(Icons.circle), label: ''),
          BottomNavigationBarItem(icon: Icon(Icons.star), label: ''),
          BottomNavigationBarItem(icon: Icon(Icons.square_rounded), label: ''),
        ],
      ),
    ],
  ),
),

关键修改点 #

• 把BackdropFilter放到Stack最底层，用半透明容器承载模糊效果（完全透明时模糊会不可见）
• 给BottomNavigationBar设置backgroundColor: Colors.transparent和elevation: 0，让模糊层能够透出，同时避免阴影重复
• 统一ClipRRect和外层Container的圆角，保证模糊区域的视觉一致性

效果说明 #

• 原代码效果：导航栏为普通纯色背景，无模糊效果
• 预期效果：导航栏背景模糊，清晰透出下方页面内容
• 此前尝试效果：模糊未生效或显示异常

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