Flutter Chen Generator - yaml配置使用
Flutter Chen Generator
🚀 一个强大的Flutter代码生成工具包，包含多个实用的代码生成器。
✨ 功能特性
📁 资源生成器 (Assets Generator)
- 🔄 自动扫描assets目录并生成Dart常量
- 🧠 智能驼峰命名转换，保持原有驼峰格式
- 🔧 处理文件命名冲突（同名不同扩展名）
- 📝 自动更新pubspec.yaml配置
🎨 图标字体生成器 (IconFont Generator)
- 📄 解析iconfont.json文件自动生成Dart图标常量
- 🏷️ 智能命名转换（支持横线转驼峰）
- 🔧 支持多种JSON格式（iconfont.cn、自定义格式等）
- 🎯 类型安全的IconData常量
📱 ScreenUtil适配生成器 (ScreenUtil Generator)
- 🔍 智能扫描Dart文件中的数值属性
- 🎯 自动添加合适的ScreenUtil后缀 (.w, .h, .sp, .r)
- 🧠 智能识别属性类型（宽度、高度、字体、圆角）
- 📦 自动添加ScreenUtil依赖导入
⚙️ 配置管理
- 📄 支持YAML配置文件 (
flutter_chen_generator.yaml) - 🏆 配置优先级：命令行参数 > YAML配置 > 默认配置
- 🎛️ 分模块配置，每个生成器独立配置
- 🔧 一键生成示例配置文件
Flutter Chen Generator - yaml配置使用
🔮 未来计划
- 🌐 国际化脚本: 自动项目国际化、导入导出excel
Flutter Chen Generator 完整使用示例
本示例展示如何从零开始配置和使用 Flutter Chen Generator 的所有功能。
📋 准备工作
1. 安装工具
# 全局安装
dart pub global activate flutter_chen_generator# 验证安装
flutter_chen_generator --version
2. 项目结构准备
my_flutter_project/
├── pubspec.yaml
├── lib/
│ ├── main.dart
│ └── generated/ # 自动生成的文件将放在这里
├── assets/
│ ├── images/
│ │ ├── home/
│ │ │ ├── icon.png
│ │ │ └── banner.jpg
│ │ └── user/
│ │ └── avatar.png
│ ├── fonts/
│ │ ├── iconfont.json # 图标字体配置文件
│ │ └── iconfont.ttf # 图标字体文件
│ └── json/
│ └── config.json
└── flutter_chen_generator.yaml # 配置文件
⚙️ 配置文件设置
1. 创建配置文件
# 在项目根目录创建配置文件
flutter_chen_generator init
2. 自定义配置文件
# flutter_chen_generator.yaml
# 资源生成器配置
assets:# 资源目录assets-dir: assets# 输出文件路径output: lib/generated/assets.dart# 生成的类名class-name: AppAssets# 使用短命名模式short-naming: true# 忽略的文件夹ignore: - .DS_Store- temp# 是否更新pubspec.yamlupdate-pubspec: true# 图标字体生成器配置
iconfont:# JSON输入文件input: assets/fonts/iconfont.json# Dart输出文件output: lib/generated/app_icons.dart# 生成的类名class-name: AppIcons# 字体家族名称font-family: AppIconFont# 是否生成扩展方法extensions: true# ScreenUtil适配生成器配置
screenutil:# 输入目录input: lib# 忽略的文件模式ignore:- build/- .dart_tool/- generated/- test/- .git/- "*.g.dart"- "*.freezed.dart"# 预览模式 (先预览再实际修改)dry-run: false# 详细输出verbose: true
🎯 逐步使用指南
第一步：生成资源文件索引
# 生成资源文件常量
flutter_chen_generator assets
生成结果 (lib/generated/assets.dart):
/// 自动生成的资源文件索引,请勿手动修改
/// Generated by flutter_chen_assets_generator
class AppAssets {AppAssets._();static const String homeIcon = 'assets/images/home/icon.png';static const String homeBanner = 'assets/images/home/banner.jpg';static const String userAvatar = 'assets/images/user/avatar.png';static const String jsonConfig = 'assets/json/config.json';
}
pubspec.yaml 自动更新:
flutter:assets:- assets/- assets/images/- assets/images/home/- assets/images/user/- assets/json/
第二步：生成图标字体
准备图标字体文件
{"glyphs": [{"font_class": "home","unicode_decimal": 58880},{"font_class": "user-circle","unicode_decimal": 58881},{"font_class": "settings","unicode_decimal": 58882}]
}
# 生成图标字体常量
flutter_chen_generator iconfont
生成结果 (lib/generated/app_icons.dart):
/// 自动生成的图标字体文件，请勿手动修改
/// Generated by flutter_chen_iconfont_generator
/// Total icons: 3
import 'package:flutter/material.dart';/// AppIcons 图标字体类
/// 字体家族: AppIconFont
class AppIcons {AppIcons._();/// 字体家族名称static const String fontFamily = 'AppIconFont';/// home 图标static const IconData home = IconData(0xe600,fontFamily: 'AppIconFont',);/// user-circle 图标static const IconData userCircle = IconData(0xe601,fontFamily: 'AppIconFont',);/// settings 图标static const IconData settings = IconData(0xe602,fontFamily: 'AppIconFont',);/// 所有图标列表static const List<IconData> allIcons = [home,settings,userCircle,];/// 根据名称获取图标static IconData? getByName(String name) {switch (name) {case 'home': return home;case 'user-circle': return userCircle;case 'settings': return settings;default: return null;}}
}/// IconData 扩展方法
extension AppIconsExtension on IconData {/// 创建 Icon 组件Icon icon({double? size,Color? color,String? semanticLabel,TextDirection? textDirection,}) {return Icon(this,size: size,color: color,semanticLabel: semanticLabel,textDirection: textDirection,);}
}
更新 pubspec.yaml:
flutter:fonts:- family: AppIconFontfonts:- asset: assets/fonts/iconfont.ttf
第三步：添加 ScreenUtil 适配
安装 ScreenUtil 依赖
# pubspec.yaml
dependencies:flutter_screenutil: ^5.9.0
初始化 ScreenUtil
// lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return ScreenUtilInit(designSize: const Size(375, 812), // 设计稿尺寸builder: (context, child) {return MaterialApp(title: 'Flutter Demo',home: MyHomePage(),);},);}
}
预览 ScreenUtil 修改
# 先预览要修改的内容
flutter_chen_generator screenutil --dry-run --verbose
应用 ScreenUtil 适配
# 实际修改文件
flutter_chen_generator screenutil
修改前:
class MyWidget extends StatelessWidget {Widget build(BuildContext context) {return Container(width: 200,height: 100,margin: EdgeInsets.all(16),padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),decoration: BoxDecoration(borderRadius: BorderRadius.circular(8),),child: Text('Hello',style: TextStyle(fontSize: 16),),);}
}
修改后:
import 'package:flutter_screenutil/flutter_screenutil.dart';class MyWidget extends StatelessWidget {Widget build(BuildContext context) {return Container(width: 200.w,height: 100.h,margin: EdgeInsets.all(16.r),padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 8.h),decoration: BoxDecoration(borderRadius: BorderRadius.circular(8.r),),child: Text('Hello',style: TextStyle(fontSize: 16.sp),),);}
}
📱 在项目中使用
使用资源文件
import 'package:flutter/material.dart';
import 'generated/assets.dart';class HomePage extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(body: Column(children: [// 使用图片资源Image.asset(AppAssets.homeIcon),Image.asset(AppAssets.homeBanner),Image.asset(AppAssets.userAvatar),// 使用JSON资源FutureBuilder(future: rootBundle.loadString(AppAssets.jsonConfig),builder: (context, snapshot) {return Text(snapshot.data ?? '');},),],),);}
}
使用图标字体
import 'package:flutter/material.dart';
import 'generated/app_icons.dart';class IconExamples extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(body: Column(children: [// 基本使用Icon(AppIcons.home),Icon(AppIcons.userCircle),Icon(AppIcons.settings),// 自定义样式Icon(AppIcons.home,size: 32.w,color: Colors.blue,),// 使用扩展方法AppIcons.userCircle.icon(size: 24.w,color: Colors.red,),// 在按钮中使用IconButton(icon: Icon(AppIcons.settings),onPressed: () {},),// 动态获取图标Builder(builder: (context) {final icon = AppIcons.getByName('home');return icon != null ? Icon(icon) : SizedBox.shrink();},),// 遍历所有图标Wrap(children: AppIcons.allIcons.map((iconData) => Padding(padding: EdgeInsets.all(8.w),child: Icon(iconData),),).toList(),),],),);}
}
🔄 开发工作流程
日常开发流程
# 1. 添加新的资源文件到 assets 目录
# 2. 更新资源索引
flutter_chen_generator assets# 3. 从 iconfont.cn 下载新图标，更新 iconfont.json
# 4. 重新生成图标字体
flutter_chen_generator iconfont# 5. 开发新页面时，先预览 ScreenUtil 适配
flutter_chen_generator screenutil --dry-run# 6. 确认无误后应用适配
flutter_chen_generator screenutil
团队协作流程
# 团队成员A：更新配置
git add flutter_chen_generator.yaml
git commit -m "feat: update generator config"
git push# 团队成员B：拉取并生成代码
git pull
flutter_chen_generator assets
flutter_chen_generator iconfont
CI/CD 集成
# .github/workflows/code-generation.yml
name: Code Generationon:push:paths:- 'assets/**'- 'flutter_chen_generator.yaml'jobs:generate:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v3- name: Setup Dartuses: dart-lang/setup-dart@v1- name: Install Flutter Chen Generatorrun: dart pub global activate flutter_chen_generator- name: Generate Coderun: |flutter_chen_generator assetsflutter_chen_generator iconfontflutter_chen_generator screenutil --dry-run # 只预览，不修改- name: Check for changesrun: |if [ -n "$(git status --porcelain)" ]; thenecho "Generated files have changes"git add lib/generated/git config --local user.email "action@github.com"git config --local user.name "GitHub Action"git commit -m "chore: update generated files"git pushelseecho "No changes in generated files"fi
🎨 高级配置示例
多环境配置
# flutter_chen_generator.yaml (开发环境)
assets:assets-dir: assetsclass-name: DevAssetsscreenutil:dry-run: true # 开发环境使用预览模式verbose: true # 显示详细信息
# flutter_chen_generator.prod.yaml (生产环境)
assets:assets-dir: assetsclass-name: Assetsignore:- dev-onlyscreenutil:dry-run: false # 生产环境实际修改verbose: false # 减少输出
模块化项目配置
# 核心模块资源生成
flutter_chen_generator assets --assets-dir packages/core/assets --output packages/core/lib/assets.dart# UI组件图标生成
flutter_chen_generator iconfont --input packages/ui/assets/icons.json --output packages/ui/lib/icons.dart# 特定模块适配
flutter_chen_generator screenutil --input packages/feature_home/lib
🔧 故障排除
常见问题及解决方案
1. 配置文件未找到
# 检查配置文件位置
ls -la flutter_chen_generator.yaml# 重新创建配置文件
flutter_chen_generator init
2. 生成的文件有编译错误
# 检查语法
dart analyze lib/generated/# 重新生成
flutter_chen_generator assets
flutter_chen_generator iconfont
3. ScreenUtil 适配异常
# 使用预览模式检查
flutter_chen_generator screenutil --dry-run --verbose# 检查忽略规则
flutter_chen_generator screenutil --help
4. 图标字体不显示
# 确保 pubspec.yaml 中有字体配置
flutter:fonts:- family: AppIconFont # 与配置文件中的 font-family 一致fonts:- asset: assets/fonts/iconfont.ttf
📈 最佳实践
1. 版本控制
- ✅ 提交配置文件
flutter_chen_generator.yaml - ✅ 提交生成的代码文件
- ❌ 不要忽略
lib/generated/目录
2. 文件组织
lib/
├── generated/ # 自动生成的文件
│ ├── assets.dart
│ ├── app_icons.dart
│ └── ...
├── constants/ # 手动维护的常量
├── widgets/ # 自定义组件
└── pages/ # 页面文件
3. 命名规范
- 资源文件：使用小写字母和下划线
home_icon.png - 图标名称：使用横线连接
user-circle - 生成的类名：使用帕斯卡命名
AppAssets,AppIcons
4. 自动化脚本
#!/bin/bash
# scripts/generate.shecho "🚀 开始代码生成..."echo "📁 生成资源文件..."
flutter_chen_generator assetsecho "🎨 生成图标字体..."
flutter_chen_generator iconfontecho "📱 预览 ScreenUtil 适配..."
flutter_chen_generator screenutil --dry-runecho "✅ 代码生成完成！"
echo "💡 运行 'flutter_chen_generator screenutil' 应用 ScreenUtil 适配"
通过以上完整的配置和使用流程，你可以充分利用 Flutter Chen Generator 的所有功能，提高开发效率并保持代码的一致性！