1. 程式人生 > 其它 >在 Flutter 中顯示本地圖片

在 Flutter 中顯示本地圖片

技術標籤:Flutter 開發flutter圖片資源android

在 Flutter 中顯示本地圖片


1. 建立圖片資源目錄

首先要建立圖片資源目錄,以存放圖片。

在專案根目錄,建立一個 assets 目錄,在它的下面,建立一個叫 images 的子目錄,用於存放圖片資源:

/assets/images/

2. 將本地圖片新增到資源目錄

將我們需要用到的圖片,新增到 /assets/images/ 目錄中。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-2FOBtSpi-1609240082246)(evernotecid://6FE75482-54A0-433A-9625-A01F7FEE92EC/appyinxiangcom/9896050/ENResource/p2982)]

3. 在 pubspec.yaml 中註冊

將圖片目錄配置到 pubspec.yaml 檔案中:

flutter:
  assets:
    - assets/images/

上面將整個圖片目錄進行了註冊,這時我們就可以使用了。

當然,如果只想註冊一張圖片,我們可以這麼做:

flutter:
  assets:
    - assets/images/task_icon.jpg

4. 圖片使用

現在,可以直接在程式碼中使用圖片了:

Image.asset('assets/images/task_icon.jpg')

Flutter Image 是顯示圖片的一個 Widget。Image.asset(String name):從 AssetBundler 中獲取圖片。


**PS:更多精彩內容,請檢視 --> 《Flutter 開發》
**PS:更多精彩內容,請檢視 --> 《Flutter 開發》
**PS:更多精彩內容,請檢視 -->

《Flutter 開發》