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.yaml
  update-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: AppIconFont
      fonts:
        - 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 {
  @override
  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 {
  @override
  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 {
  @override
  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 {
  @override
  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 {
  @override
  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 Generation

on:
  push:
    paths:
      - 'assets/**'
      - 'flutter_chen_generator.yaml'

jobs:
  generate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Dart
        uses: dart-lang/setup-dart@v1
        
      - name: Install Flutter Chen Generator
        run: dart pub global activate flutter_chen_generator
        
      - name: Generate Code
        run: |
          flutter_chen_generator assets
          flutter_chen_generator iconfont
          flutter_chen_generator screenutil --dry-run  # 只预览，不修改
        
      - name: Check for changes
        run: |
          if [ -n "$(git status --porcelain)" ]; then
            echo "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 push
          else
            echo "No changes in generated files"
          fi

🎨 高级配置示例

多环境配置

# flutter_chen_generator.yaml (开发环境)
assets:
  assets-dir: assets
  class-name: DevAssets
  
screenutil:
  dry-run: true      # 开发环境使用预览模式
  verbose: true      # 显示详细信息

# flutter_chen_generator.prod.yaml (生产环境)
assets:
  assets-dir: assets
  class-name: Assets
  ignore:
    - dev-only
    
screenutil:
  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.sh

echo "🚀 开始代码生成..."

echo "📁 生成资源文件..."
flutter_chen_generator assets

echo "🎨 生成图标字体..."
flutter_chen_generator iconfont

echo "📱 预览 ScreenUtil 适配..."
flutter_chen_generator screenutil --dry-run

echo "✅ 代码生成完成！"
echo "💡 运行 'flutter_chen_generator screenutil' 应用 ScreenUtil 适配"

通过以上完整的配置和使用流程，你可以充分利用 Flutter Chen Generator 的所有功能，提高开发效率并保持代码的一致性！