在Flutter中使用自定义Icon

1. 前言

Flutter做为时下最流行的技术之一，凭借其出色的性能以及抹平多端的差别优点，早已引发大批技术爱好者的关注，甚至一些闲鱼，美团，腾讯等大公司均已投入生产使用。虽然目前其生态尚未彻底成熟，但身靠背后的Google加持，其发展速度已经足够惊人，能够预见未来对Flutter开发人员的需求也会随之增加。

不管是为了如今的技术尝鲜仍是未来的潮流趋势，都9102年了，做为一个前端开发者，彷佛没有理由不去尝试它。正是带着这样的心理，笔者也开始学习Flutter，同时建了一个用于练习的仓库，后续全部代码都会托管在上面，欢迎star，一块儿学习。这是我写的Flutter系列文章：

• 用Flutter构建漂亮的UI界面 - 基础组件篇
• Flutter滚动型容器组件 - ListView篇
• Flutter网格型布局 - GridView篇
• 在Flutter中使用自定义Icon

今天要分享的内容其实很是简单，咱们都知道Flutter内置了一套Material Design风格的Icon图标，但对于一个成熟的App而言，一般状况下仍是远远不够的。为此，咱们须要在项目中引入自定义的Icon图标。

本文就将以Ant Design图标库为例，介绍如何在Flutter中引入自定义图标。

2. 准备工做：字体文件

正所谓“巧妇难为无米之炊”，要想引入自定义图标，首先咱们得准备好图标字体文件（.ttf后缀）。对于大公司而言，找视觉同窗切就能够了。但若是是本身作的业余项目或者没有资源的时候，咱们能够上阿里巴巴矢量图标库pick本身心仪的图标。

这里就以Ant Design官方图标库为例（一共有600个图标），经过如下操做，咱们将图标字体文件加入到项目中：

添加购物车 --> 点击购物车 --> 下载代码 --> 解压 --> 拷贝至项目（可重命名）

3. 声明自定义字体

仅仅将字体文件复制到项目中还不够，咱们须要经过声明的方式来告诉Flutter有新字体可用。打开项目根目录下的pubspec.yaml文件，找到fonts这一段：

To add custom fonts to your application, add a fonts section here, in this "flutter" section. Each entry in this list should have a "family" key with the font family name, and a "fonts" key with a list giving the asset and other descriptors for the font.

注释就是让咱们在该段文字下方添加自定义字体的声明，结合其注释掉的例子和当前的项目目录，咱们能够这样配置：

项目工程目录结构
.
├── README.md
├── android
│   └── app
├── assets
│   └── fonts
│       └── AntdIcons.ttf
├── flutter_training_app.iml
├── ios
│   └── Flutter
├── lib
│   └── main.dart
├── pubspec.lock
└── pubspec.yaml

字体声明
fonts:
  - family: AntdIcons
    fonts:
      - asset: assets/fonts/AntdIcons.ttf

注意： 配置完以后，必定要执行flutter packages get命令以及从新编译项目，不然字体文件没法使用。

4. 编写自定义的IconData

其实到目前为止，咱们已经可使用刚刚下载的图标了，就像下面代码这样：

Icon(
  IconData(0xe77d, fontFamily: 'AntdIcons'),
  size: 20,
  color: Colors.black
)

其中fontFamily的值'AntdIcons'就是咱们刚才声明的新字体，可是代码中的0xe77d数值是哪来的呢？再次打开以前下载解压以后的文件夹，其中有一个demo_index.html文件，在浏览器中打开它咱们能够看到下面的画面：

在Unicode这个Tab下，咱们能够看到它贴心地给出了全部图标的Type和Unicode码对照关系。因此理论上来讲，咱们想用哪一个图标，只要copy其Unicode码到代码中就能够了。

不过，这种作法显然不是很友好。首先，咱们每次使用Icon以前都要从这张关系表中查找；其次，你肯定下次代码中看到这串数字是对应什么图标吗（更不用说其余人了）？因此，咱们须要更优雅的方法来管理自定义图标。

其实作法也简单，咱们能够建立一个自定义图标的类：

class AntdIcons {
  static const IconData checkCircle = IconData(0xe77d, fontFamily: 'AntdIcons');
  static const IconData CI = IconData(0xe77e, fontFamily: 'AntdIcons');
  static const IconData Dollar = IconData(0xe77f, fontFamily: 'AntdIcons');
  ...
}

而后使用方法就变成了：

Icon(
  AntdIcons.checkCircle,
  size: 20,
  color: Colors.black
)

以上代码彻底等同于前面直接使用Unicode码的效果。不过要想用上全部的图标，咱们还得丰富AntdIcons这个类。为此，能够写上一段小脚本，在demo_index.html浏览器窗口的控制台中运行就能获得定义IconData的代码：

function camelCase(str) {
  return str.replace(/[ -]+(\w)/g, (match, char) => char.toUpperCase());
}

function makeCode({name, code}) {
  return `static const IconData ${camelCase(name)} = IconData(0${code.substr(2, 5)}, fontFamily: 'antd-icons');\n`;
}

Array
  .from(document.querySelectorAll('.unicode .dib'))
  .map(element => {
    return {
      name: element.querySelector('.name').innerText,
      code: element.querySelector('.code-name').innerText
    };
  })
  .map(makeCode)
  .join('\n');

PS：输出结果中可能因为图标做者本身命名不规范而致使个别的小错误，手动修改便可，完整文件能够看这里。

接下来，就是愉快玩耍的时候啦~~~

5. 总结

本文经过一个实际的Ant Design图标例子，详细地介绍了如何在Flutter中引入自定义图标，但愿能够帮助到你哦~

本文全部代码托管在这儿，也能够关注个人Blog，欢迎一块儿学习~