前言

大家好！昨天我們為「省錢拍拍」換上了獨一無二的 App 圖示，並深入探討了「系統預設啟動畫面」與「客製化啟動畫面」的本質區別。我們得出的結論是：為了追求專業、流暢的使用者體驗，我們必須消除那個在 App 啟動過程中一閃而過的「白屏」。

今天，我們就來親手解決這個問題。我們將使用 flutter_native_splash 這個強大的套件，為 App 打造一個原生、高效且美觀的啟動畫面（Splash Screen）。完成後，使用者從點擊圖示到看見 App 主畫面的整個過程，將會是無縫接軌、體驗一致的。

Step 1: 準備啟動畫面的 Logo 素材

啟動畫面通常會顯示 App 的核心 Logo。我們可以沿用 Day 24 製作 App 圖示時所使用的前景 Logo 檔案。

1. 確認圖片：確保你有一張解析度足夠、背景透明的 Logo 圖片（例如 icon_foreground.png）。
2. 整理路徑：為了讓專案結構更清晰，建議在 assets 資料夾下建立一個專門的 splash 資料夾，並將 Logo 圖片複製進去，例如：assets/splash/icon_foreground.png。

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

與 flutter_launcher_icons 類似，這個套件也是一個開發階段的工具，所以我們將它加入 dev_dependencies。

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

flutter pub add --dev flutter_native_splash

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

# pubspec.yaml (最外層)
flutter_native_splash:
  # --- 通用設定 ---
  # 啟動畫面的背景色
  color: "#18f0c5"
  # Logo 圖片路徑
  image: assets/splash/icon_foreground.png

  # (可選) 深色模式下的設定
  # color_dark: "#000000"
  # image_dark: assets/splash/logo_dark.png

  # --- Android 12+ 特有設定 ---
  # Android 12 引入了新的啟動畫面標準，需要單獨設定
  android_12:
    image: assets/splash/icon_foreground.png
    icon_background_color: "#FFFFFF"
    # image_dark: assets/splash/logo_dark.png
    # icon_background_color_dark: "#000000"

  # --- iOS & Web 設定 ---
  ios: true
  web: false

• color: 啟動畫面的通用背景色（十六進位色碼）。
• image: 我們 Logo 的路徑。
• android_12: 為了適配 Android 12 以上系統的新啟動畫面 API，我們需要提供一個獨立的設定。為了保持一致性，我們通常使用相同的圖片和顏色。

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

Step 3: 執行指令，一鍵生成啟動畫面

設定完成後，我們只需要在終端機中執行一個指令，套件就會為我們處理所有原生的複雜設定。

flutter pub run flutter_native_splash:create

執行後，你會看到終端機報告它正在更新 Android 和 iOS 的原生檔案。它會自動修改 LaunchScreen.storyboard (iOS)、styles.xml (Android) 等，將我們的設定應用進去。

Step 4: 驗證無縫的啟動體驗

要驗證啟動畫面是否成功，Hot Restart 是無效的，因為它不會重新執行 App 的原生啟動流程。你必須模擬使用者「冷啟動 (Cold Start)」App 的過程。

1. 徹底關閉 App：在你的模擬器或實體機上，從最近使用的應用程式列表中，將「省錢拍拍」滑掉，確保它已完全關閉。
2. 重新啟動：回到手機桌面，點擊我們在 Day 24 製作好的新圖示，重新打開 App。

現在，你應該會看到我們設定好的 Logo 和背景色立刻出現，並且持續顯示，直到 AuthGate 或 HomePage 的內容完全載入後，才無縫地切換過去。中間那惱人的「白屏」瞬間，已經消失了！

今日結語

今天我們透過 flutter_native_splash 套件，成功地為 App 打造了一個專業、流暢的登場體驗，徹底解決了啟動白屏的問題。我們學會了：

1. 理解客製化啟動畫面的重要性。
2. 如何在 pubspec.yaml 中設定 flutter_native_splash，包括為 Android 12 進行特殊設定。
3. 使用一個指令，自動化生成所有平台的原生啟動畫面。

至此，App 的「門面」（圖示）和「迎賓紅毯」（啟動畫面）都已煥然一新。

從明天開始，我們將進入整個系列最接近市場的一步：應用程式打包 (Packaging)。我們將專注於 Android 平台，學習如何設定版本號、產生一個可用於發布到 Google Play 商店的簽署版 App Bundle (AAB) 檔案。