Flutter XGen

flutter_xgen

🚀 VSCode + Flutter 开发小助手

✨ 核心特性

1. FlutterXgen 面板管理工具

在侧边栏统一展示所有功能入口，可快速切换与配置

2. 后台自动热重载

当 VS Code 在调试模式下运行当前 Flutter 项目时，即便在 Emacs 等外部编辑器中修改并保存 .dart 文件，VS Code 也会通过文件系统事件监听自动触发 flutter hot reload，实现应用的实时更新

3. 资源管理 (assets.dart)

使用 flutter_assets_gen 自动管理资源文件。

✅ 功能特性：

支持 TinyPNG 图片压缩光标悬停时，支持预览图片缩略图显示资源文件大小，方便查看图片占用空间支持 SVGA 动画文件的预览 📦 资源路径统一集中在 assets.dart 文件中维护

示例配置（pubspec.yaml）：

flutter_assets_gen:
  output_dir: lib/generated    # 生成文件目录
  output_filename: assets     # Dart 文件名（自动追加 .dart）
  class_name: Assets         # 生成类名（可自定义）
  assets:                    # 指定扫描目录（可选）
    - assets/images/
    - assets/icons/

生成示例：

class Assets {
  static const String imageLogo = 'assets/images/logo.png';
  static const String homeBg = 'assets/images/home/bg.jpg';
  static const String iconUser = 'assets/icons/user.svg';
}

使用示例：

Image.asset(Assets.imageLogo); // 自动补全，杜绝路径拼写错误

4. 文本国际化

生成多语言支持文件, 与 Flutter Intl 插件的效果相当
支持使用表格管理国际化文本

生成内容：

.arb 多语言模板（如 messages_en.arb、messages_zh.arb）
本地化入口文件 l10n.dart
映射辅助 messages_mapper.dart

操作流程：

在 lib/l10n/ 下新建 .arb 文件（例如 intl_en.arb）

填写键值对：

{
  "helloWorld": "Hello World!",
  "@helloWorld": { "description": "首页欢迎语" }
}

通过命令面板执行 Flutter XGen: Generate Intl

在代码中使用：

Text(AppLocalizations.of(context)!.helloWorld);

5. 其他工具集成（Beta）

5.1 应用重命名

flutter_app_rename_tool 支持多平台一键重命名，统一包名与应用名

配置示例（pubspec.yaml）：

app_name: "全新应用"
package_name: com.company.newapp
ios_bundle_id: com.company.newapp.ios
android_namespace: com.company.newapp.android

执行 Flutter XGen: Rename App 即可完成 iOS/Android 应用重命名。

5.2 图标生成

flutter_app_launcher_icon 基于配置自动生成多分辨率启动图标

添加到 pubspec.yaml：

flutter_launcher_icons:
  app_icon: "assets/icons/icon_android.png"
  macos:
    enable: false

执行 Flutter XGen: Generate Icons 完成不同平台所需的图标资源。

📦 安装指南

打开 VSCode 扩展商店
搜索并安装 flutter_xgen
重启 VSCode 生效

❓ 常见问题

Q：后台热重载不起作用？
A：请确认：

已通过 flutter run 启动 Flutter 应用
VSCode 自动保存已开启（菜单：File → Auto Save）

Q：如何自定义资源生成类名？
A：在 pubspec.yaml 的 flutter_assets_gen.class_name 字段中修改，如：

flutter_assets_gen:
  class_name: MyAssets

📮 联系我们

如有问题或建议，请在 GitHub 提交 Issue： flutter_xgen_feedback

Dengwww