Flutter Chen Generator

🚀 一个强大的Flutter代码生成工具包，包含多个实用的代码生成器。

✨ 功能特性

📁 资源生成器 (Assets Generator)

• 🔄 自动扫描assets目录并生成Dart常量
• 🧠 智能驼峰命名转换，保持原有驼峰格式
• 🔧 处理文件命名冲突（同名不同扩展名）
• 📝 自动更新pubspec.yaml配置

🎨 图标字体生成器 (IconFont Generator)

• 📄 解析iconfont.json文件自动生成Dart图标常量
• 🏷️ 智能命名转换（支持横线转驼峰）
• 🔧 支持多种JSON格式（iconfont.cn、自定义格式等）
• 🎯 类型安全的IconData常量

🔮 未来计划

• 🌐 国际化自动化脚本: 自动把项目国际化、导入导出excel
• 📱 ScreenUtil自动化脚本: 自动智能添加ScreenUtil后缀

🚀 快速开始

安装

dart pub global activate flutter_chen_generator

🎨 Flutter IconFont Generator

从iconfont.json文件自动生成Flutter图标字体Dart文件的工具。

✨ 功能特性

• 📄 解析iconfont.json文件自动生成Dart图标常量
• 🏷️ 智能命名转换（支持横线转驼峰）
• 🔧 支持多种JSON格式（iconfont.cn、自定义格式等）
• 🎯 类型安全的IconData常量
• 🛠️ 可选的扩展方法生成
• ⚙️ 灵活的配置选项

🚀 使用方法

基本使用

# 使用默认配置
flutter_chen_iconfont# 或通过主入口
flutter_chen_generator iconfont

高级配置

flutter_chen_iconfont \--input assets/fonts/icons.json \--output lib/icons.dart \--class-name MyIcons \--font-family MyFont \--extensions

📋 命令行参数

参数	短参数	说明	默认值
--input	-i	JSON输入文件	assets/fonts/iconfont.json
--output	-o	Dart输出文件	lib/generated/iconfont.dart
--class-name	-c	生成的类名	IconFont
--font-family	-f	字体家族名称	ComIcon
--extensions	-	生成扩展方法	false
--help	-h	帮助信息	-

📄 支持的JSON格式

1. iconfont.cn 标准格式

{"glyphs": [{"font_class": "home","unicode_decimal": 58880},{"font_class": "user-circle","unicode_decimal": 58881}]
}

2. 自定义格式

{"icons": [{"name": "home", "code": 58880},{"name": "user-circle","unicode": "0xe601"}]
}

3. 直接数组格式

[{"font_class": "home","unicode_decimal": 58880},{"font_class": "user-circle","unicode_decimal": 58881}
]

📂 生成示例

基本生成的代码

/// 自动生成的图标字体文件，请勿手动修改
/// Generated by flutter_chen_iconfont_generator
/// Total icons: 2
import 'package:flutter/material.dart';/// IconFont 图标字体类
/// 字体家族: ComIcon
class IconFont {IconFont._();/// 字体家族名称static const String fontFamily = 'ComIcon';/// home 图标static const IconData home = IconData(0xe600,fontFamily: 'ComIcon',);/// user-circle 图标static const IconData userCircle = IconData(0xe601,fontFamily: 'ComIcon',);
}

包含扩展方法的代码

class IconFont {// ... 基本内容/// 所有图标列表static const List<IconData> allIcons = [home,userCircle,];/// 根据名称获取图标static IconData? getByName(String name) {switch (name) {case 'home': return home;case 'user-circle': return userCircle;default: return null;}}
}/// IconData 扩展方法
extension IconFontExtension on IconData {/// 创建 Icon 组件Icon icon({double? size,Color? color,String? semanticLabel,TextDirection? textDirection,}) {return Icon(this,size: size,color: color,semanticLabel: semanticLabel,textDirection: textDirection,);}
}

🎯 命名转换规则

横线转驼峰

• home → home
• user-circle → userCircle
• my-awesome-icon → myAwesomeIcon
• icon_name → iconName

特殊字符处理

• 数字开头：123icon → icon123icon
• 空字符串："" → icon
• 特殊字符：icon@#$ → icon

🔧 配置字体文件

在 pubspec.yaml 中添加字体配置：

flutter:fonts:- family: ComIcon  # 与 --font-family 参数一致fonts:- asset: assets/fonts/iconfont.ttf

💡 使用方法

基本使用

import 'package:flutter/material.dart';
import 'generated/iconfont.dart';class MyWidget extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(body: Column(children: [// 基本使用Icon(IconFont.home),// 自定义样式Icon(IconFont.userCircle,size: 32,color: Colors.blue,),// 在按钮中使用IconButton(icon: Icon(IconFont.home),onPressed: () {},),],),);}
}

使用扩展方法

// 需要先生成扩展方法：flutter_chen_iconfont --extensions// 使用扩展方法快速创建图标
IconFont.home.icon(size: 24,color: Colors.red,
)// 根据名称获取图标
final icon = IconFont.getByName('home');
if (icon != null) {Icon(icon)
}// 遍历所有图标
for (final iconData in IconFont.allIcons) {Icon(iconData)
}

💡 使用技巧

1. 批量处理多个图标文件

# 处理不同的图标集
flutter_chen_iconfont -i assets/fonts/ui-icons.json -o lib/ui_icons.dart -c UiIcons
flutter_chen_iconfont -i assets/fonts/brand-icons.json -o lib/brand_icons.dart -c BrandIcons

2. CI/CD 集成

# .github/workflows/flutter.yml
- name: Generate IconFontrun: flutter_chen_iconfont --input assets/fonts/iconfont.json

3. 多字体支持

// 不同的图标集使用不同的类
Icon(UiIcons.home)      // UI图标
Icon(BrandIcons.logo)   // 品牌图标

4. 动态图标选择

// 根据条件选择图标
final iconData = condition ? IconFont.home : IconFont.userCircle;
Icon(iconData)// 从配置中选择图标
final iconName = config['icon_name'];
final iconData = IconFont.getByName(iconName);
if (iconData != null) {Icon(iconData)
}

🔧 常见问题

Q: 生成的图标不显示？

A: 检查 pubspec.yaml 中的字体配置是否正确，字体家族名称要与生成的代码一致。

Q: 图标显示为方块？

A: 确保字体文件路径正确，并且字体文件包含对应的Unicode字符。

Q: 命名冲突怎么办？

A: 工具会自动处理大部分命名冲突，如果仍有问题，可以修改原始JSON中的 font_class 名称。

Q: 支持自定义JSON格式吗？

A: 支持多种格式，工具会自动识别常见的字段名（font_class、name、unicode_decimal、code等）。

Q: 如何更新图标？

A: 重新下载JSON文件，然后重新运行生成命令即可。

📚 完整工作流程

1. 从 iconfont.cn 下载图标

   • 选择图标并加入购物车
   • 下载代码，获取 iconfont.json 和 iconfont.ttf

2. 放置文件

   assets/
   └── fonts/├── iconfont.json└── iconfont.ttf
   

3. 配置 pubspec.yaml

   flutter:fonts:- family: ComIconfonts:- asset: assets/fonts/iconfont.ttf
   

4. 生成代码

   flutter_chen_iconfont
   

5. 在代码中使用

   import 'generated/iconfont.dart';Icon(IconFont.home)