經過了前兩天嚴謹的單元與整合測試，已經為App的內在品質建立了後盾。現在是時候將目光從內部轉向外部，為我們的App打造一個吸引人的「第一印象」了。畢竟，在使用者體驗我們的核心功能之前，他們最先接觸到的是App 的圖示 (Icon) 和啟動畫面 (Splash Screen)。

今天將扮演半個設計師和半個工程師的角色。任務分為兩部分：首先，要使用線上工具為「靈感App」製作一個獨一無二的App Icon；接著，利用flutter_native_splash 套件來設定一個專業、無縫的啟動畫面。

一、使用線上工具製作App Icon

對於許多開發者來說，設計可能不是我們的強項。但現在有許多出色的線上工具可以幫助我們快速產出高品質的設計。

設計思路：

在動手之前，先思考「靈感App」這個名字希望傳達什麼感覺：

• 核心元素：「三」、「靈感」、「卡片」。
• 氛圍：簡潔、現代、啟發性。

綜合以上幾點，一個可能的設計方向是：三張堆疊的卡片，或是由三個幾何圖形組成的燈泡。顏色可以選用能激發創造力的藍色或紫色調。

製作流程：

Step1. 選擇工具：我選擇使用像Canva這類對非設計師極為友善的線上平台。它提供了大量的模板和圖形元素，可以讓我們快速組合出想要的設計。

Step2.設計主視覺：在Canva中，我們建立一個1024x1024像素的畫布。接著，從元素庫中挑選合適的圖形（如卡片或燈泡），調整顏色和佈局，直到滿意為止。

Step3.生成所有尺寸App需要為Android和iOS提供數十種不同尺寸的圖示。手動一個個縮放既繁瑣又容易出錯。這時，可以使用「App Icon Generator」這類線上服務，只需上傳我們設計好的1024x1024高解析度圖片，它就能自動生成一個包含所有平台所需圖示尺寸的壓縮檔。

Step4.替換專案檔案：將生成好的圖示檔案，分別放到Android(android/app/src/main/res/)和iOS (ios/Runner/Assets.xcassets/)對應的資料夾中，替換掉Flutter預設的圖示。

二、使用 flutter_native_splash 設定啟動畫面

啟動畫面是使用者點擊App Icon後，到App主畫面完全載入前所看到的過渡畫面。一個好的啟動畫面應該是即時的、簡潔的，並能強化品牌形象。

Flutter App在啟動時需要一點時間來載入Dart VM和Flutter引擎。如果我們用Dart來寫啟動畫面，會在使用戶點擊圖示後出現短暫的白屏，然後才顯示我們寫的畫面，體驗不佳。

為了解決這個問題，我將採用flutter_native_splash套件。它能幫助我們設定一個原生的啟動畫面，這個畫面會在App載入的第一時間由作業系統直接渲染，從而實現無縫的啟動體驗。

實作步驟：
Step1. 加入依賴：在pubspec.yaml中加入flutter_native_splash。

Step2. 設定組態：同樣在pubspec.yaml中，加入flutter_native_splash的設定區塊。我們可以指定背景顏色、啟動畫面上顯示的Logo圖片（可以直接使用剛做好的 App Icon）、以及圖片在深色模式下的樣式。

flutter_native_splash:
  color: "#FFFFFF"
  image: assets/splash_logo.png
  color_dark: "#121212"
  image_dark: assets/splash_logo_dark.png

Step3. 執行生成命令：在終端機中執行以下命令:
flutter pub run flutter_native_splash:create
這個命令會讀取你的設定，並自動在 Android 和 iOS 的原生專案目錄中生成對應的啟動畫面設定檔。

Step4. 重新啟動App：完成後，徹底關閉App並重新啟動。會看到在Flutter UI載入完成前，一個優雅的原生啟動畫面已經取代了惱人的白屏。

明日預告：Android上架準備

明天，將從Android平台開始，學習如何為App產生簽署金鑰，並建置準備上傳到Google Play的App Bundle 檔案。

【哈囉你好：）感謝你的閱讀！其他我會常出沒的地方：Threads】