毎日Flutter生活 Advent Calendar 2025 の13日目です
こんにちは！tatata-keshiです
11日目の記事でアプリケーションのアイコンを設定しましたが、Android端末で検証した際にアイコンがうまく設定できていませんでした。
今回の記事では、原因と解決法について紹介します。
1. そもそも何が起きていたか
11日目の記事で紹介したように、flutter_launcher_iconsパッケージを用いてアイコンの設定を行いました。
アイコン用画像にはこちらのラーメンの画像を設定しようとしました
美味しそうですね
こちらの画像をicon.jpgとしてassets/iconディレクトリに配置し、設定ファイルであるflutter_launcher_icons.yamlファイルを以下のように記述しました。
# flutter pub run flutter_launcher_icons
flutter_launcher_icons:
image_path: "assets/icon/icon.jpg"
android: "launcher_icon"
# image_path_android: "assets/icon/icon.png"
min_sdk_android: 21 # android min sdk min:16, default 21
# adaptive_icon_background: "assets/icon/background.png"
# adaptive_icon_foreground: "assets/icon/foreground.png"
# adaptive_icon_foreground_inset: 16
# adaptive_icon_monochrome: "assets/icon/monochrome.png"
ios: true
# image_path_ios: "assets/icon/icon.png"
remove_alpha_ios: true
# image_path_ios_dark_transparent: "assets/icon/icon_dark.png"
# image_path_ios_tinted_grayscale: "assets/icon/icon_tinted.png"
# desaturate_tinted_to_grayscale_ios: true
# background_color_ios: "#ffffff"
web:
generate: true
image_path: "path/to/image.png"
background_color: "#hexcode"
theme_color: "#hexcode"
windows:
generate: true
image_path: "path/to/image.png"
icon_size: 48 # min:48, max:256, default: 48
macos:
generate: true
image_path: "path/to/image.png"
この状態でアプリを実行し、iPhoneの実機で検証した際は、アプリのアイコンに問題なく設定されていました。
しかしAndroidでは問題がありました。
実行したアプリのアイコンを確認したところ...
このように、白い丸の中心にポツンと が表示されてしまいました...これでは台無しです。
2. 何が原因だったか
アイコン画像が思ったように設定されなかった原因は、大きく分けて3つありました。
- 画像がjpg形式だった
- 指定しているandroid sdkのバージョンが古かった
- アダプティブアイコンの設定をしていなかった
前者2つについては、文字通りの理由です。
アイコン画像はpng形式が推奨されているためjpg画像を設定しているのはそもそも望ましくない状況でした。
また、min_sdk_androidの値が21となっておりましたが、現行は26であり古いバージョンを指定している状態でした。
アダプティブアイコンの設定ができていなかった
3つ目の理由こそ、今回アイコン画像が設定できていなかった一番の原因でした。
Androidではデバイスや個別のカスタマイズによるテーマ設定に対応させるため、アダプティブアイコンを用いて各々のUIに適した形のアイコンを表示させています。
これに対応させるためには、flutter_launcher_icons.yamlでコメントアウトされていたアダプティブアイコンに関する設定を行う必要があったのです。
# adaptive_icon_background: "assets/icon/background.png"
# adaptive_icon_foreground: "assets/icon/foreground.png"
# adaptive_icon_foreground_inset: 16
3. アダプティブアイコンを設定する
アダプティブアイコンはbackgroundとforegroundの二層からなるアイコンです。
本来であればforegroundにはアプリのアイコンなどコアの部分を、backgroundにはさまざまなアイコン形状に適応させるための余白という役割が想定されていますが、今回はただラーメンの画像を設定したいだけなので
- backgroundにラーメンの画像
- foregroundには透明なpng画像
をそれぞれ設定します。
adaptive_icon_background: "assets/icon/icon.png"
adaptive_icon_foreground: "assets/icon/foreground_transparent_1024.png"
adaptive_icon_foreground_inset: 0
最終的にyamlファイルは以下のようになります。
# flutter pub run flutter_launcher_icons
flutter_launcher_icons:
image_path: "assets/icon/icon.png"
android: "launcher_icon"
# image_path_android: "assets/icon/icon.png"
min_sdk_android: 26
adaptive_icon_background: "assets/icon/icon.png"
adaptive_icon_foreground: "assets/icon/foreground_transparent_1024.png"
adaptive_icon_foreground_inset: 0
# adaptive_icon_monochrome: "assets/icon/monochrome.png"
ios: true
# image_path_ios: "assets/icon/icon.png"
remove_alpha_ios: true
# image_path_ios_dark_transparent: "assets/icon/icon_dark.png"
# image_path_ios_tinted_grayscale: "assets/icon/icon_tinted.png"
# desaturate_tinted_to_grayscale_ios: true
# background_color_ios: "#ffffff"
web:
generate: true
image_path: "path/to/image.png"
background_color: "#hexcode"
theme_color: "#hexcode"
windows:
generate: true
image_path: "path/to/image.png"
icon_size: 48 # min:48, max:256, default: 48
macos:
generate: true
image_path: "path/to/image.png"
yamlファイルを書き換えた後はアイコンを再生成する必要があるため以下のコマンドを実行します。
flutter clean
flutter pub get
flutter pub run flutter_launcher_icons
この状態でアプリを再度実行すれば、アイコンがAndroid版でも問題なく表示されるはずです。
まとめ
このように、Flutterでアプリアイコンを設定する際はAndroidのアダプティブアイコンを考慮して設定する必要があります。
このようにOSによって挙動や設定が異なる場合があるため、どちらの端末でも動作確認を行うことは必要不可欠ですね。