[Flutter]Android Push通知のアイコンを簡単に作成サクッと設定

はじめに

Flutterでプッシュ通知を行わせる場合、以下のライブラリを組み合わせると簡単です。

Dart packages

 

70 Pockets

firebase_messaging | Flutter Package

https://pub.dev/packages/firebase_messaging

Flutter plugin for Firebase Cloud Messaging, a cross-platform messaging solution that lets you reliably deliver messages on Android and iOS.

Dart packages

 

1 User

95 Pockets

flutter_local_notifications | Flutter Package

https://pub.dev/packages/flutter_local_notifications

A cross platform plugin for displaying and scheduling local notifications for Flutter applications with the ability to customise for each platform.

flutter_local_notificationsを使用すると、iOSではアプリのアイコンが通知画面に表示されるので楽なのですが、Androidで動かすと、ただのグレーの丸でしか表示されません。

このグレーの丸をもう少しいい感じのアイコンに変える方法はないものでしょうか？

探したら見つかりましたので以下に記しておきます！

プッシュ通知のアイコンの作成

ここに記載があります。

Android 5以降、OSは、アプリがAndroid API 21+をターゲットにしている場合、小さな通知アイコンをすべて白に強制します。正しいアイコンを作成しないと、ほとんどの場合、ステータスバーにベルまたは白一色のアイコンとして表示されます。

つまり通知バーに出てくるアイコンは白黒である必要があります。

白黒アイコンを作る

通知バーは高さが低いので、解像度の高いアイコンを作る必要はありません。

手順はこんな感じです。

1. IconFinderにアクセスしてめぼしいアイコンを探してくる。
2. 背景が透明ではない場合は、Peko Stepを使って背景を透明にする。
3. Android Asset Studioにアクセスし、Notification icon generatorを選ぶ。
   SourceでImageを選択して作成した白黒のアイコンを選択します。
   
4. zipファイルをダウンロードすると、このようなフォルダ構成になっています。
   
   中に画像ファイルが入っているので、drawable-(解像度)にある画像ファイルをapp/src/main/res/mipmap-(解像度)のフォルダにコピーします。

flutter_local_notificationの呼び出し方

それぞれ画像ファイルがコピーできたら、

var initializationSettingsAndroid = new AndroidInitializationSettings( '@mipmap/(画像ファイル名(拡張子不要))');

とAndroidInitializationSettingsを初期化することで、プッシュ通知にアイコンが表示されるようになります。

お役に立てたでしょうか？

基礎から学ぶFlutter／石井幸次【3000円以上送料無料】

created by Rinker

¥4,048 (2025/03/17 16:51:42時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

サーバーレス開発プラットフォームFirebase入門 [ 掌田津耶乃 ]

created by Rinker

¥3,740 (2025/03/18 13:08:17時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング