小菜在学习过程中通常会需要大量的小图标，而多数的 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 文件库；声明方式与字体库等一致，注意 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 声明格式；
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 进行版本更新或回退后验证；
小菜此次仅是对于日常资源库和命令行的简单应用，熟能生巧，仅限于日常积累；如有错误，请多多指导！
来源： 阿策小和尚
网友评论