Flutter中BottomNavigationBarItem如何保留原始图标颜色？

要让选中的BottomNavigationBarItem保留图标原始多色，避免被selectedItemColor覆盖，你可以用以下两种实用方法：

方法1：使用activeIcon指定原始图标 #

直接给BottomNavigationBarItem的activeIcon属性传入你的原始多色图标，选中时会显示这个未被着色的图标，完全保留原始色彩：

BottomNavigationBar(
  selectedItemColor: Colors.grey, // 该颜色仅作用于文字，不会影响activeIcon
  items: [
    BottomNavigationBarItem(
      icon: Image.asset('assets/icons/home_normal.png', width: 24, height: 24), // 未选中状态图标
      activeIcon: Image.asset('assets/icons/home_normal.png', width: 24, height: 24), // 选中时用原始多色图标
      label: '首页',
    ),
    BottomNavigationBarItem(
      icon: Image.asset('assets/icons/profile_normal.png', width: 24, height: 24),
      activeIcon: Image.asset('assets/icons/profile_normal.png', width: 24, height: 24),
      label: '我的',
    ),
  ],
)

注意：不要用Icon组件加载多色图标——Icon基于矢量字体，会被BottomNavigationBar的颜色自动染色；改用Image组件加载png/svg等多色资源，就能保留原始色彩。

方法2：自定义图标组件禁用颜色滤镜 #

如果需要复用图标逻辑，可以封装一个不会被外部颜色影响的图标组件：

class NoColorFilterIcon extends StatelessWidget {
  final String assetPath;
  final double size;

  const NoColorFilterIcon({super.key, required this.assetPath, this.size = 24});

  @override
  Widget build(BuildContext context) {
    return Image.asset(
      assetPath,
      width: size,
      height: size,
      color: null, // 明确设置color为null，阻止外部应用颜色滤镜
    );
  }
}

然后在BottomNavigationBarItem中使用：

BottomNavigationBarItem(
  icon: NoColorFilterIcon(assetPath: 'assets/icons/home_normal.png'),
  activeIcon: NoColorFilterIcon(assetPath: 'assets/icons/home_normal.png'),
  label: '首页',
)

这样不管BottomNavigationBar的selectedItemColor设置什么，图标都会保持原始颜色。

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