Flutter中无法修改BottomNavigationBar背景颜色的问题排查

问题原因 #

你设置了type: BottomNavigationBarType.shifting，这种模式下，BottomNavigationBar的整体backgroundColor会失效，导航栏的背景色由每个BottomNavigationBarItem的backgroundColor决定。你当前的代码里每个item都没设置这个属性，再加上你把导航栏的backgroundColor设成了Colors.white，所以最终显示白色。

解决方案 #

根据你是否需要保留shifting的切换动画，有两种处理方式：

方式一：取消shifting模式（推荐，适合多数场景） #

把type改为BottomNavigationBarType.fixed，然后直接修改导航栏的backgroundColor为黑色，同时调整图标和文字颜色为白色（避免黑背景上黑文字看不见）：

bottomNavigationBar: BottomNavigationBar(
  onTap: _onItemTapped,
  type: BottomNavigationBarType.fixed, // 修改此处
  iconSize: 30,

  unselectedItemColor: Colors.white, // 改为白色
  selectedIconTheme: const IconThemeData(color: Colors.white, size: 30), // 改为白色
  selectedItemColor: Colors.white, // 改为白色
  selectedLabelStyle: const TextStyle(fontWeight: FontWeight.bold),
  backgroundColor: Colors.black, // 改为黑色

  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.door_back_door),
      label: 'Rooms',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.search),
      label: 'Search',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.map),
      label: 'Maps',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'Profile',
    ),
  ],
  currentIndex: _selectedIndex,
),

方式二：保留shifting模式 #

如果需要保留切换时的位移动画，给每个BottomNavigationBarItem添加backgroundColor: Colors.black，同时调整图标文字颜色：

bottomNavigationBar: BottomNavigationBar(
  onTap: _onItemTapped,
  type: BottomNavigationBarType.shifting,
  iconSize: 30,

  unselectedItemColor: Colors.white, // 改为白色
  selectedIconTheme: const IconThemeData(color: Colors.white, size: 30), // 改为白色
  selectedItemColor: Colors.white, // 改为白色
  selectedLabelStyle: const TextStyle(fontWeight: FontWeight.bold),

  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
      backgroundColor: Colors.black, // 添加该行
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.door_back_door),
      label: 'Rooms',
      backgroundColor: Colors.black, // 添加该行
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.search),
      label: 'Search',
      backgroundColor: Colors.black, // 添加该行
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.map),
      label: 'Maps',
      backgroundColor: Colors.black, // 添加该行
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'Profile',
      backgroundColor: Colors.black, // 添加该行
    ),
  ],
  currentIndex: _selectedIndex,
),

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