Flutter网站BottomNavBar颜色异常求助：图标文字不可见

当你设置BottomNavigationBarType.shifting时，全局的backgroundColor属性会被忽略——这种模式下，每个BottomNavigationBarItem的backgroundColor会单独控制对应项的背景，默认值为白色，这就是导航栏一直显示白色的核心原因。

根据需求选择以下两种处理方式：

方案1：切换为fixed模式（推荐，适合统一背景） #

将type改为BottomNavigationBarType.fixed，此时全局的backgroundColor会正常生效，所有导航项共用同一背景：

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.fixed, // 修改此处
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.edit_note_sharp),
      label: 'txt1',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.checklist_outlined),
      label: 'txt2',
    ),
  ],
  currentIndex: _selectedIndex,
  onTap: onItemTapped,
  backgroundColor: kPrimaryColor,
  mouseCursor: SystemMouseCursors.click,
  selectedFontSize: 20,
  selectedIconTheme: const IconThemeData(color: Colors.amberAccent, size: 40),
  selectedItemColor: Colors.amberAccent,
  selectedLabelStyle: const TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
  unselectedIconTheme: const IconThemeData(
    color: kPrimaryLightColor,
  ),
  unselectedItemColor: Colors.blueGrey,
),

方案2：保留shifting模式，给每个item设置背景 #

如果需要保留shifting模式的切换动画效果，给每个BottomNavigationBarItem添加backgroundColor属性，替换默认的白色背景：

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.shifting,
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.edit_note_sharp),
      label: 'txt1',
      backgroundColor: kPrimaryColor, // 添加背景色
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.checklist_outlined),
      label: 'txt2',
      backgroundColor: kPrimaryColor, // 添加背景色
    ),
  ],
  currentIndex: _selectedIndex,
  onTap: onItemTapped,
  mouseCursor: SystemMouseCursors.click,
  selectedFontSize: 20,
  selectedIconTheme: const IconThemeData(color: Colors.amberAccent, size: 40),
  selectedItemColor: Colors.amberAccent,
  selectedLabelStyle: const TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
  unselectedIconTheme: const IconThemeData(
    color: kPrimaryLightColor,
  ),
  unselectedItemColor: Colors.blueGrey,
),

额外提示：shifting模式下未选中的item标签默认会变为白色，若背景色较浅，建议通过unselectedLabelStyle显式设置文字颜色，避免出现对比度过低的问题。

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