如何彻底移除Flutter中BottomAppBar组件的背景

你遇到的黑色区域问题，核心是两个原因：一是BottomAppBar的Material组件默认带有surface tint底色，二是Scaffold未允许页面内容延伸至底部导航栏区域。按以下步骤修改即可解决：

1. 调整BottomAppBar属性 #

给BottomAppBar添加surfaceTintColor: Colors.transparent，配合已设置的透明color和0 elevation，彻底清除默认背景：

return BottomAppBar(
  color: Colors.transparent,
  elevation: 0.0,
  surfaceTintColor: Colors.transparent, // 新增该行清除surface tint底色
  child: ClipRRect(
    borderRadius: BorderRadius.circular(10),
    child: Container(
      height: 60,
      color: primaryDark,
      child: Row(
        children: [
          navItem(
              Icons.home_filled,
              pageIndex == 0,
              onTap: () => onTap(0)),
          navItem(
              Icons.insert_chart_outlined_outlined,
              pageIndex == 1,
              onTap: () => onTap(1)),
          const SizedBox(width: 60),
          navItem(
              Icons.wallet,
              pageIndex == 2,
              onTap: () => onTap(2)),
          navItem(
              Icons.person,
              pageIndex == 3,
              onTap: () => onTap(3)),
        ],
      ),
    ),
  ),
);

2. 修改Scaffold的extendBody属性 #

在使用该NavBar的Scaffold中设置extendBody: true，让页面内容延伸至底部导航栏下方，确保透明效果真正生效：

Scaffold(
  extendBody: true, // 必须添加该属性
  bottomNavigationBar: NavBar(pageIndex: _currentIndex, onTap: (index) {
    setState(() {
      _currentIndex = index;
    });
  }),
  // ...其他Scaffold配置
)

完成以上修改后，BottomAppBar原本的黑色区域会变为透明，自定义的圆角导航栏将悬浮在页面背景之上。

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