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

Flutter Chen Generator - yaml配置使用

news 2025/8/1 6:32:49

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.xdnf.cn/news/1218259.html

相关文章：

  • 了解SQL
  • 从姑苏区人工智能大模型基础设施招标｜学习服务器、AI处理器、GPU
  • 【车联网kafka】Kafka核心架构与实战经验（第二篇）
  • 防火墙安全实验
  • 《秋招在即！Redis数据类型面试题解析》
  • Vue3+Vite项目如何简单使用tsx
  • SpringBoot+SpringAI打造智能对话机器人
  • MySQL 8.0 OCP 1Z0-908 题目解析(38)
  • Kafka Streams窗口技术全解析：从理论到电商实时分析实战
  • TTS语音合成|GPT-SoVITS语音合成服务器部署，实现http访问
  • Linux多线程线程控制
  • 前端核心技术Node.js（五）——Mongodb、Mongoose和接口
  • 计算机网络学习（一、Cisco Packet Tracer软件安装）
  • 计算机网络学习--------三次握手与四次挥手
  • diffusion原理和代码延伸笔记1——扩散桥，GOUB，UniDB
  • 【计算机网络】5传输层
  • 网络与信息安全有哪些岗位：（4）应急响应工程师
  • 【网络安全】等级保护2.0解决方案
  • 物联网与AI深度融合,赋能企业多样化物联需求
  • Redis实战（4）-- BitMap结构与使用
  • 基于单片机智能油烟机设计/厨房排烟系统设计
  • 用Python绘制SM2国密算法椭圆曲线：一场数学与视觉的盛宴
  • XML 用途
  • MVS相机+YOLO检测方法
  • 基于N32G45x+RTT驱动框架的定时器外部计数
  • 前端js通过a标签直接预览pdf文件，弹出下载页面问题
  • .NET 10 中的新增功能系列文章3—— .NET MAUI 中的新增功能
  • 《Java 程序设计》第 18 章 - Java 网络编程
  • C++面试5题--6day
  • LLC电源原边MOS管DS增加RC吸收对ZVS的影响分析