Flutter图标管理插件icons_helper的使用

简介

icons_helper 是一个用于在运行时动态访问图标集合的包。它支持完整的 Material Design 图标和 Font Awesome 图标（目前为 Font Awesome 5.9）。当特定图标在编译时未知时，此包可以提供帮助。然而，这意味着对 Material Design 和 Font Awesome 图标的树摇优化（Tree Shaking）完全绕过，所以在使用该库之前请知晓这一点。

我们的应用场景可能包括从后端获取图标名称，因此无需每次指定新图标时重新发布应用。这种便利性允许我们通过推送通知或记录发送新的文本字符串来动态更新图标。

这是一个方便的工具包，提供了对 Material Design 图标和 Font Awesome 图标的方括号表示法访问（通过 @brianegan 的 font_awesome_flutter 包实现）。目前，我仅静态生成了映射表，将字符串名称映射到成员名称。这意味着新增的图标不会自动被发现。可以通过代码生成和镜像在非 Flutter Dart 应用中实现这一功能，然后输出和维护它们。但我选择了更快的方式，即手动维护一个 Google 表格并复制粘贴数据。该表格可以在以下链接找到： https://docs.google.com/spreadsheets/d/1IpWJytpkrJI9_9hwPKY5oXJLRLGjQuG3pUP7eUIqHn4/edit?usp=sharing

虽然我曾尝试编写此类工具，但由于时间成本较高，最终放弃了。如果有兴趣改进，请提交 PR，我会接受所有有助于提升此库质量的贡献。

此包最初是为了解决 https://github.com/flutter/flutter/issues/16189 而创建的。

感谢与贡献

感谢 Dennis Bappert (@dennisbappert) 和 S McDowall (@sjmcdowall)，他们公开分享了他们的更改，并以开源精神推动了项目的进步。此外，Hussein Abdallah (@HeyHeyNotYouYou) 也对库进行了修改并将其重命名为自己的版本，但他的行为违反了 Apache 2 许可证，这种行为对开源软件的发展有害。

使用方法

以下是您可以考虑使用的几种方法：

getIconUsingPrefix(name: “PREFIX.ICON_NAME”)

• 如果 PREFIX 是 “fa” 或 “fontawesome”，则会在 Font Awesome 图标中首先解析 ICON_NAME。
• 如果未找到，则会尝试 Material Design 图标。
• 如果没有 PREFIX.ICON_NAME，则会优先尝试 Material Design 图标，然后再尝试 Font Awesome。

getIconGuessFavorFA(name: “ICON_NAME”)

• 如果 Font Awesome 中存在名为 ICON_NAME 的图标，则返回该图标。
• 否则，尝试 Material Design 图标。

getIconGuessFavorMaterial(name: “ICON_NAME”)

• 如果 Material Design 中存在名为 ICON_NAME 的图标，则返回该图标。
• 否则，尝试 Font Awesome 图标。

所有方法在图标不存在时都会返回 null。

这是一个快速且粗糙的库，有许多改进的空间。如果您希望修复或贡献，请提交 PR！

完整示例代码

以下是一个完整的示例代码，展示如何使用 icons_helper 插件：

import 'package:flutter/material.dart';
import 'package:icons_helper/icons_helper.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo + Icon Helper Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 尝试加载 Font Awesome 图标 "fiveHundredPx"，如果失败则尝试 Material Design 图标
            Icon(
              getIconUsingPrefix(name: 'fa.fiveHundredPx'),
              color: Theme.of(context).backgroundColor,
              size: 128.0,
            ),
            Text(
              'There should be an icon above. It\'s neat, isn\'t?\n\nYou can also push the + button and increment this counter for fun:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

代码说明

1. 导入必要的包：

   import 'package:flutter/material.dart';
   import 'package:icons_helper/icons_helper.dart';
   

2. 定义主应用：

   void main() => runApp(MyApp());
   

3. 定义主页面结构：

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(primarySwatch: Colors.blue),
         home: MyHomePage(title: 'Flutter Demo + Icon Helper Demo Home Page'),
       );
     }
   }
   

4. 定义状态管理类：

   class MyHomePage extends StatefulWidget {
     MyHomePage({Key key, this.title}) : super(key: key);
     final String title;
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   

5. 状态类实现：

   class _MyHomePageState extends State<MyHomePage> {
     int _counter = 0;
   
     void _incrementCounter() {
       setState(() {
         _counter++;
       });
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: Text(widget.title)),
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
               Icon(
                 getIconUsingPrefix(name: 'fa.fiveHundredPx'),
                 color: Theme.of(context).backgroundColor,
                 size: 128.0,
               ),
               Text('There should be an icon above. It\'s neat, isn\'t?\n\nYou can also push the + button and increment this counter for fun:'),
               Text('$_counter', style: Theme.of(context).textTheme.display1),
             ],
           ),
         ),
         floatingActionButton: FloatingActionButton(
           onPressed: _incrementCounter,
           tooltip: 'Increment',
           child: Icon(Icons.add),
         ),
       );
     }
   }