当前位置： 首页 > news >正文

Flutter Chen Generator - yaml配置使用

news 2025/8/1 9:39:19

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 {@overrideWidget 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 {@overrideWidget 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 {@overrideWidget 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 {@overrideWidget 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 {@overrideWidget 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 的所有功能，提高开发效率并保持代码的一致性！

http://www.lryc.cn/news/606079.html

相关文章：

  • 原生安卓与flutter混编的实现
  • 是否需要买一个fpga开发板？
  • 嵌入式硬件学习（十）—— LED驱动+杂项设备驱动
  • 【Unity】实现小地图
  • TDengine 中 TDgp 中添加算法模型（异常检测）
  • 【大模型理论篇】跨语言AdaCOT
  • Flutter 页面跳转及传参总结
  • 8.2-使用字符串存储 UTF-8 编码文本
  • RAG：让AI更聪明的“外接大脑“ | AI小知识
  • ECMAScript2023(ES14)新特性
  • C# 基于halcon的视觉工作流-章27-带色中线
  • HTM 5 的离线储存的使用和原理
  • JavaEE初阶1.0
  • 认知绞肉机：个体实践视域下认知暴力与元认知升维的活体实验研究
  • 今日做题练习
  • 记录自己使用gitee和jenkins
  • PHP 核心特性全解析：从实战技巧到高级应用（2）
  • 按键精灵iOS工具元素命令SetText：自动化输入的终极解决方案
  • .NET Core部署服务器
  • Linux网络-------3.应⽤层协议HTTP
  • Java 大视界 -- Java 大数据在智能交通公交客流预测与线路优化中的深度实践（15 城验证，年省 2.1 亿）(373)
  • 快速搭建Node.js服务指南
  • 前端核心技术Node.js（四）——express框架
  • 8，FreeRTOS时间片调度
  • RPA-重塑企业自动化流程的智能引擎
  • 《能碳宝》AI辅助开发系统方案
  • 免费语音识别（ASR）服务深度指南​
  • 深入解析域名并发请求限制与HTTP/2多路复用技术
  • 电脑远程关机的重要性
  • vue3+arcgisAPI4示例:轨迹点模拟移动(附源码下载)