Android13以降のFlutterアプリでテーマ別アプリアイコンに対応する

2022-11-27

#Flutter

#Android

テーマ別アプリアイコンとは

Android13以降の機能で、ユーザーが選択した壁紙やライトモード・ダークモードといったテーマに応じてアプリのアイコンの色合いも変わる機能だ。

公式ドキュメントはこちら。

نظرة عامة على الميزات وواجهات برمجة التطبيقات | Android Developers

تعرَّف على الميزات الجديدة وواجهات برمجة التطبيقات المخصّصة للمطوّرين في Android 13.

developer.android.com

Flutter製の個人開発アプリsubskunでもテーマ別アプリアイコンに対応してみた。

従来のアイコンがこれ。

そして、テーマ別アプリアイコンに対応したものがこれ。それぞれライトモードとダークモードの場合になっている。

壁紙を緑や赤の色味のものに設定した場合はこんな風になる。

今回はFlutterアプリでのテーマ別アプリアイコンの設定方法をまとめておく。

前提

flutter_launcher_iconsというパッケージでAndroidのアダプティブアイコンに対応していることを前提とする。

flutter_launcher_icons | Dart package

A package which simplifies the task of updating your Flutter app’s launcher icon.

pub.dev

また、アダプティブアイコンのフォアグラウンド画像はモノクロであるとする(そうでない場合の対応は後述)。

ちなみに、flutter_launcher_iconsはまだテーマ別アプリアイコンに対応してはいないものの、それに当たるイシューは既に作成されており、ロードマップにもそのイシューが含まれている。対応されるのが楽しみだ。

[FEATURE REQUEST] Support for android 13 themed icons · Issue #419 · fluttercommunity/flutter_launcher_icons

Is it possible to add support for themed icons in android 13 by adding an additional monochrome icon version as a separate asset field?

github.com

設定方法

画像さえ準備できればあとは簡単で、android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml内で以下のように<monochrome>要素を追加するだけだ。

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />
    // ↓これ
    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>

公式ドキュメントはこちら。

डिवाइस के मुताबिक बदलने वाले आइकॉन | Views | Android Developers

developer.android.com

ちなみに通常のアプリアイコンのフォアグラウンド画像がモノクロでない場合は、それとは別にモノクロの画像を用意して各サイズのdrawableディレクリに配置し、上記のmipmap-anydpi-v26/ic_launcher.xml内で<monochrome>要素での参照先をモノクロ画像用のもの(例えば@drawable/ic_launcher_monochrome)に差し替えることで対応することができるだろう。

これでアプリをビルドしてみると、上で紹介したようなテーマ別アプリアイコン対応ができた。