Flutter项目中ImageIcon加载AssetImage资源无法正常显示问题求助

问题根因 #

ImageIcon 组件的设计逻辑是仅提取图片的透明度通道，所有非透明区域会统一渲染为指定的color属性值，未手动设置color时会默认继承当前主题的IconTheme默认颜色，因此你的彩色原图会被覆盖为单色图标，这就是显示效果不符合预期的核心原因。

解决方案 #

场景1：需要保留图标原本的彩色效果 #

直接替换ImageIcon组件为Image.asset即可，修改后的代码示例：

Card(
  color: colorPalette.cultured,
  child: Padding(
    padding: const EdgeInsets.all(20.0),
    child: Row(
      children: <Widget>[
        Text(label,style: TextStyle(fontWeight: FontWeight.w600,fontSize: 15.0,fontFamily: 'Poppins'),),
        Spacer(),
        Image.asset(
          'assets/icons/call.png',
          // 按需调整图标大小
          width: 24,
          height: 24,
        ),
      ],
    ),
  ),
);

场景2：需要使用ImageIcon的单色适配能力 #

手动指定color和size参数调整显示效果即可：

ImageIcon(
  AssetImage('assets/icons/call.png'),
  // 替换为你需要的图标颜色
  color: Colors.green,
  size: 24,
)

补充排查项 #

如果修改后仍加载异常，可执行以下操作验证：

• 确认资源路径拼写完全匹配，注意Flutter的资源路径对大小写敏感
• 执行flutter clean清理构建缓存后重新编译项目

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