【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 アプリ
├── android
├── ios
├── lib
│
├── assets
│ └── images
│ └── app_icon.png ← ココ
│
└── pubspec.yaml
flutter_launcher_iconsの導入&セットアップ
pub.dev:flutter_launcher_icons
Flutterでflutter_launcher_icons
を利用できるようにするために以下のコマンドを実行してパッケージを導入します。
$ flutter pub add flutter_launcher_icons
続いて設定をしていきます。公式ドキュメントを見るとdart run flutter_launcher_icons:generate
コマンドを実行して専用のyamlファイルを作成する方法と「pubspec.yaml」ファイルに設定を追加する方法の2つがあります。今回は「pubspec.yaml」に追加していきます。
// 〜〜〜〜〜〜
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.8
flutter_launcher_icons: ^0.14.3
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^5.0.0
// アイコン自動生成設定
flutter_icons:
ios: true
android: true
image_path_ios: "assets/images/app_icon.png" // 画像パス
image_path_android: "assets/images/app_icon.png" // 画像パス
adaptive_icon_background: '#000000'
adaptive_icon_foreground: "assets/images/app_icon.png" // 画像パス
adaptive_icon_padding: true
flutter:
uses-material-design: true
設定項目の詳細は後述しています。
コマンドを実行
設定の追加が完了したら以下のコマンドを実行します。すると元画像を元に自動で必要なサイズのアイコンを生成、設定までしてくれます。なので後はビルドするだけでアプリアイコンが変更したものに変わってくれます。
$ flutter pub run flutter_launcher_icons:main
Deprecated. Use `dart run` instead.
This command is deprecated and replaced with "flutter pub run flutter_launcher_icons"
════════════════════════════════════════════
FLUTTER LAUNCHER ICONS (v0.14.3)
════════════════════════════════════════════
⚠ Warning: flutter_icons has been deprecated please use flutter_launcher_icons instead in your yaml files
• Creating default icons Android
• Overwriting the default Android launcher icon with a new icon
• Creating adaptive icons Android
• Updating colors.xml with color for adaptive icon background
• Creating mipmap xml file Android
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
No platform provided
✓ Successfully generated launcher icons

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
にするのが安全。
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。