Flutter添加第4个BottomNavigationBarItem后背景色被覆盖问题

问题原因 #

Flutter的BottomNavigationBar存在默认规则：当底部导航项数量≥4时，组件的type属性会自动切换为BottomNavigationBarType.shifting，该模式下你设置的全局backgroundColor会失效，背景默认跟随选中项的颜色，未选中状态下就会显示为白色。

解决思路 #

• 方案1（最常用）：给BottomNavigationBar显式指定type为BottomNavigationBarType.fixed，这是最简便的方案，修改后全局backgroundColor设置就会正常生效。
  修改后的代码片段如下：

bottomNavigationBar: BottomNavigationBar(
  // 新增这行强制指定导航栏类型
  type: BottomNavigationBarType.fixed,
  backgroundColor: Colors.indigo,
  selectedItemColor:Colors.orange,
  unselectedItemColor: Colors.teal,
  currentIndex: widget.currentTab,
  onTap: (index) {
    Provider.of<AppStateManager>(context, listen: false)
        .goToTab(index);
  },
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
        icon: Icon(Icons.emoji_objects), label: 'New'),
    BottomNavigationBarItem(
        icon: Icon(Icons.access_time), label: 'Daily'),
    BottomNavigationBarItem(icon: Icon(Icons.toc), label: 'All'),
    BottomNavigationBarItem(
        icon: Icon(Icons.settings), label: 'Settings'),
  ],
),

• 方案2（保留shifting动效）：如果需要保留shifting模式的切换动画，可以给每一个BottomNavigationBarItem单独设置backgroundColor: Colors.indigo，也能实现背景色统一的效果。

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