你是否厭倦了在 Flutter 項目中手動管理圖像資產的繁瑣任務？

告別手工輸入資源路徑的痛苦，歡迎使用“Flutter Gen”高效資源管理的時代。在本文中，我將帶您從手動處理圖像資源的挫折到動態生成它們的便利。

選擇1：痛苦手動添加--管理圖像資產的傳統方法  ??

想象一下，你在 Flutter 的世界里 ，創建你很棒的應用程序。你有這些很酷的圖片，但問題是，你必須手動輸入這些圖片的路徑。這就像寫下美味蛋糕的食譜 ，但有很多機會把配料混在一起或拼錯 。這不好玩，對吧？

這是手動向項目添加圖像的方法：

1. 將所需的圖片添加到項目中的  assets  文件夾中。
2. 將圖像的路徑添加到  pubspec.yaml  文件中。
3. 直接在代碼中輸入路徑來獲取圖像。

圖片

選擇2：為所有資產創建一個常量變量  ??

讓我們創建一個名為  constants.dart  的常量文件，在這個文件中，創建一個名為  Constants  的類，這個類將包含存儲資源路徑的變量。

圖片

在代碼中直接使用這個變量來獲取圖像。

圖片

選擇3：動態生成資產 ????

現在，神奇的事情發生了，我們將使用一個包， flutter_gen[1]  一個 flutter 代碼生成器，用于我們的資產、字體、顏色等，以生成所需的資產。

將所需的包添加到  pubspec.yaml   文件中。

• 首先，在應用的依賴中添加  flutter_gen 。
• 然后，在你的應用的 dev_dependencies 中添加  flutter_gen_runner  和  build_runner 。
• 在終端中運行  flutter pub get 。

圖片

生成資產。

在終端中運行以下命令來生成所有資源：flutter packages pub run build_runner build。這將創建一個文件夾  lib/gen  ，在該文件夾中，將有一個名為  assets.gen.dart  的文件。該文件夾包含所有資產信息！

圖片

圖片

正如你所看到的，生成的文件有一個變量 dash，它保存了圖像的路徑。

在代碼中直接使用生成的文件來獲取圖像。

圖片

import 'package:asset_generation/gen/assets.gen.dart';
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Assets'),
      ),
      body: Center(
        child:
            // Image.asset('assets/dash.png'),
            // Image.asset(Constants.dashImage),
            Image.asset(Assets.dash.path),
      ),
    );
  }
}

可以將其視為擁有一位神奇的廚師 ??????，他可以隨時烹制新菜肴，而無需新食譜。想要向您的應用程序添加新圖像嗎？沒問題——Flutter Gen 為您提供支持。

如果您有興趣了解有關 flutter_gen 包的更多信息，我建議您查看官方文檔：https://pub.dev/packages/flutter_gen。

https://medium.com/flutter-community/streamlining-image-asset-management-b57b7fcb5b9d