Trying to dynamically set the Icon based on a JSON

问题:

I have a client config that is on a server in JSON format.

example JSON would be like { "icon" : "facebook" }

I have the widget below.

    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;
    }
  }
}

Is there a way to not have to write 500 switch statements for 500 font awesome icons? the format is

FontAwesomeIcons.facebook where my string value "facebook" would append on the end of FontAwesomeIcons. I am looking for a way to just write whatever I want in the string and it return the correct icon widget.

回答1:

There are two ways you can eliminate some of your code duplication.

1. By taking the switch out and moving it into it's own function so your build method has no duplication in it.

Switch statement

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

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

        default: {
          return FontAwesomeIcons.home;
        }
      }
    }

Build Function

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

or 2. Create a Map

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

Build Function

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