在 Flutter 中使用 flutter_gen 簡(jiǎn)化圖像資產(chǎn)管理
你是否厭倦了在 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)目添加圖像的方法：
- 將所需的圖片添加到項(xiàng)目中的 assets 文件夾中。
- 將圖像的路徑添加到 pubspec.yaml 文件中。
- 直接在代碼中輸入路徑來(lái)獲取圖像。
圖片
選擇2：為所有資產(chǎn)創(chuàng)建一個(gè)常量變量 ??
讓我們創(chuàng)建一個(gè)名為 constants.dart 的常量文件，在這個(gè)文件中，創(chuàng)建一個(gè)名為 Constants 的類(lèi)，這個(gè)類(lèi)將包含存儲(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
