Skip to content

[Flutter] 使用 flutter_launcher_icons 設定 App 圖示

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


Read More

Tags:

Leave a Reply