在 Flutter App 顯示專案裡的圖片

利用 Flutter 的 Image widget 我們可以方便地顯示專案裡的圖片。以下我們一步步示範如何在 VS Code 將圖片加入 Flutter 專案，然後利用 Image widget 顯示圖片。

• 在專案裡新增存放圖片的資料夾。
• 在資料夾下加入圖片。
• 在 pubspec.yaml 加入資料夾的路徑。
• 用 Image widget 顯示圖片。

在專案裡新增存放圖片的資料夾

打開 Flutter 專案，點選下圖紅色框框的按鈕新增資料夾。

輸入資料夾的名稱，在此彼得潘輸入 assets，通常我們會將存放圖片，音樂等素材的資料夾取名為 assets。如果想取其它名字也可以，而資料夾下也可加入子資料夾，比方在 assets 下新增 images、fonts、audio 等資料夾。

在資料夾下加入圖片

Flutter 主要支援的圖片格式有以下幾種。

JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP、WBMP。

彼得潘加入最近正在看的好書，熊熊沒事學英文.jpeg 和萬聖節派對.jpeg。加入圖片的方法有三種。

• 方法 1: 按下 cmd + c 複製圖片，然後在側邊欄按下 cmd + v 貼上。

按下 cmd + v 貼上時會出現以下視窗，再點選 Paste 貼上。(也可以點選 Do not ask me again，之後就不會再跳視窗)

ps: 從檔案的右鍵選單可點選 Rename 改名。

• 方法 2: 將圖片拖曳到下圖的 assets 資料夾。

• 方法 3: 從 Finder 將圖片存入 assets 資料夾。

在 pubspec.yaml 加入資料夾的路徑

為了讓 App 知道圖片所在的資料夾，我們必須在 pubspec.yaml 加入資料夾的路徑。

打開 pubspec.yaml，找到下圖 #assets: 的區塊，assets: 下方可加入多個路徑設定素材檔所在的資料夾。

移除 assets: 前的 #，在 assets: 的下方加入資料夾或檔案的路徑。

如下圖所示，路徑的寫法必須以-開頭，在-後有一個空白，然後再描述路徑。剛剛我們新增的資料夾名字是 assets，因此我們輸入 — assets/。記得資料夾的結尾一定要加 / ，如此才能找到資料夾下的檔案。

assets:
  - assets/

值得注意的，yaml 檔利用縮排表示結構，因此縮排要整齊，習慣上不同的階層會相差兩個空白，因此上圖的 assets: 前有 2 個空白，— assets/ 前有 4 個空白。

縮排有問題時可從 OUTPUT 看到類似下圖的錯誤訊息。

當 assets 設定的資料夾不存在時，yaml 也會貼心地警告我們 xxx doesn’t exist。

若有多層的資料夾，在 pubspec.yaml 記得要寫出完整的路徑。以下圖為例，假如彼得潘在 assets 資料夾下建立動畫和真人資料夾存放帥氣的海賊王圖片。

那麼在 pubspec.yaml 描述的資料夾路徑則要完整寫出 assets/真人/ 和 assets/動畫/。

assets:
  - assets/真人/
  - assets/動畫/

除了描述資料夾的路徑，我們也可以指定檔案的路徑，例如以下的 pic1.png & pic2.png。

assets:
  - assets/pic1.png
  - assets/pic2.png

用 Image widget 顯示圖片

編輯 main.dart，在 widget MyHomePage 裡顯示圖片。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

• 寫法 1

使用 Image.asset 生成 Image widget 顯示圖片。asset( ) 裡要描述完整的圖片路徑，因此 assets/熊熊沒事學英文.jpeg 才能找到圖片，只寫 熊熊沒事學英文.jpeg 會找不到圖片。

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Image.asset('assets/熊熊沒事學英文.jpeg'),
    );
  }
}

• 寫法 2

生成 Image widget 時傳入 AssetImage 設定圖片。

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Image(
        image: AssetImage('assets/熊熊沒事學英文.jpeg'),
      ),
    );
  }
}

如下圖所示，我們成功在模擬器上看到可愛的熊熊沒事學英文。

播放 gif

Flutter 支援多種圖片格式，播放 GIF 也不是問題。

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Image.asset('assets/apple.gif'),
    );
  }
}

控制 Flutter 圖片的大小和縮放

圖片顯示時的大小若想調整可參考以下連結。

控制 Flutter 圖片的大小和縮放

參考資源

Adding assets and images

Image class