FlutterUnit 工具集录 | IconFont 类代码自动生成

1. IconFont 类代码生成器的效果

首先介绍一下 FlutterUnit 中，代码生成菜单下的 IconFont 东西的效果。它主要处理Flutter 项目中自定义字体图标运用的问题：

• 字体图标调用类代码的 主动生成。
• pubspec.yaml 中字体图标节点的 主动装备。
• 多个 自定义字体图标节点的支撑。

一键主动生成相关代码和装备，在项目中直接运用生成类调用：

---

2. 运用方法

如下是 FlutterUnit 中的交互界面，选择相关资源后，点击 生成代码 即可。该功能在新版的 FlutterUnit 桌面版： windows/macos 中能够运用。FlutterUnit 是一个 github 开源项目，可在主页中下载安装包。

---

假如不想下载软件，也能够运用项目中的 icon_font_class_parser.dart 作为脚本，提供装备来运用。

---

3. 运用过程

• [1]. 在 iconfont.cn 选择图标，参加项目，下载压缩包。

---

• [2]. 选择方针 Flutter 项目地址，装备资源、产物文件方位。

---

• [3]. 点击生成代码按钮

---

二、 东西完成过程中的技能点

这个东西虽小，但包含着许多的知识。下面来分享一下完成过程中运用的技能点，以及碰到的问题以及处理方法。

---

1. 文件的解压

本着尽可能削减运用者操作的准则，东西中直接读取压缩包，省去运用者自己解压的过程。解压运用的是三方库: archive

解压过程中主要做的是两件事，其一：寻觅 ttf 文件，将其拷贝到方针地址； 其二: 寻觅 json 文件，将其读取出来，解析生成调用类代码，其中 tag1 处是解压过程中，获取文件数据，转化为字符串：

final inputStream = InputFileStream(config.srcZip);
// 将压缩包有用资源解压到方针文件
final archive = ZipDecoder().decodeBuffer(inputStream);
for (var file in archive.files) {
  if (file.isFile) {
    if (file.name.endsWith('.ttf')) {
      final outputStream = OutputFileStream(config.ttfDistPath);
      file.writeContent(outputStream);
      outputStream.close();
    }
    if (file.name.endsWith('.json')) {
      dynamic data = file.content; // tag1
      String jsonContent = utf8.decode(data);
      String resultCode = parser(jsonContent,config.fontFamily);
      File distFile = File(config.distFilePath);
      if(!distFile.existsSync()){
        distFile.createSync(recursive: true);
      }
      distFile.writeAsStringSync(resultCode);
      setYaml(config);
    }
  }
}

---

2. 文件选择器

文件选择器运用的是三方库: file_picker

该库支撑选择文件夹 getDirectoryPath 和选择文件 pickFiles, 运用起来还是非常方便的。

void _showSelectFile() async {
  String? path;
  if (pickerDir) {
    path = await FilePicker.platform.getDirectoryPath();
  } else {
    FilePickerResult? result = await FilePicker.platform.pickFiles();
    if (result != null) {
      path = result.files.single.path;
    }
  }
}

---

3. json 文件的解析以及类代码的生成

这点是最中心的逻辑， 压缩包中的 iconfont.json 文件中记录了 名称 和 Unicode 码的映射关系。这儿要做的就是提取这些要害数据，生成 Dart 代码。

逻辑也非常简单，就是字符串的拼接而已，根基映射关系生成一条条的静态常量字符串。不到 20 行代码就完成了最中心的代码生成逻辑。

  String parser(String input,String fontFamily){
    dynamic map = json.decode(input);
    List<dynamic> glyphs = map['glyphs'] as List<dynamic>;
    String code = '';
    for(int i=0;i<glyphs.length;i++){
      String fieldName = glyphs[i]['font_class'];
      String unicode = glyphs[i]['unicode'];
      String lineCode = """static const IconData $fieldName = IconData(0x$unicode, fontFamily: "$fontFamily");\n""";
      code+=lineCode;
    }
    String result =
"""
import 'package:flutter/widgets.dart';
// Power By 张风捷特烈--- Generated file. Do not edit.
// 欢迎支撑： https://github.com/toly1994328/FlutterUnit
class $fontFamily {
    $fontFamily._();
    $code
}  
""";
    return result;
  }

---

4. pubspec.yaml 的主动装备

pubspec.yaml 主动装备图标字体对应的节点，这也是尽可能让运用者削减操作的过程。 这个东西是在直播时写的，这个功能是消耗时间多的当地。

首先这是一个 yaml 文件，很自然会想到运用 yaml 解析器，修正节点。但运用这种方法存在一个问题： 所有的注释信息在从头生成时会被抹除。这就不得不寻求其他的出路。最终的计划是 正则匹配，如下所示 ^ +- family: +(\w+) 能够匹配到所有的 family 行：

---

在装备过程中会有一些状况，比如初始项目中没有 fonts 节点，或者已经装备过了这个字体图标。需求分状况处理，流程图如下：

采取读行的方法读取文件，经过正则匹配运用存在 fonts 节点，假如没有在 flutter 所内行的下一行增加装备信息：

List<String> lines = pubspecFile.readAsLinesSync();
RegExp fontsRegex = RegExp(r'^  fonts:',multiLine: true);
bool hasFonts = fontsRegex.hasMatch(lines.join('\n'));
if(!hasFonts){
 // 当时没有 fonts 节点，需求增加到 flutter 节点下
 int index = lines.indexWhere((e) => e.startsWith('flutter:'));
 List<String> fonts = [
   '  fonts:',
   '    - family: $familyName',
   '      fonts:',
   '        - asset: $fontAssetsDist',
 ];
 lines.insertAll(index+1, fonts);
 pubspecFile.writeAsStringSync(lines.join('\n'));
 return;
}

---

当 fonts 节点存在，查询 family ，有没有当时字体图标, 假如没有在 fonts 节点下一行增加装备：

// 存在 fonts 节点，查询 family ，有没有当时字体图标
bool hasTargetFamily = false;
RegExp regExp = RegExp(r'^ +- family: +(\w+)');
for(int i=0;i<lines.length;i++){
  String line = lines[i];
  if(line.startsWith(regExp)){
    String family = regExp.allMatches(line).first.group(1)??'';
    if(family == familyName){
      hasTargetFamily = true;
      break;
    }
  }
}
if(!hasTargetFamily){
  int index = lines.indexWhere((e) => e.startsWith(fontsRegex));
  List<String> fonts = [
    '    - family: $familyName',
    '      fonts:',
    '        - asset: $fontAssetsDist',
  ];
  lines.insertAll(index+1, fonts);
  pubspecFile.writeAsStringSync(lines.join('\n'));
}

到这儿就完成了中心功能，感兴趣的能够依据源码调试剖析看看。最终，欢迎我们多多重视 FlutterUnit 项目。那本文就到这儿，谢谢观看 ~