【Flutter】flutter_launcher_iconsでアプリのアイコンを設定する
2023-10-5 | Flutter
Flutterでflutter_launcher_icons
を使ってアプリのアイコンを設定したい!
概要
今回の記事では、Flutterでflutter_launcher_icons
を使ってアプリのアイコンを設定する手順を掲載する。
仕様書
環境
- Android Studio Giraffe | 2022.3.1
- Flutter 3.13.5
- flutter_launcher_icons 0.13.1
手順書
- Android Studioのターミナル(Terminal)で下記のコマンドを実行して
flutter_launcher_icon
をインストールする。flutter pub add -d flutter_launcher_icon
pubspec.yaml
に下記を追記する。...
flutter_icons:
ios: true
image_path: "assets/ios_icon.png"
android: true
adaptive_icon_background: "#000000"
adaptive_icon_foreground: "assets/android_icon.png"
image_path
にiOSで使われるアイコンの画像のパス、adaptive_icon_background
にAndroidで使われるアイコンの背景の画像のパスか例のように色、adaptive_icon_foreground
にAndroidで使われるアイコンの背景の上に表示される画像のパスを設定する。画像のサイズにしては後述する。
1. Android Studioのターミナル(Terminal)で下記のコマンドを実行して、実際にアイコンをアプリに反映させる。
```bash
flutter pub run flutter_launcher_icons:main
画像のサイズ
各項目(OS)の画像サイズ。
Androidは解像度毎にアイコンの設定ができるんだけども、Flutterでは1つの解像度しか設定できないっぽい?多分。下記はxxxhdpiの場合の数値。
項目名 | サイズ(px) | 備考 |
---|---|---|
image_path(iOS) | 1024 x 1024 | 透過不可 |
adaptive_icon_background(Android) | 432 x 432 | 背景画像 or 色 |
adaptive_icon_foreground(Android) | 432 x 432 | 透過画像、セーフゾーン(288 x 288) |
Androidのアイコンは円形にクリップされる。画像の中央から半径144px
の範囲がセーフゾーン。
まとめ(感想文)
flutter pub run flutter_launcher_icons:main
を実行するのを忘れて、アイコンが表示される苦しんでたのはここだけの話。