【Flutter】assets images 图片资源统一管理

Android Studio 使用 Flutter Assets Generator 插件来协助自动生成图片资源的引用文件。

安装 Flutter Assets Generator 插件

1. 打开 Android Studio。
2. 转到 File > Settings（在 macOS 上是 Android Studio > Preferences）。
3. 在设置窗口中，选择 Plugins。
4. 在搜索框中输入 Flutter Assets Generator 并找到该插件。
5. 点击 Install 按钮安装插件。
6. 安装完成后，点击 Restart IDE 重启 Android Studio。

使用 Flutter Assets Generator 插件

1. 打开你的 Flutter 项目。
2. 在项目视图中，向你希望生成资源引用的目录（通常是 assets 目录）添加图片资源。
3. 插件会自动生成一个 Dart 文件（默认是 assets.dart），并将其放在你指定的目录中（通常是 lib/generated 目录）。
4. 生成的文件中会包含所有资源的引用，你可以通过这个文件来访问资源。

示例生成的文件

假设你有以下目录结构：

- assets/
  - images/
    - logo.png
    - background.jpg
  - icons/
    - icon_home.png
    - icon_profile.png

生成的 assets.g.dart 文件可能如下所示：

class Assets {
  Assets._();

  static const String imagesLogoPng = 'assets/images/logo.png';
  static const String imagesBackgroundJpg = 'assets/images/background.jpg';
  static const String iconsIconHomePng = 'assets/icons/icon_home.png';
  static const String iconsIconProfilePng = 'assets/icons/icon_profile.png';
}

使用生成的资源

在你的 Flutter 代码中，你可以通过 Assets 类来访问这些资源。例如：

import 'package:your_project/assets.g.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Image.asset(Assets.imagesLogoPng),
        Image.asset(Assets.imagesBackgroundJpg),
        Image.asset(Assets.iconsIconHomePng),
        Image.asset(Assets.iconsIconProfilePng),
      ],
    );
  }
}

更新资源

每次你添加、删除或修改资源文件时，插件会自动更新生成的文件。

注意事项

• 确保你的 pubspec.yaml 文件中已经正确配置了资源路径。

# ...

flutter:

  assets:
    - assets/images/
    - assets/images/login/

# ...

通过使用 Flutter Assets Generator 插件，你可以大大简化图片资源的管理和引用工作，提高开发效率。