Flutter资源生成插件asset_generator的使用

Asset Generator 是一个Dart包，它通过为资源路径生成代码并预缓存图像来简化Flutter项目中的资源管理。

特性

• 生成资源路径：使用命令 flutter pub run asset_generator:generate 自动生成Dart代码。
• 计算变量数量：使用命令 flutter pub run asset_generator:count 计算项目中使用的变量数量。
• 替换变量：使用命令 flutter pub run asset_generator:replace 将变量值替换为变量名称。
• 导入图像类：使用命令 flutter pub run asset_generator:replace -import 将变量值替换为变量名称并导入图像类。

安装

在你的 pubspec.yaml 文件中添加 asset_generator：

dev_dependencies:
  asset_generator: ^1.3.0

asset_generator:
  images:
    - assets/images/
  
  icons:
    - assets/svg/
  
  output_dir: lib\omar\generated_images.dart #可选
  class_name: Assets  #可选

命令

生成资源路径

生成Dart代码用于资源路径

flutter pub run asset_generator:generate

该命令将在 output_dir 中生成文件，并根据YAML配置中的信息命名类名。

import 'package:flutter/material.dart';

class Assets {
  // 这些图像是在YAML文件中的images部分定义的
  static const String cartActive = 'assets/images/cart-active.png'; 
  static const String cartInactive = 'assets/images/cart-inactive.png';
  static const String check = 'assets/images/check.png'; 

  // 这些图像是在YAML文件中的icons部分定义的
  static const String notificationActive = 'assets/svg/notification-active.svg';
  static const String notification = 'assets/svg/notification.svg';
  static const String seacrh = 'assets/svg/seacrh.svg';
}

Future<void> myPrecacheImage(BuildContext context) async {
  await Future.wait([
    // 这些图像是在YAML文件中的icons部分定义的
    precacheImage(const AssetImage(Assets.notificationActive), context),
    precacheImage(const AssetImage(Assets.notification), context),
    precacheImage(const AssetImage(Assets.seacrh), context),
  ]);
}

计算变量数量

计算项目中使用的变量数量

flutter pub run asset_generator:count

注意：必须先使用生成资源路径命令才能使用此命令。

import 'package:flutter/material.dart';

class Assets {
  // 将放置图像使用的次数
  static const String cartActive = 'assets/images/cart-active.png'; // 使用了2次
  static const String cartInactive = 'assets/images/cart-inactive.png'; // 使用了1次
  static const String check = 'assets/images/check.png'; // 使用了2次

  static const String notificationActive = 'assets/svg/notification-active.svg'; // 使用了5次
  static const String notification = 'assets/svg/notification.svg'; // 使用了0次
  static const String seacrh = 'assets/svg/seacrh.svg'; // 使用了1次
}

Future<void> myPrecacheImage(BuildContext context) async {
  await Future.wait([
    // 这些图像是在YAML文件中的icons部分定义的
    precacheImage(const AssetImage(Assets.notificationActive), context),
    precacheImage(const AssetImage(Assets.notification), context),
    precacheImage(const AssetImage(Assets.seacrh), context),
  ]);
}

替换变量

将变量值替换为变量名称

flutter pub run asset_generator:replace

将变量值替换为变量名称并导入类（如果未导入）

flutter pub run asset_generator:replace -import

示例：上述命令将把 'assets/images/cart-active.png' 替换为 Assets.cartActive。

示例代码

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Asset Generator Example')),
        body: Center(
          child: Image.asset(Assets.cartActive),
        ),
      ),
    );
  }
}