今天要來分享一下靜態資源的放置這件事
在先前的文章中我們透過 Image.network 來存取網路上有的圖片資源
然而在我們 APP 中的某些圖片資源其實是不需要透過網路存取的
而是能過透過內部資源去做讀取顯示
那我們今天就稍微把這部分給實作過一次吧~

在這邊我們會先建立一個資料夾，慣例名稱會叫做 assets
裡頭便是我們所需要的圖片資料
準備好後我們可以到 pubspec.yaml 中將以下文字添加進去

flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png

若是打算一次匯入資料夾所有圖片的的話
則可透過

flutter:
  assets:
    - directory/
    - directory/subdirectory/

而這些被匯入的圖片會在 Flutter Runtime 被載入到特殊的檔案 asset 中

而在圖片匯入中，如果底層資料夾也擁有同樣命名的圖片檔
則最上層 match 到的會被稱作 main asset 而其餘的則會成為 variant

.../pubspec.yaml
.../graphics/my_icon.png
.../graphics/background.png
.../graphics/dark/background.png
...etc.

flutter:
  assets:
    - graphics/background.png

flutter:
  assets:
    - graphics

目前 Flutter 是透過這個方式來取得不同解析度下該呈現的圖片
但未來這部分功能還有可能會擴充 ~

讀取靜態資源

在這部分會透過 loadString() 以及 load() 來進行
前者負責文字資源的讀取
後者則是圖片資源的讀取

文字資源(Text)

import 'package:flutter/services.dart' show rootBundle;

Future<String> loadAsset() async {
  return await rootBundle.loadString('assets/config.json');
}

圖片資源(Image)

return const Image(image: AssetImage('graphics/background.png'));

如果要取得的圖片資源在 package 內部的話
則需要使用以下方式取得
主要是加上套件名稱

return const AssetImage('icons/heart.png', package: 'my_icons');

透過 AssetManager 以及 NSBundle
分別可以使 Android 及 iOS 取得圖片資源

Android

flutter:
  assets:
    - icons/heart.png

AssetManager assetManager = registrar.context().getAssets();
String key = registrar.lookupKeyForAsset("icons/heart.png");
AssetFileDescriptor fd = assetManager.openFd(key);

iOS

yaml 檔同上面

NSString* key = [registrar lookupKeyForAsset:@"icons/heart.png"];
NSString* path = [[NSBundle mainBundle] pathForResource:key ofType:nil];

也可透過 ios_platform_images
來簡易使用

[UIImage flutterImageWithName:@"icons/heart.png"];

UIImage.flutterImageNamed("icons/heart.png")

參考資料

強而有力的官網後盾