Flutter 如何实现透明效果的底部导航栏（Bottom Navigation Bar）

解决方案 #

该问题是两个默认配置共同导致的：BottomAppBar默认带有阴影效果，会让透明背景看起来泛白；同时Scaffold默认不会让页面Body内容延伸到底部导航栏下方，底部栏下方区域默认显示Scaffold的背景色。按以下步骤修改即可：

• 给BottomAppBar添加elevation: 0属性，移除默认阴影
• 给承载该页面的Scaffold添加extendBody: true属性，让页面背景图延伸到底部栏下方

修改后的核心代码如下：

// 底部应用栏代码
BottomAppBar _buildBottomNavigationBar() {
  return BottomAppBar(
    color: Colors.transparent,
    elevation: 0, // 新增这行去掉阴影
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        IconButton(
          onPressed: () {},
          icon: SvgPicture.asset(
            'assets/icons/home.svg',
            color: Colors.black,
          ),
        ),
        IconButton(
          onPressed: () {},
          icon: SvgPicture.asset('assets/icons/location.svg'),
          color: Colors.black,
        ),
        IconButton(
          onPressed: () {},
          icon: SvgPicture.asset('assets/icons/fish.svg'),
          color: Colors.black,
        ),
        IconButton(
          onPressed: () {},
          icon: SvgPicture.asset('assets/icons/menu.svg'),
          color: Colors.black,
        ),
      ],
    ),
  );
}

// 页面Scaffold示例
Scaffold(
  extendBody: true, // 新增这行让Body延伸到底部栏下方
  bottomNavigationBar: _buildBottomNavigationBar(),
  body: // 你的原有页面代码（带背景图的部分）
)

如果修改后仍然有白边，可以额外检查是否给Scaffold设置了非透明的backgroundColor，将它也改为Colors.transparent即可。

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