Flutter のアプリアイコンを環境ごとに分ける

flutter_launcher_icons を活用

本記事では、Flutterのアプリアイコンを環境ごとに分ける簡単な方法について紹介します。

アプリアイコン以外全般については、iOSメインですが以下をご覧ください。

Flutterで環境ごとにビルド設定を切り替える — iOS編

flutter_launcher_icons を利用

Flutterには、flutter_launcher_icons という iOS・Andoidアプリアイコンを生成するとても便利なツールがあります。

flutter_launcher_icons | Dart Package

fluttercommunity/flutter_launcher_icons

基本的な使い方は以下です。

1. インストール

# pubspec.yaml
dev_dependencies: 
  flutter_launcher_icons: "^0.7.0"

2. 設定を記述

# pubspec.yaml(flutter_launcher_icons-development.yamlでも良い)
flutter_icons:
  image_path: "assets/images/icon.png"
  android: true
  ios: true

もっと細かい指定も可能ですが、README を見てください

3. 画像ファイルを配置

上で指定した image_path の場所にアイコンに指定したい画像ファイルを置く。

4. コマンド実行

$ flutter packages pub run flutter_launcher_icons:main

Flavor ごとにアイコンを変える

そして、本題のFlavor ごとにアイコンを変えるやり方の手順を説明していきます(主にiOS版の説明になりますがAndroid版も大体同じなので適宜読み替えてください)。

1. Flavorごとに設定ファイルを記述

flutter_launcher_icons-[Flavor].yaml という形式で設定ファイルを用意します。例として次のようなものをルートに配置します。

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

それぞれ、画像ファイルとして違うものを指定します。

# flutter_launcher_icons-development.yaml
flutter_icons:
  image_path: "assets/images/icon-development.png"
  android: true
  ios: true

[注意]

pubspec.yaml への flutter_icons 指定は本来不要なはずなものの、それが無いといつの間にかエラーが発生してしまうようになったので、下記の指定のワークアラウンドも必要です。

flutter_icons:
  android: true
  ios: true

2. 画像ファイルを配置

• assets/images/icon-development.png
• assets/images/icon-staging.png
• assets/images/icon-production.png

3. コマンド実行

コマンド実行は同じです。

$ flutter packages pub run flutter_launcher_icons:main

4. Xcode で確認

次のようにFlavorごとにアイコンが生成されます。

5. xcconfig にアイコン名を指定

それぞれのFlavorのxcconfigに次のように記述していきます。

# Development.xcconfig
ASSETCATALOG_COMPILER_APPICON_NAME=AppIcon-development

6. プロジェクト設定を更新

そのあと、プロジェクト設定を確認すると、まだ次のようになっています。

一番上のAppIconの行にフォーカスを合わせてバックスペースキーを押すと文字による上書きが取れて、次のようにxcconfigで指定した値が現れます。

7. 起動して確認

そのあとは普通にFlavor指定で起動して確認すると、次のようにバッチリです👌

サンプルリポジトリはこちらです:

mono0926/flutter-flavor-example

また、関連情報としてAndroidのアダプティブアイコンの対応についてもメモも書いたので貼っておきます。