Last Updated on 2021-10-18 by Clay
當我們使用 Flutter 開發完一個 App 時,當然也不能忘記替 App 加上所謂的『啟動器圖示』(launcher icon)。
在沒有設定的情況下,你應該會看到經典的 Flutter 圖示:
不過若我們要上架,自然是不可能使用這個圖示啦。
不過若是要設定啟動器圖示的話,我們可能需要先製作出許多不同尺寸的圖示,這才能適應不同尺寸的螢幕 —— 這是個相當麻煩的步驟。
實際上,在 Flutter 專案中,可以透過 flutter_launcher_icons 這個 Flutter 套件來一口氣完成不同尺寸、不同平台(Android/iOS)的啟動器圖示設定。以下我簡單紀錄使用步驟。
使用 flutter_launcher_icons
Step 1: 準備好要使用的圖示
由於 flutter_launcher_icons 會自動調整圖示大小,建議在準備圖示時準備較大的尺寸。
Step 2: 取得套件
在 pubspec.yaml 中進行以下修改:
dev_dependencies:
flutter_launcher_icons: 0.9.0
flutter_icons:
android: "launcher_icon"
ios: true
image_path: "assets/icon/YOUR_ICON"
這裡要注意縮排,縮排錯誤是會導致後續步驟無法進行的。接著使用以下指令:
flutter pub get
取得套件。
Step 3: 執行 flutter_launcher_icons
打開終端機,或者是你可以在所使用的 IDE 中找到 IDE 的終端機:
輸入以下指令運行 flutter_launcher_icons 來設定 App 啟動器圖示。
flutter pub run flutter_launcher_icons:main -f pubspec.yaml
Output:
════════════════════════════════════════════
FLUTTER LAUNCHER ICONS (v0.9.0)
════════════════════════════════════════════
• Creating default icons Android
• Adding a new Android launcher icon
WARNING: Icons with alpha channel are not allowed in the Apple App Store.
Set "remove_alpha_ios: true" to remove it.
• Overwriting default iOS launcher icon with new icon
✓ Successfully generated launcher icons
接著再重新執行 App,你應該會在模擬器/測試機上看到已經被修改的 App 啟動圖示。若是沒有看到,則斷掉與程式的連線、或刪除 App 重新安裝試試。
References
- https://pub.dev/packages/flutter_launcher_icons
- https://stackoverflow.com/questions/43928702/how-to-change-the-application-launcher-icon-on-flutter