Flutter中如何将自定义底部导航栏背景设置为透明？

要实现透明的圆角底部导航栏，只需对现有代码做以下几处修改：

• 给包裹ClipRRect的外层Container添加透明背景色，避免继承Scaffold的背景
• 给BottomNavigationBar设置透明背景，并移除默认阴影
• 明确指定BottomNavigationBar的类型，避免默认样式干扰

修改后的完整代码：

return Scaffold(
  extendBody: true,
  bottomNavigationBar: Container(
    height: 80,
    color: Colors.transparent, // 设置容器透明
    child: ClipRRect(
      borderRadius: const BorderRadius.only(
        topLeft: Radius.circular(80.0),
        topRight: Radius.circular(80.0),
      ),
      child: BottomNavigationBar(
        selectedItemColor: Colors.amber[800],
        backgroundColor: Colors.transparent, // 导航栏背景透明
        elevation: 0, // 移除导航栏阴影
        type: BottomNavigationBarType.fixed, // 明确导航栏类型，避免样式异常
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    ),
  ),
  backgroundColor: const Color.fromARGB(255, 214, 7, 135),
);

关键修改说明： #

1. 外层Container的color: Colors.transparent：默认Container会继承父组件的背景色，设置透明后才不会遮挡下方内容
2. BottomNavigationBar的backgroundColor: Colors.transparent：直接让导航栏本身背景透明
3. elevation: 0：移除BottomNavigationBar默认的阴影效果，让透明更彻底
4. type: BottomNavigationBarType.fixed：当导航项数量≤3时默认是fixed类型，但显式声明能避免因版本或配置差异导致的样式问题

修改后，圆角底部导航栏会完全透明，同时保留圆角裁剪效果，配合extendBody: true，页面内容会自然延伸到底部导航栏下方。

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