Flutter 125: 图解自传 ACE_ICON.ttf 图标库

    小菜在学习过程中通常会需要大量的小图标,而多数的 Icon 都是经过设计同学优化过的,而如何采用类似系统 Icons 方式,此时可以通过自传类似字体库的 ttf 图标库的方式来完成;

ACE_ICON

    小菜推荐两个网站可以用来生成图标库;

1. 生成 ACE_ICON.ttf 图标库

    小菜以 https://www.fluttericon.com/ 为例来生成图标库;在这个图标库中有很多成套的图标,在这里可以选中需要的图标,也可以将本地生成的 .svg 文件拖拽进库中;

    其中设置完图标库名称后,通过工具选择下载不同的文件,包括 ttf 图标库、config 配置文件以及 mapping 映射文件;

2. 集成 ttf 图标库

  • ACE_ICON.ttf 库文件添加到 project 资源文件中;

  • pubspec.yaml 文件中声明 ACE_ICON.tt 文件库;声明方式与字体库等一致,注意 familyfont 名称一致;在此可以声明引入多个资源库文件;之后 pub get 即可;

fonts:
  - family: DancingScript
    fonts:
      - asset: assets/DancingScript-Regular.ttf
  - family: ACE_ICON
    fonts:
      - asset: images/ACE_ICON.ttf
  • mapping 文件添加到 project 中,用于映射 ACE_ICON 图标库中各 Icons 文件;
class ACE_ICON {
  ACE_ICON._();

  static const _kFontFam = 'ACE_ICON';
  static const String _kFontPkg = null;

  static const IconData emo_happy = IconData(0xe800, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_wink = IconData(0xe801, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_unhappy = IconData(0xe802, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_sleep = IconData(0xe803, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_thumbsup = IconData(0xe804, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_devil = IconData(0xe805, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_surprised = IconData(0xe806, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_tongue = IconData(0xe807, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_coffee = IconData(0xe808, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_sunglasses = IconData(0xe809, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_displeased = IconData(0xe80a, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_beer = IconData(0xe80b, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_grin = IconData(0xe80c, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_angry = IconData(0xe80d, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_saint = IconData(0xe80e, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_cry = IconData(0xe80f, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_shoot = IconData(0xe810, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_squint = IconData(0xe811, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_laugh = IconData(0xe812, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_wink2 = IconData(0xe813, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData book_story = IconData(0xe814, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData book_type = IconData(0xe815, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData book_user = IconData(0xe816, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData crown = IconData(0xe844, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData crown_plus = IconData(0xe845, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData crown_minus = IconData(0xe846, fontFamily: _kFontFam, fontPackage: _kFontPkg);
}

3. 图标库 IconData

    集成之后,使用方式与默认的 Icon 一致,直接获取 IconData 即可,对于 Icon 的颜色尺寸等其他绘制也不会有影响;

List aceIconData = [
  ACE_ICON.book_story, ACE_ICON.book_type, ACE_ICON.book_user, ACE_ICON.crown,
  ACE_ICON.crown_minus, ACE_ICON.crown_plus, ACE_ICON.emo_angry, ACE_ICON.emo_beer,
  ACE_ICON.emo_coffee, ACE_ICON.emo_cry, ACE_ICON.emo_devil, ACE_ICON.emo_displeased,
  ACE_ICON.emo_grin, ACE_ICON.emo_happy, ACE_ICON.emo_laugh, ACE_ICON.emo_saint,
  ACE_ICON.emo_shoot, ACE_ICON.emo_sleep, ACE_ICON.emo_squint, ACE_ICON.emo_sunglasses,
  ACE_ICON.emo_surprised, ACE_ICON.emo_thumbsup, ACE_ICON.emo_tongue, 
  ACE_ICON.emo_unhappy, ACE_ICON.emo_wink, ACE_ICON.emo_wink2
];

return SliverPadding(
    padding: const EdgeInsets.all(8.0),
    sliver: SliverGrid(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 6, mainAxisSpacing: 8.0, crossAxisSpacing: 8.0, childAspectRatio: 1.0),
        delegate: SliverChildBuilderDelegate(
            (context, index) => Container(
                decoration: BoxDecoration(color: Colors.grey.withOpacity(0.2), borderRadius: BorderRadius.circular(3.0)),
                child: Center(child: Icon(dataList[index], color: Colors.blue.withOpacity(0.6)))),
            childCount: dataList.length)));

4. 异常注意

    小菜在测试过程中,会显示如下图所示,Icon 资源展示不出来,其原因是小菜在 pubspec.yaml 文件声明时换行空格导致的,注意在引入所有资源库文件时,都应严格遵守 pubspec.yaml 声明格式;

Flutter 版本分支切换

    Flutter 一直在稳定快速的更新迭代,而为了项目的稳定性,以及一些三方插件的应用,我们可能不会直接升级到最新版本,此时就需要切换分支,回退固定版本;小菜简单整理一下常用的几个命令行;

1. flutter channel

    flutter channel 用于查看渠道,官方分为 stable、beta、dev、master 四种,小菜推荐是用 stable 稳定版;此时,小菜建议在操作命令行指令时先进入 flutter 目录中;

2. flutter channel X

    在获取官方的各个分支之后,通过 flutter channel stable 用于切换到 stable 或其他分支;

3. git tag

    git tag 用于查看 Flutter 各版本号;

4. git checkout (version)

    git checkout 1.17.4 用于切换固定 Flutter 版本分支;

5. git reset --hard (version)

    git reset --hard 1.17.4 用于指向对应版本分支;

6. flutter version (version)

    flutter version1.17.4 用于升级或回退到指定 Flutter 版本分支;

7. flutter --version

    flutter --version 用于查看当前使用的版本,可以通过 --version 进行版本更新或回退后验证;


    ACE_ICON.ttf 案例源码


    小菜此次仅是对于日常资源库和命令行的简单应用,熟能生巧,仅限于日常积累;如有错误,请多多指导!

来源: 阿策小和尚

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容