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)