Flutter - Make launcher icons

承接上一篇，這次我們在處理App Icons的問題，這地方也有一點小雷，所以來說一下：

flutter_launcher_icons: ^0.13.1

Name	Version
Flutter Version	v3.16.4
Flavorizr	v2.2.3
Flutter Launcher Icons	v0.13.1

初始化

首先，早期的做法我們可以直接在pubspec.dev新增有關於flutter_launcher_icons的相關資訊，圖片上是我早期的做法，後續套件更新需要改成flutter_launcher_icons：

dev_dependencies:
  flutter_launcher_icons: "^0.13.1"

flutter_launcher_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icon/icon.png"
  min_sdk_android: 21

接著我們只要透過指令就能自動產生App Icon:

1 2	flutter pub get flutter pub run flutter_launcher_icons

在Flavorizr的作法

接下來我要介紹關於flavor如何去使用，首先我們同樣新增flutter_launcher_icons到pubspec。

1 2	dev_dependencies: flutter_launcher_icons: "^0.13.1"

接著我們針對先前的設定來分別在根目錄新增相關的設定檔，透過flutter pub run flutter_launcher_icons:generate去新增檔案，接著去重新命名各自的環境：

1
2
3

flutter_launcher_icons-development.yaml
flutter_launcher_icons-staging.yaml
flutter_launcher_icons-production.yaml

並且針對檔案去修改成我們設定的圖片：

# flutter pub run flutter_launcher_icons
flutter_launcher_icons:
  image_path: 'assets/launcher/icon-256-ios-development.png'

  android: "launcher_icon"
  # image_path_android: "assets/icon/icon.png"
  min_sdk_android: 21 # android min sdk min:16, default 21
  adaptive_icon_foreground: 'assets/launcher/icon-256-android-development.png'
  adaptive_icon_background: '#ffffff'

  ios: true
  # image_path_ios: "assets/icon/icon.png"
  remove_alpha_channel_ios: true

Android與iOS不同的地方主要是背景色，Android有個設定會把前景色與背景色分開，所以我們需要主動要調整一下，不然Android的App Icons會顯示黑色的背景，導致圖片變得奇怪。

另外同樣的我們可以在staging, production分別建立不同的圖片，未來在做開發時也會比較好區別。

完成之後我們可以透過command來產生相對應的檔案，他會去查找大約有哪些yaml接著依序新增到各自的資料夾。

1	flutter pub run flutter_launcher_icons

新增後我們可以透過先前的flutter run去把程式啟動，Android部分如果看到圖片切換到你設定的圖標那就代表成功。

iOS需要注意的地方

至於為什麼只說Android呢？那是因為flavor跟launcher_icons分別產生的對應檔不太一樣，打開xCode，General -> AppIcons，你會看見各自環境他是使用developmentAppIcon, stagingAppIcon, productionAppIcon：