Flutter资源管理插件flutter_assets的使用

Flutter资源管理插件flutter_assets的使用

帮助你在Flutter开发中快速生成图片资源相关代码。

开始使用

在pubspec.yaml文件中添加依赖

在你的项目的pubspec.yaml文件中添加如下依赖：

dev_dependencies:
  flutter_assets: ^0.0.4

设置图片路径

在使用插件之前，你需要设置图片的存放路径。默认情况下，图片资源存放路径为assets/images。

使用方法

步骤1：创建并编辑test.dart文件

在测试目录下创建一个test.dart文件，并输入如下代码：

void main() async {
  test('RefreshAssets', () async {
    /// projectPath: 项目路径，自动读取项目根目录
    /// imagePath: 图片资源存放路径, 默认 assets/images
    /// codePath: 代码生成路径, 默认使用 lib/app_res
    /// codeName: 代码生成文件名称，默认使用 app_image
    /// className: 生成的类名，默认使用 AppImages
    /// maxLineLength: 代码单行最大长度
    /// lengthSort: 是否按名字长短排序 默认false ，按字母排序
    await FlutterAssets.refreshImages(
      projectPath: "", // 留空表示自动读取项目根目录
      imagePath: "assets/images", // 设置图片资源存放路径
      codePath: "lib/app_res", // 设置代码生成路径
      codeName: "app_image", // 设置代码生成文件名称
      className: "AppImages", // 设置生成的类名
      maxLineLength: 80, // 设置代码单行最大长度
      sortByLength: false, // 是否按名字长短排序，默认为false，按字母排序
    );
  });
}

步骤2：点击test.dart文件中的运行按钮，生成图片资源代码

点击test.dart文件中的运行按钮以生成图片资源代码。

运行成功

运行成功后，你会看到控制台输出成功的消息。

自动生成文件

运行成功后，会自动生成相关的文件。

第一次运行成功后，在Android Studio顶部工具栏中可以看到RefreshAssets

在Android Studio的顶部工具栏中，你可以看到RefreshAssets，以后可以直接选择该选项进行一键运行。

再次运行成功

再次运行成功后，你会看到控制台输出成功的消息。

示例代码

以下是使用插件生成的代码示例：

import 'package:example/app_res/app_image.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Wrap(
          spacing: 10,
          runSpacing: 10,
          children: [
            Image.asset(AppImages.stopCircleFill, width: 50, height: 50),
            Image.asset(AppImages.pauseCircleFill, width: 50, height: 50),
            Image.asset(AppImages.playCircleFill, width: 50, height: 50),
          ],
        ),
      ),
    );
  }
}