如何将Flutter BottomNavigationBar选中区域背景设为透明？

方法1：取消默认高亮背景，自定义选中样式 #

BottomNavigationBar默认的选中高亮背景是自带样式，你可以直接通过控制选中/未选中状态的图标、文字颜色，替代默认高亮效果，这样就不会有背景色块：

BottomNavigationBar(
  backgroundColor: Colors.white, // 和外层圆角容器背景色保持一致
  type: BottomNavigationBarType.fixed,
  selectedItemColor: Colors.blue, // 选中时的图标/文字颜色
  unselectedItemColor: Colors.grey, // 未选中状态颜色
  showSelectedLabels: true,
  showUnselectedLabels: true,
  items: const [
    BottomNavigationBarItem(
      icon: Icon(Icons.home_outlined),
      label: "首页",
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.shopping_cart_outlined),
      label: "购物车",
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person_outlined),
      label: "我的",
    ),
  ],
  currentIndex: _selectedIndex,
  onTap: (index) {
    setState(() {
      _selectedIndex = index;
    });
  },
)

方法2：通过Theme覆盖默认高亮样式 #

如果需要全局统一处理，或者不想逐个配置导航项，可以用Theme包裹导航栏，直接移除默认的高亮和水波纹效果：

Theme(
  data: Theme.of(context).copyWith(
    highlightColor: Colors.transparent, // 移除选中时的背景高亮
    splashColor: Colors.transparent, // 可选：移除点击时的水波纹
  ),
  child: BottomNavigationBar(
    backgroundColor: Colors.white,
    selectedItemColor: Colors.blue,
    unselectedItemColor: Colors.grey,
    items: const [/* 你的导航项 */],
    currentIndex: _selectedIndex,
    onTap: (index) => setState(() => _selectedIndex = index),
  ),
)

配合圆角和外边距配置 #

把上面的导航栏放到你已有的圆角容器里即可，确保容器背景色和页面/导航栏背景匹配，保证圆角效果正常：

Container(
  margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(20),
    boxShadow: const [BoxShadow(color: Colors.black12, blurRadius: 6)],
  ),
  child: /* 上面的BottomNavigationBar或Theme包裹的导航栏 */,
)

为什么之前的尝试无效？ #

你之前给外层Container设置透明背景，只是修改了容器的背景，而BottomNavigationBar的选中高亮是组件内部的默认样式，必须针对导航栏本身的样式或主题进行修改才能生效。

内容的提问来源于stack exchange，提问作者MD Tangim haque