【Flutter】Androidの通知アイコンが反映されない時の解決方法|ic_notificationの設定手順

2022年5月27日

FlutterアプリでFirebase Cloud Messaging(FCM)によるプッシュ通知を実装したとき、Androidデバイスで通知アイコンが白い四角や黒い塗りつぶしになってしまうことがあります。

これはAndroid 5.0(API level 21)以降の仕様で、通知アイコンはアルファチャンネルのみが使用されます。カラー画像をそのまま指定すると正しく表示されません。本記事では、アイコン生成からAndroidManifest.xmlへの設定まで手順を解説します。

手順1:通知アイコンを作成する

Android Asset Studio の「Notification icon generator」を使うと、各解像度に対応した通知アイコン画像を一括で生成できます。

  1. 上記サイトにアクセスし「Notification icon generator」を選択
  2. 使用するアイコン画像をアップロード(白背景に黒の単色画像推奨)
  3. アイコン名をic_notificationに設定
  4. 「Download .ZIP」でダウンロード

手順2:通知アイコンをプロジェクトに配置する

ダウンロードしたZIPファイルを解凍します。各解像度フォルダ内のic_notification.pngを、Flutterプロジェクトの対応するdrawableフォルダにコピーします。

android/app/src/main/res/
├── drawable-mdpi/ic_notification.png
├── drawable-hdpi/ic_notification.png
├── drawable-xhdpi/ic_notification.png
├── drawable-xxhdpi/ic_notification.png
└── drawable-xxxhdpi/ic_notification.png

手順3:AndroidManifest.xmlを編集する

android/app/src/main/AndroidManifest.xmlを開き、<application>タグ内に以下のメタデータを追記します。

<meta-data android:name="com.google.firebase.messaging.default_notification_icon"
android:resource="@drawable/ic_notification" />

追記する場所を間違えないようにしてください

AndroidManifest.xmlの編集箇所

よくあるエラーと対処法

アイコンがまだ白い四角のまま

  • ファイル名が@drawable/ic_notificationの指定と一致しているか確認(拡張子は不要)
  • 配置先がmipmapではなくdrawableフォルダであることを確認
  • flutter clean && flutter runで再ビルドする

通知の背景色も変えたい場合

アイコンの背景色は以下のメタデータで設定できます。

<meta-data android:name="com.google.firebase.messaging.default_notification_color"
android:resource="@color/notification_color" />

参考:Flutter GitHub Issue #17941

Flutter

Posted by Next-k