How to show a notification badge on the app icon using flutter?

Question

I'm using FCM to push notifications in a flutter app.

I've tried a lot of things and codes to show a badge (red dot) on top of the app icon when a new notification arrives and the app is closed or in background.

What should I do to get a badge app icon in flutter ?

Answer 1

This is a late answer but, on your question I think you want to add a count to the app icon just like the image below.

So for this issue, you can use flutter_app_badge. Using this package you can add count to your app icon.

To use flutter_app_badger with FCM you can use this

 _firebaseMessaging.configure(
  onMessage: (Map<String, dynamic> message) async {
    print("onMessage: $message");
    //Here you can add the count when you get a notification you can increase the number by one
    FlutterAppBadger.updateBadgeCount(1);
  },
  onBackgroundMessage: myBackgroundMessageHandler,
  onLaunch: (Map<String, dynamic> message) async {
    print("onLaunch: $message");
    //Here you can remove the badge you created when it's launched
    FlutterAppBadger.removeBadge();
  },
  onResume: (Map<String, dynamic> message) async {
    print("onResume: $message");
  },
);

Then you can also add it to the background notification handler

Future<dynamic> myBackgroundMessageHandler(Map<String, dynamic> message) async {
   //Here you can add 
   FlutterAppBadger.updateBadgeCount(1);

   ...
   // Or do other work.
}

Remember, On ios background handler is triggered when only there is no notification on the payload. You can read my more about this issue on my answer.

Also, you can add a condition to check if the phone supports the badge or not using

bool res = await FlutterAppBadger.isAppBadgeSupported();

Answer 2

Try this JSON Body, I got the badge count and the sound, still trying to figure out why, and how to clear it after read.

{
    "notification": {
        "body": "This is an FCM notification message!",
        "title": "FCM Message",
        "sound": "alert.aiff"
    },
    "priority": "high",
    "data": {
        "click_action": "FLUTTER_NOTIFICATION_CLICK",
        "id": "1",
        "status": "done"
    },
    "apns": {
        "payload": {
            "aps": {
                "badge": 9
            },
            "messageID" : "ABCDEFGHIJ"
        }
    },
    "to": "<the token you want to push to>"
}