toly 命令行工具 | Flutter 图标字体代码生成器

上一篇 《Flutter 知识集锦 | Dart 开发命令行工具》 介绍了,如何通过 Dart 开发一个命令行脚本工具。本篇将结合一个具体的场景,介绍一下它的使用。toly 命令行工具目前已经开源并上传到 pub :

github 地址: github.com/toly1994328...

pub 地址: pub.dev/packages/to...

安装 toly 工具的命令:

dart pub global activate toly

bilibli 视频: www.bilibili.com/video/BV1Pa...


1. 图标字体工具的使用

我们的目的是通过脚本工具,可以非常便利地使用 iconfont 的图标字体。

内置图标 自定义图标

将下载的字体图标放入指定目录后,命令行输入: toly icon ,即可做到

  • [1]. 自动提取 压缩包的字体文件
  • [2]. 自动生成 字体图标的访问代码
  • [3]. 自动配置 pubspec.yaml 文件的字体图标节点

也就是说,对于开发者而言,只要准备好下载的资源,然后执行命令,就可以调用生成代码的常量,展示对应的图标。这样将极大地方便开发者对字体图标的使用:

通过修改配置信息,也可以实现:一个项目中使用多个图标字体资源的目的


2. toly icon 配置方式

另外, toly icon 支持在 Flutter 项目中通过 pubspec.yaml ,配置一些路径信息。如果不指定,会使用默认值:

yaml 复制代码
toly:
  icon:
    src_zip: 'assets/download.zip' # 下载的压缩包资源
    assets_dir: 'assets/iconfont'  # ttf文件解压的文件夹
    dist_file: 'lib/app/app_icon.dart' # 生成的代码文件地址

3. 图标字体资源准备

iconfont.cn 挑选图标,通过加入购物车,创建项目:

在项目界面中,下载压缩包,将资源放在指定目录即可:


4. toly icon 的代码实现

在前在 FlutterUnit 里已经实现过交互界面的字体图标生成工具,这里只需要将用户的输入转换读取配置,在命令行执行而已,总体来说并不是非常困难。

对于图标字体的代码生成,最早可以追溯到我接触 Flutter 的第七天(2018-12-22):


这里在 toly 项目中添加了 src/icon 文件夹,用于放置 icon 命令处理的代码:

toly.dart 的 mian 函数中,顺便加了查看版本信息和帮助信息的功能。当 arguments 的第一个参数是 icon 时,通过 IconGen#gen 方法完成任务:

dart 复制代码
String kVersion = '0.0.3';

void main(List<String> arguments) {
  if (arguments.isEmpty) {
    print(getHelpText());
    return;
  }

  String cmd = arguments.first;
  if (cmd == '-V' || cmd == '--version') {
    print('toly version: $kVersion');
    return;
  }

  if (cmd == 'icon') {
    const IconGen().gen();
    return;
  }

IconGen 中创建 IconFontClassParser,并通过 ConfigReader 读取配置信息,得到 IconFontGenConfig 配置对象,最后通过解析器的 gen 方法处理具体逻辑:

dart 复制代码
class IconGen{
  const IconGen();

  void gen(){
    final IconFontClassParser parser = IconFontClassParser();
    var configResult = ConfigReader().readIconConfig();
    IconFontGenConfig? config = configResult.$1;
    if (config == null) {
      print(configResult.$2);
      return;
    }
    parser.gen(config);
    print('生成代码成功!${config.distFilePath}');
  }
}

配置读取器中,首先查看当前文件夹下是否有 pubspec.yaml ,来确定是否是 Flutter 项目,如果没有,返回并输出错误信息;另外需要校验一下下载的字体资源是否存在:

dart 复制代码
class ConfigReader {
  (IconFontGenConfig?, String) readIconConfig() {
    String projectPath = Directory.current.path;
    File yamlFile = File(path.join(projectPath, 'pubspec.yaml'));
    if (!yamlFile.existsSync()) {
      return (null, 'no pubspec.yaml in current Directory');
    }
    dynamic doc = loadYaml(yamlFile.readAsStringSync());
    dynamic configs = doc?['toly']?['icon'];
    String assetsDist = configs?['assets_dir']??'assets/iconfont';
    String fileDist = configs?['dist_file']??'lib/toly_gen/toly_icon.dart';
    String srcZip = configs?['src_zip']??'assets/download.zip';

    File srcZipFile = File(path.join(projectPath, srcZip));
    if (!srcZipFile.existsSync()) {
      return (null, 'no 【$srcZip】 in current Directory');
    }

    return (
      IconFontGenConfig(
        assetsDist: assetsDist,
        fileDist: fileDist,
        projectPath: projectPath,
        srcZip: srcZip,
      ),
      'ready to generated'
    );
  }
}

解析器生成代码的部分在 《FlutterUnit 工具集录 | IconFont 类代码自动生成》 中有详细介绍,这里就不赘述了。


可以看出 dart 的命令行工具在 Flutter 项目中使用是非常优雅的,自动生成一些固定的代码非常方便。当然你也可以使用 dart 来其他有趣便捷地小工具。比如计算两个日期之间的期间间隔、获取一个文件的 MD5 、解析一个 json 文件,甚至通过创建模板项目等。希望 toly 的命令行工具可以给大家更多启发,那本文就到这里,谢谢观看 ~

相关推荐
数据猎手小k23 分钟前
AndroidLab:一个系统化的Android代理框架,包含操作环境和可复现的基准测试,支持大型语言模型和多模态模型。
android·人工智能·机器学习·语言模型
你的小101 小时前
JavaWeb项目-----博客系统
android
风和先行1 小时前
adb 命令查看设备存储占用情况
android·adb
AaVictory.2 小时前
Android 开发 Java中 list实现 按照时间格式 yyyy-MM-dd HH:mm 顺序
android·java·list
似霰3 小时前
安卓智能指针sp、wp、RefBase浅析
android·c++·binder
大风起兮云飞扬丶3 小时前
Android——网络请求
android
干一行,爱一行3 小时前
android camera data -> surface 显示
android
断墨先生4 小时前
uniapp—android原生插件开发(3Android真机调试)
android·uni-app
无极程序员5 小时前
PHP常量
android·ide·android studio
萌面小侠Plus6 小时前
Android笔记(三十三):封装设备性能级别判断工具——低端机还是高端机
android·性能优化·kotlin·工具类·低端机