Flutter自动生成资源插件flutter_generate_assets的使用

Flutter自动生成资源插件flutter_generate_assets的使用

flutter_generate_assets

flutter_generate_assets 是一个用于帮助 Flutter 开发者自动生成资源对应的 Dart 文件的库。通过该库，开发者可以减少重复的手动工作，提高开发效率。

该库基于 dartlang 的构建库（build library）。

使用

使用源码

  1. 首先将 dart 和 pub 添加到环境变量 $PATH 中。
  2. 克隆项目并获取依赖项：
git clone https://github.com/cherrybiu/flutter_generate_assets.git
cd flutter_generate_assets
pub get
  1. 运行生成器脚本：
dart bin/resource_generator.dart -s $flutter_project

使用 pub global

  1. 安装插件：
pub global activate flutter_generate_assets
  1. 使用插件：
sgen

或者

sgen -s $flutter_project

支持的选项

使用 sgen -h 或 sgen --help 查看完整的使用文档。

sgen -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 项目的根目录下的 sgen.yaml 文件。

排除和包含规则

配置文件格式为 YAML，每个元素都是 glob 样式。

  • exclude 节点下是需要排除的文件名，类型为字符串数组。如果没有规则，则表示没有文件被排除。
  • include 节点下是需要导入的文件名，类型也是字符串数组。如果没有规则，则所有文件都允许。

优先级上，排除规则高于包含规则，即首先根据包含规则导入文件，然后排除指定文件。

示例

exclude:
  - "**/add*.png"
  - "**_**"

include:
  - "**/a*.png"
  - "**/b*"
  - "**/c*"

文件结构如下：

assets
├── address.png   # 被 "**/add*.png" 排除
├── address@at.png  # 被 "**/add*.png" 排除
├── bluetoothon-fjdfj.png
├── bluetoothon.png
└── camera.png

images
├── address space.png  # 被 "**/add*.png" 排除
├── address.png  # 被 "**/add*.png" 排除
├── addto.png  # 被 "**/add*.png" 排除
├── audio.png
├── bluetooth_link.png  # 被 "**_**" 排除
├── bluetoothoff.png
├── child.png
└── course.png

生成的 Dart 文件如下：

/// 由 [resource_generator](https://github.com/cherrybiu/flutter_generate_assets) 库生成。
/// 请勿手动编辑。
class R {

  /// ![preview](file:///Users/cherrybiu/code/dart/self/flutter_generate_assets/example/assets/bluetoothon-fjdfj.png)
  static const String ASSETS_BLUETOOTHON_FJDFJ_PNG = 'assets/bluetoothon-fjdfj.png';

  /// ![preview](file:///Users/cherrybiu/code/dart/self/flutter_generate_assets/example/assets/bluetoothon.png)
  static const String ASSETS_BLUETOOTHON_PNG = 'assets/bluetoothon.png';

  /// ![preview](file:///Users/cherrybiu/code/dart/self/flutter_generate_assets/example/assets/camera.png)
  static const String ASSETS_CAMERA_PNG = 'assets/camera.png';

  /// ![preview](file:///Users/cherrybiu/code/dart/self/flutter_generate_assets/example/images/audio.png)
  static const String IMAGES_AUDIO_PNG = 'images/audio.png';

  /// ![preview](file:///Users/cherrybiu/code/dart/self/flutter_generate_assets/example/images/bluetoothoff.png)
  static const String IMAGES_BLUETOOTHOFF_PNG = 'images/bluetoothoff.png';

  /// ![preview](file:///Users/cherrybiu/code/dart/self/flutter_generate_assets/example/images/child.png)
  static const String IMAGES_CHILD_PNG = 'images/child.png';

  /// ![preview](file:///Users/cherrybiu/code/dart/self/flutter_generate_assets/example/images/course.png)
  static const String IMAGES_COURSE_PNG = 'images/course.png';
}

更多关于Flutter自动生成资源插件flutter_generate_assets的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自动生成资源插件flutter_generate_assets的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_generate_assets 是一个Flutter插件，用于自动生成资源文件的引用代码，帮助开发者更轻松地管理和使用资源文件（如图片、字体、JSON文件等）。通过使用该插件，你可以避免手动编写资源引用的麻烦，减少错误并提高开发效率。

安装

首先，你需要在 pubspec.yaml 文件中添加 flutter_generate_assets 插件的依赖：

dev_dependencies:
  flutter_generate_assets: ^1.0.0

然后，运行 flutter pub get 来安装插件。

配置

  1. 指定资源路径：在 pubspec.yaml 文件中，确保你已经在 flutter 部分指定了资源文件的路径。例如：

    flutter:
  assets:
    - assets/images/
    - assets/fonts/
    - assets/data/

  2. 生成资源引用代码：在项目根目录下创建一个 build.yaml 文件，用于配置 flutter_generate_assets 插件的生成规则。例如：

    targets:
  $default:
    builders:
      flutter_generate_assets:
        options:
          output: lib/generated/assets.dart

    在这个配置中，output 指定了生成的Dart文件路径。

使用

  1. 运行生成命令：在终端中运行以下命令来生成资源引用代码：

    flutter pub run build_runner build

    这将会在 lib/generated/assets.dart 文件中生成资源引用的代码。

  2. 引用资源：在生成的 assets.dart 文件中，你会看到类似以下的代码：

    class Assets {
  static const String imagesLogoPng = 'assets/images/logo.png';
  static const String fontsRobotoTtf = 'assets/fonts/Roboto.ttf';
  static const String dataConfigJson = 'assets/data/config.json';
}

    现在，你可以在代码中直接使用这些常量来引用资源文件。例如：

    import 'generated/assets.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Image.asset(Assets.imagesLogoPng);
  }
}
回到顶部