Flutter BottomNavigationBar的unselectedItemColor属性失效问题求助

我在使用Flutter的BottomNavigationBar时遇到问题，unselectedItemColor属性无法正常工作。我尝试将该属性设置为红色，但未达到预期效果。以下是我的相关代码：

bottomNavigationBar: BottomNavigationBar( 
      items: [
        BottomNavigationBarItem(
          icon: Icon(
              Icons.home_rounded, size: 35,color: color.AppColor.activeBottomMenuIcon,
              ),
          label: 'First'
         
         ),
         BottomNavigationBarItem(
              icon: Icon(Icons.favorite_rounded, size:   35,color: color.AppColor.unActiveBottomMenuIcon,),
          label: 'Second'
        ),
      BottomNavigationBarItem(
           icon: Icon(Icons.add_circle_rounded, size: 45,color:color.AppColor.addItemIcons,),
          label: 'Third'
        ),
      BottomNavigationBarItem(
           icon: Icon(Icons.messenger_rounded, size: 35,color: color.AppColor.unActiveBottomMenuIcon,),
          label: 'Fourth'
        ),
      BottomNavigationBarItem(
            icon: Icon(Icons.person_rounded, size: 35,color: color.AppColor.unActiveBottomMenuIcon,),
          label: 'Fith',
        ),
      ],
    selectedItemColor: color.AppColor.activeBottomMenuIcon,
    unselectedItemColor: Colors.red,
    //selectedItemColor: Colors.red,
      //Calling method to change state
      onTap: _onItemTapped,

      currentIndex: _selectedIndex,
      ),
    //bottomNavigationBar

问题原因 #

你直接给每个Icon组件设置了固定的color属性，这会覆盖BottomNavigationBar的unselectedItemColor和selectedItemColor配置。BottomNavigationBar的颜色属性只有在子Icon未指定颜色时才会生效。

解决方法 #

• 移除所有BottomNavigationBarItem中Icon的color参数，让BottomNavigationBar的颜色属性来控制图标颜色。
• 若需要某个特殊图标（比如第三个“Third”的加号图标）保持固定颜色，可以单独保留它的color设置，其他图标不指定颜色。

修改后的代码示例：

bottomNavigationBar: BottomNavigationBar( 
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.home_rounded, size: 35), // 移除固定color
          label: 'First'
         ),
         BottomNavigationBarItem(
              icon: Icon(Icons.favorite_rounded, size: 35), // 移除固定color
          label: 'Second'
        ),
      BottomNavigationBarItem(
           icon: Icon(Icons.add_circle_rounded, size: 45, color: color.AppColor.addItemIcons), // 保留特殊颜色
          label: 'Third'
        ),
      BottomNavigationBarItem(
           icon: Icon(Icons.messenger_rounded, size: 35), // 移除固定color
          label: 'Fourth'
        ),
      BottomNavigationBarItem(
            icon: Icon(Icons.person_rounded, size: 35), // 移除固定color
          label: 'Fith',
        ),
      ],
    selectedItemColor: color.AppColor.activeBottomMenuIcon,
    unselectedItemColor: Colors.red,
      onTap: _onItemTapped,
      currentIndex: _selectedIndex,
      ),

额外说明 #

如果需要更灵活的图标样式切换，也可以通过currentIndex判断当前选中项，在Icon组件中动态设置颜色，但优先使用BottomNavigationBar自带的颜色属性，代码会更简洁易维护。

内容的提问来源于stack exchange，提问作者Bruno Ganontha Payang