【Flutter 學習筆記】Image 圖片元件

【Flutter 學習筆記】🎬 教學影片：連結

【Flutter 學習筆記】📚 文章目錄：連結

今天我們要一起來探索 Flutter 中的 Image 圖片元件。這一節課將會帶你從資源管理到圖片顯示，讓我們一步一步來了解如何在 Flutter 專案中使用圖片。

設定圖片資源

首先，我們需要為專案設定圖片資源。請打開左側的檔案總管，並在專案的根目錄下（注意，不要放在 lib 資料夾中）建立一個名為 assets 的資料夾。這是 Flutter 官方建議的做法，能夠讓專案的資源管理更加清晰。

在 assets 資料夾中，我們可以根據資源類型建立子資料夾，例如 images、audio、video 等，這樣可以讓專案的資源管理更有條理。切記，不要將資源檔案散落在專案的各個角落，統一放在 assets 資料夾中會更方便後續的維護。

接下來，在 assets 資料夾中新增一個 images 資料夾，並將事先準備好的 logo.png 圖片複製到這個資料夾中。你可以直接在檔案總管中操作，確認圖片是否正確放置。

註冊圖片資源

接下來，我們需要在 pubspec.yaml 檔案中註冊圖片資源路徑，以便 Flutter 專案能夠引用這些圖片。如果沒有註冊，Flutter 專案將無法找到圖片，程式碼會報錯。

在 pubspec.yaml 中，找到 flutter: 的部分，並新增以下內容：

flutter:
  assets:
    - assets/images/logo.png

注意，這裡的縮排非常重要，必須符合 YAML 格式規範，否則註冊會失敗。完成後，記得存檔，這樣修改才會生效。

在 VS Code 中，當你在編輯 pubspec.yaml 時，使用快捷鍵存檔，VS Code 會自動執行 pub get 指令，更新專案的資源設定。

測試圖片顯示

現在，我們來開啟 demo_page.dart 檔案，並在 build 方法中加入一個 Center Widget，這樣可以將圖片顯示在畫面中央。以下是程式碼範例：

@override
Widget build(BuildContext context) {
  return Center(
    child: Image.asset('assets/images/logo.png', width: 100),
  );
}

在 Image.asset 中，我們指定了圖片的路徑，並設定了圖片的寬度為 100。完成後，使用快捷鍵存檔，啟用 Hot Reload 功能，你會看到圖片正中央顯示出來。

載入網路圖片

除了載入本地圖片，我們也可以載入網路圖片。首先，打開知名的圖床網站 imgur.com，點擊左上角的 "New post" 上傳一張圖片。上傳成功後，複製圖片的網址。

接著，我們將 Image.asset 改為 Image.network，並將小括號內的路徑更改為剛剛複製的圖片網址，記得加上副檔名，例如 .png。以下是範例程式碼：

@override
Widget build(BuildContext context) {
  return Center(
    child: Image.network('https://example.com/path/to/image.png', width: 100),
  );
}

同樣地，使用快捷鍵存檔，啟用 Hot Reload 功能，你會看到網路圖片也能正確顯示在畫面中央。