【Flutter 专题】125 图解自传 ACE_ICON.ttf 图标库
![【Flutter 专题】125 图解自传 ACE_ICON.ttf 图标库](https://static001.geekbang.org/infoq/89/89657a0d2341cfb87b4c063c7fc901e7.jpeg)
小菜在学习过程中通常会需要大量的小图标,而多数的 Icon 都是经过设计同学优化过的,而如何采用类似系统 Icons 方式,此时可以通过自传类似字体库的 ttf 图标库的方式来完成;
ACE_ICON
小菜推荐两个网站可以用来生成图标库;
1. 生成 ACE_ICON.ttf 图标库
小菜以 https://www.fluttericon.com/ 为例来生成图标库;在这个图标库中有很多成套的图标,在这里可以选中需要的图标,也可以将本地生成的 .svg 文件拖拽进库中;
![](https://static001.geekbang.org/infoq/88/8807090c9cbc92f0799ede5eb13bd589.png)
![](https://static001.geekbang.org/infoq/b7/b773660d9fe127bb249d98af7f429a91.png)
![](https://static001.geekbang.org/infoq/24/248044a3802906400dfa98ea351e7aee.png)
其中设置完图标库名称后,通过工具选择下载不同的文件,包括 ttf 图标库、config 配置文件以及 mapping 映射文件;
![](https://static001.geekbang.org/infoq/1e/1e9e3cfc63e706d0dcef3bcd1a8a191f.png)
![](https://static001.geekbang.org/infoq/79/79ee1984dff05d45f99d7d6fa75016eb.png)
2. 集成 ttf 图标库
将 ACE_ICON.ttf 库文件添加到 project 资源文件中;
![](https://static001.geekbang.org/infoq/e9/e938a8373a0d2eeaf4bd3eca69ff0f7b.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
在 pubspec.yaml 文件中声明 ACE_ICON.tt 文件库;声明方式与字体库等一致,注意 family 与 font 名称一致;在此可以声明引入多个资源库文件;之后 pub get 即可;
![](https://static001.geekbang.org/infoq/7d/7d58582e3699cc4f03e3daa2375ccac7.png)
将 mapping 文件添加到 project 中,用于映射 ACE_ICON 图标库中各 Icons 文件;
3. 图标库 IconData
集成之后,使用方式与默认的 Icon 一致,直接获取 IconData 即可,对于 Icon 的颜色尺寸等其他绘制也不会有影响;
![](https://static001.geekbang.org/infoq/82/821589b1afc25549b88152620c7b8996.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
4. 异常注意
小菜在测试过程中,会显示如下图所示,Icon 资源展示不出来,其原因是小菜在 pubspec.yaml 文件声明时换行空格导致的,注意在引入所有资源库文件时,都应严格遵守 pubspec.yaml 声明格式;
![](https://static001.geekbang.org/infoq/b7/b7516c2c7aa1c653dcf70275fa8a17b9.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
Flutter 版本分支切换
Flutter 一直在稳定快速的更新迭代,而为了项目的稳定性,以及一些三方插件的应用,我们可能不会直接升级到最新版本,此时就需要切换分支,回退固定版本;小菜简单整理一下常用的几个命令行;
1. flutter channel
flutter channel 用于查看渠道,官方分为 stable、beta、dev、master 四种,小菜推荐是用 stable 稳定版;此时,小菜建议在操作命令行指令时先进入 flutter 目录中;
![](https://static001.geekbang.org/infoq/f0/f089e0ff2f7d9149feb043f54c2b9875.png)
2. flutter channel X
在获取官方的各个分支之后,通过 flutter channel stable 用于切换到 stable 或其他分支;
![](https://static001.geekbang.org/infoq/83/83f04c4aada9be870ad3f2ecd15cea18.png)
3. git tag
git tag 用于查看 Flutter 各版本号;
![](https://static001.geekbang.org/infoq/00/0003d91e308a32213228f3f7160e6b70.png)
4. git checkout (version)
git checkout 1.17.4 用于切换固定 Flutter 版本分支;
![](https://static001.geekbang.org/infoq/12/126d65e9cccffd62de81da1f97e8d3b8.png)
5. git reset --hard (version)
git reset --hard 1.17.4 用于指向对应版本分支;
![](https://static001.geekbang.org/infoq/0c/0cb8f8fb7686306181c8816c5857bd3d.png)
6. flutter version (version)
flutter version1.17.4 用于升级或回退到指定 Flutter 版本分支;
![](https://static001.geekbang.org/infoq/4b/4bf56dd892a5303ded5ce55ca889a44f.png)
7. flutter --version
flutter --version 用于查看当前使用的版本,可以通过 --version 进行版本更新或回退后验证;
![](https://static001.geekbang.org/infoq/60/60bb99f97251ddd19fd46ce02df2860f.png)
小菜此次仅是对于日常资源库和命令行的简单应用,熟能生巧,仅限于日常积累;如有错误,请多多指导!
来源: 阿策小和尚
版权声明: 本文为 InfoQ 作者【阿策小和尚】的原创文章。
原文链接:【http://xie.infoq.cn/article/4410c3101b6aaf6a651860759】。文章转载请联系作者。
评论