Dart 尝试基于JSON字符串值动态设置图标

我在服务器上有一个JSON格式的客户端配置

示例JSON类似于{“icon”：“facebook”}

我有下面的小部件

    class MySocialIcons extends StatelessWidget {

    MySocialIcons({this.icon, this.color});

    final String icon;
    final String color;

    @override
    Widget build(BuildContext context) {

    switch(icon) {
      case 'facebook': {
        return Icon(FontAwesomeIcons.facebook, color: HexColor(color));
      }
      break;

      case 'twitter': {
        return Icon(FontAwesomeIcons.twitter, color: HexColor(color));
      }
      break;

      default: {
        return Icon(FontAwesomeIcons.home, color: HexColor(color));
      }
      break;
    }
  }
}

有没有一种方法不必为500个字体很棒的图标编写500个switch语句？格式是

---

FontAwesomeIcons.facebook

其中我的字符串值“facebook”将附加在FontAwesomeIcons的末尾。我正在寻找一种方法，只要在字符串中写入我想要的内容，它就会返回正确的图标小部件。

有两种方法可以消除一些代码重复

通过将开关取出并将其移动到自己的函数中，这样您的构建方法就不会重复 开关语句

 IconData getIconForName(String iconName) {
      switch(iconName) {
        case 'facebook': {
        return FontAwesomeIcons.facebook;
        }
        break;

        case 'twitter': {
          return FontAwesomeIcons.twitter;
        }
        break;

        default: {
          return FontAwesomeIcons.home;
        }
      }
    }

构建功能

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

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

或2创建地图

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

---

只需遵循以下步骤即可实现

从flatter包下载包[icons\u helper]：

只要在需要使用JSON的动态图标的地方添加以下代码即可

a） FontAwesome图标：getIconGuessFavorFA（名称：“图标名称”）

b） 材质图标：getIconGuessFavorMaterial（名称：“图标名称”）

例如：

ExpansionTile(
  leading:  Icon(getIconGuessFavorMaterial(name:root.menuIcon)),  //Icon(FontAwesomeIcons.dashcube),            
  key: PageStorageKey<MobileMenuList>(root),
  title: Text(root.menuName),
  children: root.children.map(_buildTiles).toList(),
)

扩展文件( 前导：Icon（getIconGuessFavorMaterial（名称：root.menuIcon）），//Icon（FontAwesomeIcons.dashcube）， 密钥：PageStorageKey（根）， 标题：文本（root.menuName）， children:root.children.map（_buildTiles.toList（）， )

---

注意：如果您在遵从命令时遇到任何错误，比如（'error:Getter not found:'haykal'。）。只需对“icons\u helper.dart”中的图标发表评论

我使用了可反射的软件包，能够很好地反映现有模块。 下面是颜色和图标常量的示例

import 'package:flutter/material.dart';


@GlobalQuantifyCapability(r"Icons",constReflector)
@GlobalQuantifyCapability(r"Colors",constReflector)
import 'package:reflectable/reflectable.dart';
import 'adaptive_icons.reflectable.dart'; // Import generated code.


class ConstReflector extends Reflectable {
  const ConstReflector()
      : super(declarationsCapability,staticInvokeCapability);
}

const constReflector = ConstReflector();

dynamic colorFromName(String name) {
  ClassMirror m =  constReflector.reflectType(Colors);
  return m.invokeGetter(name);
}

dynamic iconFromName(String name) {
  ClassMirror m =  constReflector.reflectType(Icons);
  return m.invokeGetter(name);
}

---

这里有一个很好的反射用例。然而，这在颤振中是不可能的。不过有一个名为“Reflectable”的包，它可以生成代码（？）。也许这是值得研究的。我将接受你的答案，因为它确实回答了我的问题，而且比我要做的代码更好，但我最终只使用了图标的整数值，并将我的JSON文件从基于字符串的名称转换为基于int的图标值，因为转换13个图标比在一个地图中支持500个字符串要少，这是一个不错的选择。对于长期维护也更好。这应该是一种更好的方法。这样，每个图标就有一个外壳。对于这三个人来说没关系。但我有一张50人的名单