【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 功能，你會看到網路圖片也能正確顯示在畫面中央。
