你是否厭倦了在 Flutter 項(xiàng)目中手動(dòng)管理圖像資產(chǎn)的繁瑣任務(wù)？

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

選擇1：痛苦手動(dòng)添加--管理圖像資產(chǎn)的傳統(tǒng)方法  ??

想象一下，你在 Flutter 的世界里 ，創(chuàng)建你很棒的應(yīng)用程序。你有這些很酷的圖片，但問(wèn)題是，你必須手動(dòng)輸入這些圖片的路徑。這就像寫(xiě)下美味蛋糕的食譜 ，但有很多機(jī)會(huì)把配料混在一起或拼錯(cuò) 。這不好玩，對(duì)吧？

這是手動(dòng)向項(xiàng)目添加圖像的方法：

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

圖片

選擇2：為所有資產(chǎn)創(chuàng)建一個(gè)常量變量  ??

讓我們創(chuàng)建一個(gè)名為  constants.dart  的常量文件，在這個(gè)文件中，創(chuàng)建一個(gè)名為  Constants  的類，這個(gè)類將包含存儲(chǔ)資源路徑的變量。

圖片

在代碼中直接使用這個(gè)變量來(lái)獲取圖像。

圖片

選擇3：動(dòng)態(tài)生成資產(chǎn) ????

現(xiàn)在，神奇的事情發(fā)生了，我們將使用一個(gè)包， flutter_gen[1]  一個(gè) flutter 代碼生成器，用于我們的資產(chǎn)、字體、顏色等，以生成所需的資產(chǎn)。

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

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

圖片

生成資產(chǎn)。

在終端中運(yùn)行以下命令來(lái)生成所有資源：flutter packages pub run build_runner build。這將創(chuàng)建一個(gè)文件夾  lib/gen  ，在該文件夾中，將有一個(gè)名為  assets.gen.dart  的文件。該文件夾包含所有資產(chǎn)信息！

圖片

圖片

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

在代碼中直接使用生成的文件來(lái)獲取圖像。

圖片

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),
      ),
    );
  }
}

可以將其視為擁有一位神奇的廚師 ??????，他可以隨時(shí)烹制新菜肴，而無(wú)需新食譜。想要向您的應(yīng)用程序添加新圖像嗎？沒(méi)問(wèn)題——Flutter Gen 為您提供支持。

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

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