Flutter中BottomNavigationBarItem选中颜色失效及默认颜色异常求助

问题根源 #

1. 你给每个Icon硬写了color: Colors.black，这会直接覆盖BottomNavigationBar的selectedItemColor设置，导致选中项颜色不生效。
2. 当底部导航项数量≥4时，Flutter默认会把BottomNavigationBarType设为shifting，这种模式下未选中图标会自动变成白色，这就是你遇到的默认颜色异常。

修复步骤 #

• 删除所有Icon组件里的color: Colors.black配置
• 在BottomNavigationBar中明确设置unselectedItemColor: Colors.black，同时将selectedItemColor改为你需要的黄色
• 保留已配置的type: BottomNavigationBarType.fixed（该配置能避免数量≥4时自动切换为shifting模式）

修改后的完整代码片段 #

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.fixed,
  selectedItemColor: Colors.yellow, // 选中项设置为黄色
  unselectedItemColor: Colors.black, // 未选中项保持黑色
  backgroundColor: Colors.white,
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
        icon: Icon(Icons.add_box_outlined),
        label: ''),
    BottomNavigationBarItem(
        icon: Icon(Icons.location_on_outlined),
        label: ''),
    BottomNavigationBarItem(
        icon: Icon(Icons.heart_broken_outlined),
        label: ''),
    BottomNavigationBarItem(
        icon: Icon(Icons.person_outline_outlined),
        label: ''),
  ],
  currentIndex: _selind,
  onTap: OnBeingTapped,
),

修改后，选中的导航项图标会变为黄色，未选中项保持黑色，且不会再出现数量≥4时图标自动变白的问题。

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