Flutter底部导航栏选中图标不切换问题排查求助

我尝试两种方案实现点击底部导航栏时切换图标，但均未生效，图标仅变为蓝色。

方案一代码 #

BottomNavigationBarItem(
                  icon: ImageIcon(
                    AssetImage('assets/images/home.PNG')
                  ), 
                  activeIcon: ImageIcon(
                      AssetImage('assets/images/home_color.PNG')
                  ),
                  label: "Главная",
                ),

方案二代码 #

BottomNavigationBarItem(
                  icon: selectedIndex == 0 ? ImageIcon(
                    AssetImage('assets/images/home.PNG')
                  ) : ImageIcon(
                          AssetImage('assets/images/home_color.PNG')
                      ),
                  // activeIcon: ImageIcon(
                  //     AssetImage('assets/images/home_color.PNG')
                  // ),
                  label: "Главная",
                ),

底部导航栏核心配置 #

type: BottomNavigationBarType.fixed,
              currentIndex: selectedIndex,
              backgroundColor: Colors.deepPurple,
              items: <BottomNavigationBarItem>[

问题原因 #

ImageIcon组件的设计目的是将图片作为图标使用，它会自动继承Flutter主题的颜色设置（包括选中时的selectedItemColor），导致自定义的彩色图片被着色覆盖，所以只能看到主题设定的蓝色，无法显示图片本身的颜色。

解决办法 #

1. 修改方案一：替换ImageIcon为Image.asset

直接使用Image.asset加载图片，它会保留图片原始颜色，不会被主题着色，同时设置合适的图标尺寸：

BottomNavigationBarItem(
  icon: Image.asset('assets/images/home.PNG', width: 24, height: 24),
  activeIcon: Image.asset('assets/images/home_color.PNG', width: 24, height: 24),
  label: "Главная",
),

2. 修改方案二：同样替换ImageIcon并确认状态更新

把ImageIcon换成Image.asset，同时确保selectedIndex在点击时能正确更新状态：

BottomNavigationBarItem(
  icon: selectedIndex == 0 
      ? Image.asset('assets/images/home.PNG', width: 24, height: 24)
      : Image.asset('assets/images/home_color.PNG', width: 24, height: 24),
  label: "Главная",
),

额外检查点 #

• 确认pubspec.yaml中已正确配置assets路径：

  flutter:
    assets:
      - assets/images/
  

• 确保底部导航栏的onTap回调正确更新selectedIndex状态：

  onTap: (index) {
    setState(() {
      selectedIndex = index;
    });
  },
  

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