Flutter Chen Generator - IconFont Generator

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

📋 命令行参数

📄 支持的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 {
  @override
  Widget 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 IconFont
  run: 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: ComIcon
         fonts:
           - asset: assets/fonts/iconfont.ttf
   

4. 生成代码

   flutter_chen_iconfont
   

5. 在代码中使用

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