Блог

У меня есть конфигурация клиента, которая находится на сервере в формате 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 инструкций switch для 500 значков font awesome? формат является

FontAwesomeIcons.facebook где мое строковое значение facebook будет добавляться в конце FontAwesomeIcons. Я ищу способ просто написать все, что я хочу, в строке, и это вернет правильный виджет значка.

Есть два способа, которыми вы можете устранить некоторые дублирования вашего кода.

1. Извлекая переключатель и перемещая его в свою собственную функцию, чтобы в вашем методе сборки не было дублирования.

Оператор Switch

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

или 2. Создайте карту

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

Функция сборки

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

Для достижения этого просто следуйте приведенным ниже шагам.

1. Загрузите пакет [icons_helper]: https://pub.dev/packages/icons_helper из пакетов flutter

2. Просто добавьте приведенный ниже код везде, где вы хотите динамический значок, используя JSON.

   a) Значок FontAwesome: getIconGuessFavorFA (имя: «ICON_NAME»)

   б) Значок материала: получите пользовательский материал (имя: «ICON_NAME»)

Пример:

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

Примечание: Если вы столкнулись с какой-либо ошибкой при выполнении like (‘Ошибка: средство получения не найдено: ‘haykal’.’). Просто прокомментируйте значок в ‘icons_helper.dart’

Я использовал пакет reflectable и смог нормально отразить существующие модули. Вот примеры для цветов и констант значков.

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

Используйте этот пакет

      awesome_icons: ^1.1.0

     import 'package:awesome_icons/awesome_icons.dart';

      Icon(
        fontAwesomeIcons['Icon_name'],
        size: 24.0,
      ),