Flutter中如何通过code_point设置MaterialIcons图标？

背景 #

从Supabase的markers_info表中动态加载地图标记图标（包含图标code_point和颜色），表结构如下：

表结构（markers_info） #

已成功实现图标颜色加载，但动态加载图标时遇到问题，当前代码片段如下：

for (int i = 0; i < minLength; i++) {
  final type = types[i];
  final markerIcon = typeData[type]?['icon_code'] != null
      ? IconData(typeData[type]['icon_code'], fontFamily: 'MaterialIcons')
      : Icons.place;
  final markerColor = typeData[type]?['color'] != null
      ? Color(int.parse('0xff' + typeData[type]['color'].substring(1)))
      : Colors.red;
}

问题原因 #

IconData构造函数的第一个参数需要整数类型的Unicode码点，但代码中直接传入了字符串格式的十六进制icon_code（比如"e84f"），导致无法正确解析图标。此外，如果使用的是Material Symbols Outlined系列图标，需要匹配对应的字体族，而非默认的MaterialIcons。

修复方案 #

修正后的代码 #

for (int i = 0; i < minLength; i++) {
  final type = types[i];
  final iconCodeStr = typeData[type]?['icon_code'];
  final markerIcon = iconCodeStr != null
      ? IconData(
          // 将十六进制字符串转为整数码点
          int.parse(iconCodeStr, radix: 16),
          // 根据图标系列选择字体族：MaterialIcons 或 MaterialSymbolsOutlined
          fontFamily: 'MaterialSymbolsOutlined',
          // 若使用Material Symbols，需引入对应依赖后添加此行
          fontPackage: 'material_symbols_icons',
        )
      : Icons.place;
  // 注意表中字段是color_hex，对应代码中字段名修正
  final markerColor = typeData[type]?['color_hex'] != null
      ? Color(int.parse('0xff' + typeData[type]['color_hex'].substring(1)))
      : Colors.red;
}

额外配置说明 #

如果使用Material Symbols Outlined系列图标：

1. 在pubspec.yaml中添加依赖：

   dependencies:
     material_symbols_icons: ^latest_version
   

2. 确保markers_info表中存储的icon_code是正确的十六进制码点（不带0x前缀），比如城堡图标对应的eab1。

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