Flutter 中的动态图标答案

【问题标题】：Dynamic Icons in FlutterFlutter 中的动态图标
【发布时间】：2019-09-10 10:47:29
【问题描述】：

我从数据库中检索一些数据，其中有一个名为“icon”的列，其中存储了一些字符串。对于每一个，我想传入Flutter的Icon类，给对应的Icon充电。我里面有一个字符串

items[index]["icon"]

但是我不能在Icon(items[index]["icon"])里面传递它我该怎么办？

【问题讨论】：

什么是items？
包含所有数据库行的列表
你能说明你是如何声明它的吗？它是什么类型的？
Icon 构造函数需要IconData 类型的参数，而不是String。据我所知，Icon 类没有内置的String 参数构造函数。您必须手动编写items[index]["icon"] 和IconData 之间的映射，然后将IconData 作为参数传递给Icon。

标签： database flutter icons

【解决方案1】：

您可以通过直接使用 Text() 小部件访问 Material Icons 字体来直接使用图标及其文字名称。

例子：

Text(
    'perm_contact_calendar',
    style: TextStyle(fontFamily: 'MaterialIcons'),
);

您可以将它用于自定义 Icon 类以与 Material Framework 顺利集成，但在这种情况下，您将需要一个 --no-tree-shake-icons 标志用于构建命令，因为非常量 IconData 构造函数会破坏图标树抖动。

【讨论】：

这应该被认为是正确的答案，因为当你更新 Flutter 时，图标代码会发生变化和中断！在 Thepeanut 的评论中，Tom 已经提到了这一点，但您的回答应该有更多的知名度！
如果有人感兴趣，我创建了a whole article，我在其中描述了图标小部件的工作原理。最后，我提供了上述动态图标自定义类的代码。

【解决方案2】：

这可能对将来的某人有所帮助。

您不需要使用任何地图从动态名称创建图标（过多的复制粘贴）。您可以使用来自Icons Class 的图标的数字标识符来代替图标名称。

例子：

int iconCode = 58840;

// Will display "Up arrow" icon from the list
Icon(IconData(iconCode, fontFamily: 'MaterialIcons'));

【讨论】：

我强烈建议不要这样做。 materialIcons 的代码点最近发生了变化，导致我们的数据无效。我提出了一个问题并被退回，即不能依赖代码点来保持一致。

【解决方案3】：

您需要从字符串到图标的映射，无论是 Icons 还是 FontAwesomeIcons 或 ...

Map<String, IconData> iconMapping = {
  'facebook' : FontAwesomeIcons.facebook,
  'twitter' : FontAwesomeIcons.twitter,
  'home' : FontAwesomeIcons.home,
  'audiotrack' : Icons.audiotrack,
};

@override
Widget build(BuildContext context) {
  return Icon(iconMapping [icon], color: HexColor(color));
}

类似问答
Trying to dynamically set the Icon based on a JSON string value
Flutter: Show different icons based on value

【讨论】：

【解决方案4】：

试试这个。这正是您正在寻找的东西。

Widget buildRemoteIcon(){
  // var remoteIconData = new RemoteIconData(Icons.add); // -> flutter native material icons
  // var remoteIconData = new RemoteIconData("material://Icons.add"); // -> native material icons remotely (dynamically)  
  // var remoteIconData = new RemoteIconData("https://example.com/svg.svg");  // -> loading remote svg
  // var remoteIconData = new RemoteIconData("assets/icons/add.png"); // -> loading local assets 
  // var remoteIconData = new RemoteIconData("custom-namespace://CustomIcons.icon_name"); // -> (requires pre-usage definition)
  var remoteIconData = new RemoteIconData();
  return RemoteIcon(icon: remoteIconData, color: Colors.black);
}

https://github.com/bridgedxyz/dynamic/tree/master/flutter-packages/x_icon

https://pub.dev/packages/x_icon

【讨论】：