【Flutter/Dart】アプリアイコンを設定する方法!flutter_launcher_icons

この記事からわかること
- Flutter/Dartでアプリアイコンを設定する方法
- flutter_launcher_iconsの使い方
index
[open]
\ アプリをリリースしました /
環境
- Android Studio:Koala
- Xcode:16.0
- Flutter:3.29.2
- Dart:3.7.2
- flutter_launcher_icons:^0.14.3
- Mac M1:Sequoia 15.4
FlutterでiOS/Androidのアプリアイコンを設定する方法
Flutterで開発しているiOS/Androidのアプリアイコンを設定するにはflutter_launcher_icons
パッケージを使用します。このパッケージを使用することで1つの元画像から自動でサイズ別アイコンが生成され、iOS/Androidそれぞれのプロジェクトに設定してくれます。
flutter_launcher_iconsの使い方
- 画像を用意する(1024 x 1024px)
- 画像をプロジェクトに追加
- flutter_launcher_iconsの導入&セットアップ
- コマンドを実行
画像を用意する(1024 x 1024px)
まずはアプリのアイコン画像を作成します。作成する画像サイズは「1024 x 1024px」の1枚だけでOKです。iOS/Androidそれぞれにガイドラインが定められているので、違反しないように作成するようにしてください。詳細は以下の記事を参考にしてください。
画像をプロジェクトに追加
作成した画像をプロジェクトに配置します。特に指定はないですがlib
と同階層にassets
ディレクトリを作成しその中にimages/app_icon.png
として追加しておきました。
flutter_launcher_iconsの導入&セットアップ
pub.dev:flutter_launcher_icons
Flutterでflutter_launcher_icons
を利用できるようにするために以下のコマンドを実行してパッケージを導入します。
続いて設定をしていきます。公式ドキュメントを見るとdart run flutter_launcher_icons:generate
コマンドを実行して専用のyamlファイルを作成する方法と「pubspec.yaml」ファイルに設定を追加する方法の2つがあります。今回は「pubspec.yaml」に追加していきます。
設定項目の詳細は後述しています。
コマンドを実行
設定の追加が完了したら以下のコマンドを実行します。すると元画像を元に自動で必要なサイズのアイコンを生成、設定までしてくれます。なので後はビルドするだけでアプリアイコンが変更したものに変わってくれます。

flutter_launcher_iconsの設定
オプション名 | 型 | 説明 |
---|---|---|
image_path | String | 共通のアイコン画像のパス(Android / iOS 両対応) |
image_path_android | String | Android用の個別アイコン画像 |
image_path_ios | String | iOS用の個別アイコン画像 |
android | bool or String(adaptive) | Android用のアイコンを生成 adaptiveでアダプティブ対応 |
ios | bool | iOS用のアイコンを生成 |
web | bool | Web用のFaviconを生成 |
windows | bool | Windows用のアイコンを生成 |
macos | bool | macOS用のアイコンを生成 |
adaptive_icon_background | String | アダプティブアイコンの背景(色コードまたは画像パス)(※1) |
adaptive_icon_foreground | String | アダプティブアイコンの前面画像(画像パス)(※1) |
remove_alpha_ios | bool | iOSアイコンからアルファ(透明)を削除するか(※2) |
min_sdk_android | int | アダプティブアイコン対応のための最小SDKバージョン指定 |
※1 Android 8.0(API 26)以降で使用される「アダプティブアイコン」用。
※2 iOSはAppleの仕様により透過PNG不可なのでremove_alpha_ios: true
にするのが安全。
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。