Flutter String to Icon value

问题

how to convert String value to Icons value in Flutter, i'm getting Icon value from json as a String.

I got following error when i'm tried to Use that value

error: The argument type 'String' can't be assigned to the parameter type 'IconData'. (argument_type_not_assignable at [hippo] lib\screens\dynamic_list.dart:71)

{
  "page": 1,
  "MenuItems": [
    {
      "id": 419701,
      "icon": "MdiIcons.account",
      "name": "account"
    },
    {
      "id": 419702,
      "icon": "MdiIcons.currencyUsd",
      "name": "Funds"
    },
    {
      "id": 419703,
      "icon": "MdiIcons.home",
      "name": "home"
    }
  ]
}

回答1:

one way is that you can generate images to font icon (Generate to font). save ttf file in assets. pass unicode data to json (like "e90a").

for example:

Icon(IconData(int.parse('0x${e90a}',
    fontFamily: 'family name given in the link above'));

回答2:

{
  "page": 1,
  "MenuItems": [
    {
      "id": 419701,
      "icon": "0xf2dc",
      "name": "account"
    },
    {
      "id": 419702,
      "icon": "0xf2dc",
      "name": "Funds"
    },
    {
      "id": 419703,
      "icon": "0xf2dc",
      "name": "home"
    }
  ]
}

Icon(IconData(int.parse(_dynamicListMenu[index].icon),
              fontFamily:'Material Design Icons',
              fontPackage:'material_design_icons_flutter'),color: Colors.white, size: 30)

回答3:

use flutter_remote_icon

var remoteIconData = new RemoteIconData("material://Icons.add"); // -> native material icons remotely (dynamically)  

return RemoteIcon(icon: remoteIconData);

https://github.com/softmarshmallow/remote-ui/tree/master/flutter/packages/flutter_remote_icon

https://pub.dev/packages/flutter_remote_icon

回答4:

I create a simple class for that.

import 'package:flutter/material.dart';

class HelperIcons {

  static Map<String, int> materialIcons = <String, int> {
    'ten_k': 0xe52a,
    'ten_mp': 0xe52b,
    'eleven_mp': 0xe52c,
    'twelve_mp': 0xe52d,
    'thirteen_mp': 0xe52e,
    'fourteen_mp': 0xe52f,
    'fifteen_mp': 0xe530,
    'sixteen_mp': 0xe531,
    'seventeen_mp': 0xe532,
    'eighteen_mp': 0xe533,
    'nineteen_mp': 0xe534,
    'one_k': 0xe535,
    'one_k_plus': 0xe536,
    'twenty_mp': 0xe537,
    'twenty_one_mp': 0xe538,
    'twenty_two_mp': 0xe539,
    'twenty_three_mp': 0xe53a,
    'twenty_four_mp': 0xe53b,
    'two_k': 0xe53c,
    'two_k_plus': 0xe53d,
  };

  static Map<String, int> materialIconsWithDirection = <String, int> {
    'arrow_back': 0xe5a7,
    'arrow_back_ios': 0xe5a8,
    'arrow_forward': 0xe5af,
    'arrow_forward_ios': 0xe5b0,
    'arrow_left': 0xe5b1,
    'arrow_right': 0xe5b2,
    'assignment': 0xe5b9,
    'assignment_return': 0xe5bc,
    'backspace': 0xe5d6,
    'battery_unknown': 0xe5e3,
    'call_made': 0xe627,
    'call_merge': 0xe628,
    'call_missed': 0xe629,
    'call_missed_outgoing': 0xe62a,
    'call_received': 0xe62b,
    'call_split': 0xe62c,
    'chevron_left': 0xe652,
    'chevron_right': 0xe653,
  };

  static IconData getIconData(String iconName) {
    iconName = iconName is String ? iconName.toLowerCase().trim() : null;

    if (iconName == null || iconName.isEmpty) {
      return null;
    }

    if (materialIcons.containsKey(iconName)) {
      return IconData(materialIcons[iconName], fontFamily: 'MaterialIcons');
    }

    if (materialIconsWithDirection.containsKey(iconName)) {
      return IconData(
          materialIconsWithDirection[iconName],
          fontFamily: 'MaterialIcons',
          matchTextDirection: true
      );
    }

    return null;
  }

  static bool isExistIcon(String iconName) {
    iconName = iconName is String ? iconName.toLowerCase().trim() : null;

    if (iconName == null || iconName.isEmpty) {
      return false;
    }

    if (materialIcons.containsKey(iconName) || materialIconsWithDirection.containsKey(iconName)) {
      return true;
    }

    return false;
  }
}

Usage :

if (HelperIcons.isExistIcon(iconString)) {
  Icon(HelperIcons.getIconData(iconString))
}

I can't put all the class code here. because this post limited to 30k characters.

回答5:

You can do it by using Icon class constants.

Icon(IconData(61668, fontFamily: 'MaterialIcons'));

Check more Icon class constants: https://api.flutter.dev/flutter/material/Icons-class.html#constants

来源：https://stackoverflow.com/questions/59854088/flutter-string-to-icon-value

标签

Flutter