Flutter中BottomNavigationBar的selectedItemColor对SVG图标不生效

核心原因 #

你使用Image组件加载SVG时，它不会像ImageIcon那样自动响应BottomNavigationBar的selectedItemColor与unselectedItemColor——Image仅负责渲染静态图片，没有集成图标颜色适配的逻辑，而ImageIcon是专为图标场景设计的组件，会自动继承导航栏的颜色配置。

解决方案 #

方法一：用ImageIcon包裹SVG资源（推荐） #

借助flutter_svg_provider或flutter_svg提供的SVG支持，将SVG作为ImageIcon的数据源，让它自动适配导航栏的选中/未选中颜色：

BottomNavigationBarItem(
  icon: ImageIcon(
    Svg("lib/assets/images/icons/home.svg"), // 使用flutter_svg_provider的Svg
    size: screenWidth * 0.1,
  ),
  label: 'Home',
)

这个方案和你第二个PNG图标的实现逻辑完全一致，能保证颜色行为统一。

方法二：手动根据选中状态设置SVG颜色 #

如果更倾向于直接使用SvgPicture，可以通过colorFilter根据当前选中状态切换颜色（需要使用flutter_svg的SvgPicture.asset）：

BottomNavigationBarItem(
  icon: SvgPicture.asset(
    "lib/assets/images/icons/home.svg",
    height: screenWidth * 0.1,
    width: screenWidth * 0.1,
    colorFilter: ColorFilter.mode(
      _selectedIndex == 0 ? const Color(0xFFF24949) : Colors.white,
      BlendMode.srcIn,
    ),
  ),
  label: 'Home',
)

注意：此方案要求你的SVG是单色的，否则colorFilter会改变所有颜色，可能不符合预期。

额外说明 #

• 避免直接用Image组件加载SVG作为导航栏图标，它无法感知导航栏的选中状态，也就无法自动切换颜色。
• 确保你使用的SVG资源路径正确，且相关包（flutter_svg/flutter_svg_provider）已在pubspec.yaml中正确配置并执行了flutter pub get。

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