前言

大家好！在 Day 23，我們成功地讓主畫面的總支出卡片動了起來，至此，App 的所有核心功能都已具備即時數據驅動的能力。我們的「省錢拍拍」已經是一個功能強大的雲端應用。

今天起，我們的角色將從「功能開發者」轉變為「產品發布者」。在軟體的世界裡，「第一印象」至關重要。而使用者在手機桌面上對我們 App 的第一印象，並不是精美的 UI 或強大的 AI，而是那一小塊方形的應用程式圖示。

一個預設的 Flutter 圖示會立刻讓 App 顯得業餘。今天，我們將使用 flutter_launcher_icons 這個強大的套件，從一張高解析度的圖片，自動生成所有 Android 和 iOS 平台所需的、尺寸各異的專業 App 圖示。

Step 1: 準備你的圖示檔案

首先，需要一張代表你 App 品牌的核心圖片。

• 尺寸：建議至少 1024x1024 像素，必須是正方形。
• 格式：PNG 格式為佳，支援透明背景。
• 設計建議：現代的 App 圖示（特別是在 Android 上）多採用「自適應圖示 (Adaptive Icons)」，它分為背景和前景兩層。因此，最好的做法是準備一個透明背景的 Logo 作為「前景」，再另外指定一個「背景色」。

你可以使用任何設計工具或 AI 繪圖工具 生成 Logo（例如一個相機圖案加上錢幣符號），並將它存放在專案的一個新路徑下，請在專案根目錄下建立一個 assets/icon 資料夾，並將圖檔存放於此，例如：assets/icon/icon_foreground.png。

Step 2: 加入套件並進行設定

flutter_launcher_icons 是一個開發階段的工具，它不會被打包進最終的 App 中，所以我們將它加入 dev_dependencies。

1. 在終端機執行以下指令，它會自動抓取最新穩定版並加入 pubspec.yaml。：

flutter pub add --dev flutter_launcher_icons

注意: 要加上 --dev 才會被加入到 dev_dependencies

2. 進行設定：在 pubspec.yaml 的最外層（與 flutter: 和 dependencies: 同級），加入 flutter_launcher_icons 的設定區塊。

# pubspec.yaml (最外層)
flutter_launcher_icons:
  # === Android 設定 ===
  android: true
  image_path: "assets/icon/icon_foreground.png" # 指定前景圖示路徑
  min_sdk_android: 23 # 需與 android/app/build.gradle 中的 minSdkVersion 保持一致
  # -- Android 自適應圖示設定 --
  adaptive_icon_background: "#4CAF50" # 背景色 (例如：綠色)
  adaptive_icon_foreground: "assets/icon/icon_foreground.png" # 前景圖示路徑

  # === iOS 設定 ===
  ios: true
  # iOS 不支援自適應圖示，會自動使用 image_path 並填滿
  # remove_alpha_ios: true # 如果你的 iOS 圖示不需要透明效果，可以設為 true

• image_path: 作為 iOS 圖示和舊版 Android 圖示的主要來源。
• adaptive_icon_background: Android 自適應圖示的背景層，可以是顏色代碼或圖片路徑。
• adaptive_icon_foreground: Android 自適應圖示的前景層（通常是你的 Logo），系統會自動縮放它。

完成設定後，儲存 pubspec.yaml。

Step 3: 執行指令，一鍵生成圖示

設定完成後，我們只需要在終端機中執行一個指令：

flutter pub run flutter_launcher_icons

執行後，你會看到終端機輸出一系列的訊息。這代表套件正在讀取你的設定，並自動在 android/app/src/main/res 和 ios/Runner/Assets.xcassets 這兩個原生資料夾中，生成所有尺寸正確的圖示檔案並覆蓋掉預設圖示。

Step 4: 驗證結果

指令執行成功後，讓我們來驗證成果。

1. 徹底關閉 App：如果你的 App 還在模擬器或實體機上運行，請先將其完全關閉。
2. 卸載舊版 App：為了避免作業系統快取舊圖示，建議先從設備上卸載「省錢拍拍」。
3. 重新運行：在你的 IDE 或終端機中，重新執行 flutter run。

安裝完成後，回到手機桌面或應用程式列表，你將會看到「省錢拍拍」已經換上了你為它精心設計的全新圖示！

今日結語

今天我們完成了 App 品牌化的第一步，也是視覺上最重要的一步。透過 flutter_launcher_icons 套件，我們學會了：

1. 如何區分 dependencies 與 dev_dependencies。
2. 在 pubspec.yaml 中進行套件設定，包括 Android 的自適應圖示。
3. 使用一個指令，自動化生成所有平台的 App 圖示。

我們的 App 現在在手機桌面上，終於有了自己的專屬樣貌。但當使用者點擊圖示打開 App 的那一瞬間，會先看到非常基本的預設啟動畫面。

在較新的 Android 版本上，系統會自動抓取您的 App 圖示 (icon) 和一個背景色，組合成一個簡易的啟動畫面。

明天，我們將解決這個問題，為 App 設計一個華麗的登場動畫——啟動畫面 (Splash Screen)。我們將使用 flutter_native_splash 套件，在 App 打開的瞬間展示我們的品牌 Logo，讓使用者的第一次接觸就充滿驚喜。