【flutter】アダプティブアイコン用の画像をImage Asset Studioから作成する

2023.06.13

Androidは8以降アダプティブランチャーアイコンというものがあるのでそれに対応してみる。

Flutterプロジェクトでの作業なのでunityなどでアプリアイコンが必要な人は空のプロジェクトでも作成してから作業してみてください。

flutterではflutter_launcher_iconsという簡単にアイコンを設定できるものがありますが、細かい調整が面倒そうだったのでツールを使ってみます。

アプリアイコンを作成する  |  Android Studio  |  Android Developers
Compose でマテリアル アイコンを呼び出すか、Image Asset Studio を使用して、マテリアル アイコン、カスタム画像、テキスト文字列から独自のアプリアイコンを生成します。
developer.android.com

Flutterでアプリを作成中なので作成も今後記事に出来れば。

アダプティブアイコンとはこんなものです。

アダプティブ アイコン  |  Views  |  Android Developers
developer.android.com

準備

android studioにあるImage Asset Studioというツールを使用します。

  • 背景なし（透過）画像（1024*1024くらい、拡縮は後で可能）
  • 背景画像（必要なければツールで色は指定できる）

Android StudioでImage Asset Studioを起動

Image Asset Studioが見つからない場合があるので確認してみてください。

Flutterプロジェクトの場合

プロジェクト名で右クリック>Flutter>Open Android…でFlutterアプリではなくAndroidアプリ作成用のAndroid Studioを開く。

Androidアプリ作成用ウィンドウ

resフォルダーで右クリック>New>Image Assetsを選択

それでも出てこない場合

※Flutterの場合初めに出てこなかった・・・Androidアプリ作成用として開いたプロジェクトのTerminalで

flutter clear

でクリアして再度gradlesを同期したら一覧に表示された。

Image Asset Studioでアダプティブアイコンを設定する

真剣にこのツールを調べたことはないですが、全面と背面のレイヤーを設定する。

前面画像を選択してサイズを調整

自分のアプリアイコンの画像を設定してサイズを調整。

背景画像設定

今回背景画像を用意はしませんでしたが、画像も設定できます。グラデーションなど行いたい場合などには画像を用意して設定しましょう。

設定完了（書き出し）

書き出す場所はそのままで設定完了です。

Flutterの場合

flutter_launcher_iconsを使用してアダプティブアイコンを簡単に設定したい場合は

pubspec.yamlに下記のように設定します。

※adaptive_icon_backgroundにも画像を設定できます。

flutter_icons:
  android: true
  ios: true
  image_path: "assets/icons/hoge.png"
  adaptive_icon_background: '#ffffff'
  adaptive_icon_foreground: 'assets/icons/hoge_adaptive_foreground.png'

設定できたら

flutter pub run flutter_launcher_icons:main

を実行して確認すると反映されていました。

Flutterで作業していてハマったポイント

プロジェクトルートがおかしくなる

Androidアプリ作成用⇔Flutterと行き来しているとプロジェクトルートがおかしくなるのか、一度クリアしてから毎回更新する必要があった、AndroidStudioを閉じて開きなおしてもいいが再読み込みでも行けそう。

flutter clear

を行い再読み込み。

ファイル競合？

自分が作業をしていた時には

  1. flutter_launcher_iconsでアイコン設定
  2. 画像一つだけだと見栄えが悪かったのでflutter_launcher_icons機能でアダプティブアイコンを設定（背景はカラーを指定）
  3. あまりよくなかったのでImage Asset Studioから視覚的に設定

という作業で行っていました。

最終的にAndroidはImage Asset Studioから書き出したものを使用するのでpubspec.yamlは

flutter_icons:
  android: false
  ios: true
  image_path: "assets/icons/hoge.png"

としましたがFlutterプロジェクトでうまくビルドできなくなってしまった。

* What went wrong:
Execution failed for task ':app:mergeDebugResources'.
> [color/ic_launcher_background] D:\flutter\projects\prj_zenchan\android\app\src\main\res\values\colors.xml	[color/ic_launcher_background] D:\flutter\projects\prj_zenchan\android\app\src\main\res\values\ic_launcher_background.xml: Error: Duplicate resources

みたいなエラーが出たのでcolors.xmlを削除するとうまくできた。

android/app/src/main/res/values/colors.xml

おそらく

flutter pub run flutter_launcher_icons:main

を実行したときに作られたものがImage Asset Studioで作成したのと競合を起こしたみたい。

おわりに

FlutterでもAndroidは素直にImage Asset Studioを使用してflutter_launcher_iconsはiOSだけにするのが良さそうという結論にしました。

unityなどで設定したい場合はresに書き出された画像をunityにアイコンを設定する場所に指定すればいいと思います。

コメント