【Flutter】flutter_launcher_iconsでアプリのアイコンを設定する

ネコニウム研究所

PCを利用したモノづくりに関連する情報や超個人的なナレッジを掲載するブログ

【Flutter】flutter_launcher_iconsでアプリのアイコンを設定する

2023-10-5 |

Flutterでflutter_launcher_iconsを使ってアプリのアイコンを設定したい!

概要

今回の記事では、Flutterでflutter_launcher_iconsを使ってアプリのアイコンを設定する手順を掲載する。

仕様書

環境

  • Android Studio Giraffe | 2022.3.1
  • Flutter 3.13.5
  • flutter_launcher_icons 0.13.1

手順書

  1. Android Studioのターミナル(Terminal)で下記のコマンドを実行してflutter_launcher_iconをインストールする。
    flutter pub add -d flutter_launcher_icon
  2. 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を実行するのを忘れて、アイコンが表示される苦しんでたのはここだけの話。