Flutter资源文件生成插件flutter_asset_generator的使用
Flutter资源文件生成插件flutter_asset_generator的使用
简介
flutter_asset_generator 是一个帮助 Flutter 开发者自动生成资源文件对应的 Dart 文件的工具。它的目的是让开发者从重复且无意义的工作中解放出来，社区中也有很多类似的功能。
该库基于 Dart 的 build 库。
目录
截图
使用方法
从源码运行
- 将
dart添加到你的$PATH环境变量中。 - 克隆
flutter_asset_generator仓库并安装依赖。 - 运行生成器。
git clone https://github.com/fluttercandies/flutter_asset_generator
cd flutter_asset_generator
dart pub get
dart bin/asset_generator.dart $flutter_project
从 pub global 运行
- 使用
pub global安装flutter_asset_generator。
dart pub global activate flutter_asset_generator
# 或者
dart pub global activate -s git https://github.com/fluttercandies/flutter_asset_generator.git
- 运行以下命令：
fgen
# 或者
fgen -s $flutter_project
支持的选项
使用 fgen -h 或 fgen --help 查看使用文档。
fgen -h
-w, --[no-]watch 继续监控变化。
(默认开启)
-p, --[no-]preview 生成带有预览注释的文件。
(默认开启)
-o, --output 资源文件路径。
如果是相对路径，则相对于 Flutter 项目根目录。
(默认为 "lib/const/resource.dart")
-s, --src Flutter 项目根路径。
(默认为 ".")
-n, --name 常量类名。
(默认为 "R")
-h, --[no-]help 帮助文档
-d, --[no-]debug 调试信息
文件名转换规则
- 路径中的空格、’.’ 和 ‘-’ 将被转换为
_。 - ‘@’ 将被转换为
_AT_。
例如：
images/1.png => IMAGES_PNG
images/hello_world.jpg => IMAGES_HELLO_WORLD_JPG
images/hello-world.jpg => IMAGES_HELLO_WORLD_JPG
以下情况会导致错误：
images/
├── main_login.png
├── main/
├── login.png
因为两个字段名会完全相同。
配置文件
配置文件的位置是约定俗成的，不支持通过命令行配置。指定的路径是 Flutter 项目根目录下的 fgen.yaml。
VSCode 配置方案
安装 YAML Support 插件。
配置你的 VSCode settings.json 文件，以便提示配置文件。
{
"yaml.schemas": {
"https://raw.githubusercontent.com/fluttercandies/flutter_asset_generator/master/fgen_schema.json": ["fgen.yaml"]
}
}
排除和包含规则
配置文件是 YAML 格式，每个元素是 glob 风格的。
exclude节点下是需要排除的文件名，类型为字符串数组。如果没有规则，则表示没有文件被排除。include节点下是需要导入的文件名，类型为字符串数组。如果没有规则，则表示所有文件都被允许。
优先级方面，排除规则高于包含规则，也就是说：
首先根据包含节点导入文件，然后排除文件。
替换规则
文件名可以根据配置文件进行替换，如下所示：
replace:
- from: “
to:
- from: ”
to:
- from: ’
to:
- from: (
to:
- from: )
to:
- from: "!"
to:
示例
exclude:
- "**/add*.png"
- "**_**"
include:
- "**/a*.png"
- "**/b*"
- "**/c*"
assets
├── address.png # 排除 by "**/add*.png"
├── address@at.png # 排除 by "**/add*.png"
├── bluetoothon-fjdfj.png
├── bluetoothon.png
└── camera.png
images
├── address space.png # 排除 by "**/add*.png"
├── address.png # 排除 by "**/add*.png"
├── addto.png # 排除 by "**/add*.png"
├── audio.png
├── bluetooth_link.png # 排除 by **_**
├── bluetoothoff.png
├── child.png
└── course.png
生成的 Dart 文件示例：
/// 由 [asset_generator](https://github.com/fluttercandies/flutter_asset_generator) 库生成。
/// 请勿手动编辑。
class R {
const R._();
/// 
static const String ASSETS_BLUETOOTHON_FJDFJ_PNG = 'assets/bluetoothon-fjdfj.png';
/// 
static const String ASSETS_BLUETOOTHON_PNG = 'assets/bluetoothon.png';
/// 
static const String ASSETS_CAMERA_PNG = 'assets/camera.png';
/// 
static const String IMAGES_AUDIO_PNG = 'images/audio.png';
/// 
static const String IMAGES_BLUETOOTHOFF_PNG = 'images/bluetoothoff.png';
/// 
static const String IMAGES_CHILD_PNG = 'images/child.png';
/// 
static const String IMAGES_COURSE_PNG = 'images/course.png';
}
其他配置
自版本 1.1.0 起，命令配置选项也支持在配置文件中设置。但命令行选项的优先级高于配置文件。
watch: false
# watch: true
preview: false
output: lib/const/r.dart
# output: lib/const/resource.dart
name: RRR
示例代码
假设你有一个 Flutter 项目，并且项目中有以下资源文件结构：
assets
├── logo.png
├── background.jpg
└── icon.png
images
├── user.png
└── avatar.jpg
你可以创建一个 fgen.yaml 配置文件，如下所示：
exclude:
- "**/background.jpg"
include:
- "**/*.png"
- "**/*.jpg"
replace:
- from: "."
to: "_"
- from: "-"
to: "_"
然后运行 fgen 命令：
fgen -s /path/to/your/flutter_project
生成的 resource.dart 文件将如下所示：
/// 由 [asset_generator](https://github.com/fluttercandies/flutter_asset_generator) 库生成。
/// 请勿手动编辑。
class R {
const R._();
/// 
static const String ASSETS_LOGO_PNG = 'assets/logo.png';
/// 
static const String ASSETS_ICON_PNG = 'assets/icon.png';
/// 
static const String IMAGES_USER_PNG = 'images/user.png';
/// 
static const String IMAGES_AVATAR_JPG = 'images/avatar.jpg';
}
这样，你就可以在 Flutter 项目中方便地引用这些资源文件了。
更多关于Flutter资源文件生成插件flutter_asset_generator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter资源文件生成插件flutter_asset_generator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何使用 flutter_asset_generator 插件来生成 Flutter 资源文件的示例代码和步骤。flutter_asset_generator 是一个用于自动生成 Flutter 项目中 JSON、YAML 等资源文件的 Dart 类的插件。尽管这个插件的具体实现和功能可能随时间有所变化，但以下示例将提供一个基本的指导。
1. 添加依赖
首先，你需要在你的 pubspec.yaml 文件中添加 flutter_asset_generator 依赖。
dependencies:
flutter:
sdk: flutter
flutter_asset_generator: ^x.y.z # 请替换为最新版本号
然后运行 flutter pub get 来获取依赖。
2. 创建资源文件
在你的 Flutter 项目中创建一个资源文件，例如 data/example.json。
{
"title": "Hello, Flutter!",
"description": "This is an example JSON file."
}
3. 配置 build.yaml
接下来，你需要在项目的根目录下创建一个或编辑现有的 build.yaml 文件，以配置 flutter_asset_generator。
targets:
$default:
builders:
flutter_asset_generator:
enabled: true
options:
output_extension: '.g.dart' # 生成的 Dart 文件扩展名
input_extensions: ['.json', '.yaml'] # 输入文件扩展名
globs:
example_assets:
include: 'data/*.json' # 指定要生成资源的文件模式
4. 生成 Dart 类
运行以下命令来生成 Dart 类文件：
flutter pub run build_runner build
如果配置正确，你应该会在 data/ 目录下看到一个新生成的 Dart 文件，例如 example.json.g.dart。
5. 使用生成的 Dart 类
现在你可以在你的 Flutter 应用中使用生成的 Dart 类来访问资源数据。例如：
import 'package:your_app_name/data/example.json.g.dart' as exampleData;
void main() {
print(exampleData.defaultData['title']); // 输出: Hello, Flutter!
print(exampleData.defaultData['description']); // 输出: This is an example JSON file.
}
注意：
your_app_name应该替换为你的实际 Flutter 项目名称。defaultData是根据flutter_asset_generator的默认配置生成的类名，具体名称可能会根据你的build.yaml配置有所不同。
注意事项
- 确保你的 Flutter 环境是最新的，以避免兼容性问题。
- 插件的具体配置和使用方法可能会随着版本的更新而变化，请参考插件的官方文档以获取最新信息。
- 如果你遇到任何问题，可以查看插件的 GitHub 仓库中的 Issues 页面，看看是否有其他人遇到并解决了类似的问题。
通过上述步骤，你应该能够成功地在 Flutter 项目中使用 flutter_asset_generator 插件来生成和使用资源文件。
