Flutter底部导航栏无法透明及高斯模糊实现咨询

透明不生效的原因及修复 #

直接给BottomNavigationBar设置backgroundColor: Colors.red.withOpacity(0.2)不生效，是因为组件内部的Material层级会覆盖透明效果。修复方式是将导航栏包裹在外部容器中，给容器设置半透明底色，同时将导航栏自身的背景设为全透明。

高斯模糊实现步骤 #

要实现高斯模糊，需结合BackdropFilter和ImageFilter.blur，同时确保页面内容能延伸到导航栏下方（通过Scaffold的extendBody: true），具体实现如下：

修改后的完整代码片段 #

首先导入必要的包：

import 'dart:ui';

替换原Scaffold中的bottomNavigationBar部分：

bottomNavigationBar: ClipRRect(
  child: Container(
    // 半透明底色，可根据需求调整颜色和透明度
    color: Colors.red.withOpacity(0.2),
    child: BackdropFilter(
      // sigmaX/Y控制模糊程度，值越大越模糊
      filter: ImageFilter.blur(sigmaX: 8, sigmaY: 8),
      child: BottomNavigationBar(
        showSelectedLabels: false,
        showUnselectedLabels: false,
        elevation: 0.0,
        type: BottomNavigationBarType.fixed,
        // 导航栏自身设为透明，让下方的模糊效果和底色透出来
        backgroundColor: Colors.transparent,
        iconSize: 30,
        currentIndex: _currentIndex,
        onTap: (int index) {
          Provider.of<NavigationBarModel>(context, listen: false).setSelectedIndex(index);
        },
        // 以下items部分保持原代码不变
        items: [
          BottomNavigationBarItem(
              icon: Column(
                children: [
                  SvgPicture.asset(
                    "assets/svg/home.svg",
                    width: 19,
                    height: 20,
                    color: _currentIndex == 0 ? Colors.blue : ProjectColors.fireFly,
                  ),
                  SizedBox(height: 8),
                  SvgPicture.asset(
                    "assets/svg/selected.svg",
                    color: _currentIndex == 0 ? ProjectColors.warning : Colors.white,
                  ),
                ],
              ),
              label: ''),
          // 其余BottomNavigationBarItem代码省略...
        ],
      ),
    ),
  ),
),

关键注意点 #

• 必须保持Scaffold的extendBody: true，否则导航栏下方是空白，透明和模糊效果无法体现。
• 使用ClipRRect可以避免模糊效果溢出到导航栏的边界之外。
• 调整sigmaX和sigmaY的值可以控制模糊强度，根据视觉需求修改即可。

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