Flutter ScreenUtil Generator - 自动添加ScreenUtil后缀

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依赖导入

🔮 未来计划

🌐 国际化脚本: 自动把项目国际化、导入导出excel

🚀 快速开始

安装

bash 复制代码

dart pub global activate flutter_chen_generator

📱 Flutter ScreenUtil Generator

自动为Flutter项目中的数值添加 ScreenUtil 适配后缀的工具，实现自动屏幕适配。

✨ 功能特性

🔍 智能扫描Dart文件中的数值属性
🎯 自动添加合适的ScreenUtil后缀 (.w, .h, .sp, .r)
🧠 智能识别属性类型（宽度、高度、字体、圆角）
📦 自动添加 ScreenUtil 依赖导入
🔧 处理 EdgeInsets 等特殊构造函数
⚡ 自动移除冲突的 const 关键字
🚫 支持忽略指定文件夹
📝 预览模式，安全检查修改内容

🚀 使用方法

基本使用

bash 复制代码

# 使用默认配置
flutter_chen_generator screenutil

# 处理指定目录
flutter_chen_generator screenutil --input lib

高级配置

bash 复制代码

flutter_chen_generator screenutil \
  --input lib \
  --ignore generated,test,example \
  --dry-run \
  --verbose

📋 命令行参数

参数	短参数	说明	默认值
`--input`	`-i`	输入目录路径	`.`
`--ignore`	-	忽略的文件夹模式	`build/,.dart_tool/,generated/,test/,.git/`
`--dry-run`	-	预览模式，不实际修改文件	`false`
`--verbose`	`-v`	详细输出	`false`
`--help`	`-h`	帮助信息	-

🎯 后缀规则

.w (宽度相关)

适用于宽度、水平方向的属性：

width, minWidth, maxWidth
left, right, start, end
horizontal, spacing, gap
strokeWidth, borderWidth
iconSize, leadingWidth

.h (高度相关)

适用于高度、垂直方向的属性：

height, minHeight, maxHeight
top, bottom, vertical
elevation, letterSpacing
toolbarHeight, itemHeight

.sp (字体大小)

适用于字体相关属性：

fontSize
wordSpacing
decorationThickness

.r (圆角相关)

适用于圆角、半径属性：

radius, borderRadius
blurRadius, spreadRadius

📂 转换示例

转换前

dart 复制代码

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),
      ),
    );
  }
}

转换后

dart 复制代码

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),
      ),
    );
  }
}

💡 使用技巧

1. 预览模式

在实际修改文件前，先使用预览模式检查：

bash 复制代码

flutter_chen_generator screenutil --dry-run --verbose

2. 处理特定目录

只处理特定目录，避免影响第三方代码：

bash 复制代码

flutter_chen_generator screenutil --input lib/src

3. 忽略特定文件

bash 复制代码

flutter_chen_generator screenutil --ignore generated,models,constants

4. CI/CD 集成

yaml 复制代码

# .github/workflows/flutter.yml
- name: Apply ScreenUtil
  run: |
    flutter_chen_generator screenutil --dry-run
    flutter_chen_generator screenutil

5. 分步骤处理

bash 复制代码

# 先处理页面组件
flutter_chen_generator screenutil --input lib/pages

# 再处理通用组件
flutter_chen_generator screenutil --input lib/widgets

# 最后处理其他文件
flutter_chen_generator screenutil --input lib --ignore pages,widgets

🔧 EdgeInsets 特殊处理

工具能智能处理各种 EdgeInsets 构造函数：

dart 复制代码

// 转换前
EdgeInsets.all(16)
EdgeInsets.symmetric(horizontal: 12, vertical: 8)
EdgeInsets.only(left: 10, top: 5, right: 10, bottom: 5)
EdgeInsets.fromLTRB(10, 5, 10, 5)

// 转换后
EdgeInsets.all(16.r)
EdgeInsets.symmetric(horizontal: 12.w, vertical: 8.h)
EdgeInsets.only(left: 10.w, top: 5.h, right: 10.w, bottom: 5.h)
EdgeInsets.fromLTRB(10.w, 5.h, 10.w, 5.h)

⚠️ 注意事项

1. const 关键字处理

工具会自动移除冲突的 const 关键字：

dart 复制代码

// 转换前
const EdgeInsets.all(16)

// 转换后
EdgeInsets.all(16.r)

2. 已有后缀跳过

如果数值已经有 ScreenUtil 后缀，工具会智能跳过：

dart 复制代码

// 不会重复添加
width: 200.w  // 保持不变

3. 备份建议

在处理重要项目前，建议：

使用版本控制系统（Git）
先运行 --dry-run 预览
分批次处理文件

📋 前置条件

1. 添加 ScreenUtil 依赖

yaml 复制代码

# pubspec.yaml
dependencies:
  flutter_screenutil: ^5.9.0

2. 初始化 ScreenUtil

dart 复制代码

// main.dart
import 'package:flutter_screenutil/flutter_screenutil.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(375, 812), // 设计稿尺寸
      builder: (context, child) {
        return MaterialApp(
          // your app
        );
      },
    );
  }
}

🔧 常见问题

Q: 某些文件没有被处理？

A: 检查 --ignore 参数设置，确保没有误排除需要处理的文件。

Q: 转换后编译错误？

A: 确保已添加 flutter_screenutil 依赖，并正确初始化 ScreenUtil。

Q: 如何撤销修改？

A: 使用 Git 等版本控制工具回滚，或重新运行项目构建。

Q: 工具识别不准确？

A: 可以手动调整，工具主要处理常见场景，特殊情况需要人工介入。

Q: 性能影响？

A: ScreenUtil 在实际应用中性能影响极小，但建议在开发阶段使用。

🚀 完整工作流程

添加依赖

yaml 复制代码

# pubspec.yaml
dependencies:
  flutter_screenutil: ^5.9.0

初始化 ScreenUtil

dart 复制代码

// 在 main.dart 中初始化
ScreenUtilInit(
  designSize: const Size(375, 812),
  builder: (context, child) => MyApp(),
)

预览修改

bash 复制代码

flutter_chen_generator screenutil --dry-run --verbose

执行转换
bash 复制代码
```
flutter_chen_generator screenutil
```

测试验证

bash 复制代码

flutter analyze
flutter test
flutter run

🎯 最佳实践

1. 渐进式迁移

先迁移新开发的页面
逐步迁移现有页面
最后处理公共组件

2. 设计稿尺寸统一

确保团队使用统一的设计稿尺寸
在 ScreenUtil 初始化时设置正确的 designSize

3. 代码审查

在代码审查时检查 ScreenUtil 使用是否正确
确保关键尺寸都有适配

4. 测试验证

在不同屏幕尺寸设备上测试
检查适配效果是否符合预期