Flutter 125: 图解自传 ACE_ICON.ttf 图标库
2023-02-26 10:20:56 时间
小菜在学习过程中通常会需要大量的小图标,而多数的 Icon 都是经过设计同学优化过的,而如何采用类似系统 Icons 方式,此时可以通过自传类似字体库的 ttf 图标库的方式来完成;
ACE_ICON
小菜推荐两个网站可以用来生成图标库;
(福利推荐:阿里云、腾讯云、华为云服务器最新限时优惠活动,云服务器1核2G仅88元/年、2核4G仅698元/3年,点击这里立即抢购>>>)
1. 生成 ACE_ICON.ttf 图标库
小菜以 https://www.fluttericon.com/ 为例来生成图标库;在这个图标库中有很多成套的图标,在这里可以选中需要的图标,也可以将本地生成的 .svg 文件拖拽进库中;
其中设置完图标库名称后,通过工具选择下载不同的文件,包括 ttf 图标库、config 配置文件以及 mapping 映射文件;
2. 集成 ttf 图标库
- 将 ACE_ICON.ttf 库文件添加到 project 资源文件中;
- 在 pubspec.yaml 文件中声明 ACE_ICON.tt 文件库;声明方式与字体库等一致,注意 family 与 font 名称一致;在此可以声明引入多个资源库文件;之后 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 声明格式;
ACE_ICON.ttf 案例源码
小菜此次仅是对于日常资源库和命令行的简单应用,熟能生巧,仅限于日常积累;如有错误,请多多指导!
来源: 阿策小和尚
你还在原价购买阿里云、腾讯云、华为云、天翼云产品?那就亏大啦!现在申请成为四大品牌云厂商VIP用户,可以3折优惠价购买云服务器等云产品,并且可享四大云服务商产品终身VIP优惠价,还等什么?赶紧点击下面对应链接免费申请VIP客户吧:
相关文章
- Kyligence:智能管理,让数据价值最大化
- 学习 Git,看这一篇就够了!
- 如何使用备用端口连接 ssh
- 在云中实施大数据的详情分析
- 2022年实时数据管理趋势
- Linux 中关于 ps 命令的一些常用例子
- 如何用享元模式优化系统内存?
- tee 命令是个啥?我们通过例子来看一下
- 如何将一个 Linux 命令转至后台运行?
- 如何在 Ubuntu 等 Linux 中安装 Python 3.11
- 如何让定时器在页面最小化的时候不执行?
- 2022年数据管理市场的发展趋势
- 深入理解Linux进程管理
- 企业需要不断推进数据战略
- 建议收藏!大数据分析如何帮助企业成长
- 微软开始测试 Windows 11/10 Edge 浏览器专用触摸模式
- 苹果 Safari 浏览器技术预览版 157 发布:兼容 macOS 13 Ventura,修复 Bug 并改进性能
- 全新升级的鸿蒙开发套件,你想知道的都在这里
- 将大数据转化为营销收入的四个技巧
- 低代码并不意味着低风险