Flutter资源文件生成插件asset_file_generator的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter资源文件生成插件asset_file_generator的使用

Asset File Generator 是一个简单的命令行工具，用于生成包含类的文件，该类将给定目录中的所有资源映射到唯一的变量名。

如何使用？

在终端运行以下命令以激活包：

dart pub global activate asset_file_generator

要直接从命令行运行脚本，请将系统缓存 bin 目录添加到您的 PATH 环境变量。添加路径后，运行以下命令以获取帮助：

afg -h

可用参数：

-a, --asset-path                 资源文件所在的目录路径（默认为"."）
-e, --export-path                导出文件的目录路径（默认为"."）
-c, --class-suffix               附加到生成类名称的后缀（默认为"Assets"）
-f, --allowed-file-extentions    将包括的文件扩展名（默认为"png-svg-jpg-jpeg-gif-json"）
-h, --help                       显示帮助信息
-s, --single-file                为所有资产生成单个文件
-m, --multiple-files             基于目录生成多个文件
-w, --watch                      监视目录更改并重新生成文件

规则：

  • 文件名应为小写。
  • 多个单词的资源文件应使用 '_ ' 或 '-' 进行分隔。
  • 推荐将所有资产移动到同一目录下然后生成文件。
  • 推荐为导出文件创建单独的目录。

示例代码

假设你已经创建了一个 Flutter 项目，并且已将所有资源文件放入项目的根目录下的 assets 文件夹中。现在，让我们假设你有一个导出目录来保存所有生成的文件。

创建单个文件用于所有资产：
afg -s -a ./assets -e ./export
创建多个文件用于所有资产：

生成的文件数量取决于你有多少不同的子目录。

afg -m -a ./assets -e ./export
开始监视目录中的更改：

此标志会每次目录内容被添加、删除或修改时生成文件。这可以与上述任何命令结合使用。

afg -w -a ./assets -e ./export
允许特定扩展名的文件：

如果你需要 asset_file_generator 只选择某些文件扩展名，则可以通过添加 -f 参数实现。

afg -m -a ./assets -e ./export -f png-svg-jpg-jpeg-gif-json

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用asset_file_generator插件来生成资源文件的示例代码和步骤。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  asset_file_generator: ^x.y.z  # 请替换为最新版本号

然后运行以下命令来安装依赖：

flutter pub get

配置插件

asset_file_generator插件通常用于在构建时自动生成资源文件。假设你有一个模板文件template.txt，并且你想根据这个模板生成多个资源文件。

  1. 创建模板文件

在你的assets文件夹中创建一个名为template.txt的文件，内容可以是：

Hello, {name}!
  1. 添加配置

在pubspec.yaml文件中添加模板文件作为资源：

flutter:
  assets:
    - assets/template.txt
  1. 使用插件生成资源文件

在build.gradle或build.gradle.kts中配置asset_file_generator任务（以build.gradle为例）：

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterProjectDir/.android/include_flutter.groovy"

// 添加以下内容来配置asset_file_generator
task generateAssets(type: Exec) {
    commandLine 'flutter', 'pub', 'run', 'asset_file_generator:generate'
    args '--template', 'assets/template.txt', '--output', 'assets/generated', '--data', '{"name1":"Alice", "name2":"Bob"}'

    doLast {
        println 'Assets generated successfully!'
    }
}

preBuild.dependsOn generateAssets

注意：这里的--data参数是一个JSON字符串，用于传递给插件模板替换的数据。

编写生成脚本

在flutter项目根目录创建一个tool文件夹，并在其中添加一个generate_assets.dart文件，内容如下：

import 'package:asset_file_generator/asset_file_generator.dart';
import 'dart:convert';

void main() async {
  // 读取模板文件
  String templateContent = await Dart.io.File('assets/template.txt').readAsString();

  // 替换数据
  Map<String, String> data = jsonDecode('{"name1":"Alice", "name2":"Bob"}') as Map<String, String>;
  List<String> generatedFiles = [];

  for (String key in data.keys) {
    String generatedContent = templateContent.replaceAll('{name}', data[key]!);
    String outputPath = 'assets/generated/${key}.txt';
    await Dart.io.File(outputPath).writeAsString(generatedContent);
    generatedFiles.add(outputPath);
  }

  print('Generated files: $generatedFiles');
}

请注意，这里的代码是假设的，因为asset_file_generator插件的具体使用方式可能有所不同。你可能需要根据插件的实际文档来调整脚本。

运行生成任务

你可以在命令行中运行以下命令来手动触发资源文件的生成：

flutter pub run asset_file_generator:generate --template assets/template.txt --output assets/generated --data '{"name1":"Alice", "name2":"Bob"}'

或者，如果你已经在build.gradle中配置了任务，只需运行：

flutter build android

这将会触发preBuild任务，并调用generateAssets任务来生成资源文件。

使用生成的资源文件

在你的Flutter代码中，你可以像使用其他资源文件一样使用生成的资源文件：

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Asset File Generator Example'),
        ),
        body: Center(
          child: FutureBuilder<String>(
            future: rootBundle.loadString('assets/generated/name1.txt'),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.hasError) {
                  return Text('Error: ${snapshot.error}');
                } else {
                  return Text(snapshot.data!);
                }
              } else {
                return CircularProgressIndicator();
              }
            },
          ),
        ),
      ),
    );
  }
}

这段代码会从assets/generated/name1.txt中加载并显示内容。

请根据你使用的asset_file_generator插件的具体文档和版本进行调整。上述代码和步骤提供了一个基本的框架和思路。

回到顶部