命名的誕生

歷經快三十天的開發，今天終於要幫我的 APP 正式命名了。
在 AI 的輔助下，最後採用了 Gemini 點子發想模式提供的建議：

• 名稱：藍圖旅人（Blueprint Traveler）
• 概念：「藍圖」點出了行程規劃的核心，就像建築師畫出藍圖一樣，APP 能精準設計每一天的路線；「旅人」代表這個藍圖是為旅行而生，名稱專業又帶有目的性。
• Icon 初步想法：以淺藍色為主，一個簡潔的「B」字母，線條由地圖道路或旅遊標誌（旗子、相機等）構成，看起來既像字母又像地圖。

Icon 的演進過程

我也嘗試使用 Google Gemini 的 Nano Banana 功能，逐步產生 icon 設計提案，以下是演進史：

第一版	第二版	第三版	最終版

第一版

• 主色系：淺藍（0xFFA4BFDB）
• 正方形設計，應用於 iOS 與 Android
• 「B」字母由道路與旅遊標誌組成

從第一版到第二版

• 移除外框，避免裁切問題
• 由於 Icon 最小只有 48 × 48，所以降低複雜度保留 2–3 個重點圖示，並加粗線條
• 移除「Blueprint Traveler」文字，讓圖像更純粹
• 增加背景處理，確保深色與淺色桌布下都有對比度

從第二版到第三版

• 嘗試增強色彩層次，但因描述不夠明確，結果變得過度立體

從第三版到最終版

• 將深藍改為淺藍，整體更簡潔清爽

雖然最終版還有一些細節可微調，但對於完全不懂設計的我來說，已經足夠了。

App Icon 設計注意事項

• Android：從 Android 8.0 開始，flutter_launcher_icons 會自動產生 適應性圖示 (Adaptive Icons)。這類圖示由「前景」與「背景」兩個圖層組成。前景 (adaptive_icon_foreground) 通常建議保留透明背景，才能正確疊加在背景圖層上。這樣一來，不同手機廠商就能根據需求套用各種形狀（例如圓形、方形或水滴形），確保在多種裝置上都能有一致的顯示效果。

• iOS：iOS 圖示不支援透明背景。若圖示中存在透明區域，系統會自動以黑色填補，導致圖示顯得不自然。因此，建議提供 完整且無透明背景的圖示，以確保在所有 iOS 裝置上都能正確呈現。

下面將使用 flutter_launcher_icons 為例更換 icon，設定如下：

dev_dependencies:
  flutter_launcher_icons: ^0.14.4
  
flutter_launcher_icons:
  android: "launcher_icon"
  ios: true
  image_path_android: "assets/images/app_icon_android.png" # 舊版 Android (8.0 以下) 圖示
  image_path_ios: "assets/images/app_icon_ios.png"
  adaptive_icon_background: "assets/images/app_icon_background.png" # Android 適應性圖示背景
  adaptive_icon_foreground: "assets/images/app_icon_android_foreground.png" # Android 適應性圖示前景

補充說明：

• image_path_android 與 image_path_ios 可分別為兩個平台指定不同的基礎圖示來源。
• 當同時設定 image_path_android 與 adaptive_icon_foreground 時，Android 會優先使用 adaptive_icon_foreground 來生成適應性圖示。

執行生成指令：

flutter pub run flutter_launcher_icons

他就會幫你自動產好對應檔案了！

App 名稱設定

• 長度限制：過長會被截斷，建議 10–12 個字元內。
• 避免特殊符號：部分字元不支援或顯示不一致。
• 一致性：桌面顯示名稱最好與商店名稱保持一致。

更換 App 名稱

• iOS：ios/Runner/Info.plist

<key>CFBundleDisplayName</key>
<string>藍圖旅人</string>

• Android： android/app/src/main/AndroidManifest.xml

<application
    android:label="藍圖旅人"
    ...>

另外記得把 MaterialApp 也進行調整這樣對背景才會顯示正確的名稱

return MaterialApp(
  title: '藍圖旅人',
  home: TripListView(toggleTheme: _toggleTheme),
);

啟動畫面

啟動頁面是當應用程式開啟時，最先顯示的全螢幕畫面，通常用來展示應用程式的標誌或品牌。下面將使用 flutter_native_splash 為例新增啟動畫面，設定如下：

dev_dependencies:
  flutter_native_splash: ^2.4.6
  
flutter_native_splash:
  color: "#ffffff"
  image: "assets/images/splash_icon.png"
  fullscreen: true

執行生成指令：

dart run flutter_native_splash:create

他就會幫你自動產好對應檔案了！

若想清除啟動畫面，可以使用以下指令：

dart run flutter_native_splash:remove

今日成果