31

I'm looking for a way to show an app icon badge when a user receives a push notification.

I'm using the Firebase_messaging plugin for flutter for the handling of the push notifications and flutter_app_badger for the app icon badges. But I want to combine the two so that the number is set on the icon without opening the app. Is it possible to make this happen? Or am I overlooking something obvious from the firebase_messaging plugin?

Sorry for the horrible explanation. I hope someone can help me with this issue.

iDecode
  • 4,201
  • 2
  • 17
  • 42
Kevin Walter
  • 3,817
  • 5
  • 23
  • 26
  • 3
    The badge value is part of the notification payload. So you don't have anything to do in your app ( except requiring Badge permission while registering for notifications ) – CZ54 Nov 20 '18 at 09:54
  • 3
    Do I need to add this in the notification payload? Or is every push notification added to the app icon badge? – Kevin Walter Nov 20 '18 at 09:55
  • 1
    You have to ass this in the payload. Look at https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/CreatingtheNotificationPayload.html, you will see `"badge": 5` – CZ54 Nov 20 '18 at 10:05
  • 1
    And this works the same as Android? Also how do I know which number to send? As far as I know there is no way to check if a push notification is opened right? – Kevin Walter Nov 20 '18 at 10:08
  • 1
    Don't know android sorry – CZ54 Nov 20 '18 at 10:21
  • You can add badge from app delegate in ios and using NotificationChannel in android natively – Athul Sethu May 07 '20 at 09:04
  • Actually the badge dot/count in Android is controlled by the OS. With pixel launcher it shows a dot, with launcher in Huwaui, it is a count. Moreover, dots are supported starting from Android O. Based on my experience with this, it is very troublesome to handle this due to the huge amount of launchers and different behaviours from phone to phone. – Abed Elaziz Shehadeh Jun 27 '20 at 15:13
  • Android doesnt allow display of Badge, you will only get badge on iOS – thien nguyen Aug 27 '20 at 04:16
  • The number of notification is by default on the app icon you don't have to do anything for that. It is controlled by os you can't do anything on that. – Avadhesh Mourya Oct 29 '20 at 10:55
  • check this answer from another [post](https://stackoverflow.com/questions/49253075/setting-app-badge-when-fcm-push-notifications-received) – Moaid ALRazhy Apr 14 '21 at 10:23

5 Answers5

1

App icon badge depends on the Application Launcher

Some of the Android Application Launcher includes this functionality by default, You can check this on Settings->Apps->Notification Attached image

FYI

Dharmesh Mansata
  • 2,406
  • 19
  • 30
ajay
  • 418
  • 3
  • 13
0

My suspicion is that you have an icon that isn't compatible with the icon guidelines in your device. I suggest trying https://pub.dev/packages/flutter_launcher_icons to make icons for your device.

frogsam5
  • 21
  • 6
0

I think you try to create stream when run app to real time listen doc changes in Firestore. Read here How to listen for document changes in Cloud Firestore using Flutter?

And the icon can be update in background but without opening app is impossible I think.

Quyen Anh Nguyen
  • 184
  • 1
  • 12
0

I don't have a direct answer because I haven't encountered this issue before, but this might fix your problem

Ensure that you have defined the icon for your application properly - for flutter, here are the steps you should have:

  1. Import the package into your pubsec.yaml file - it should be called flutter_launcher_icons: "^0.8.0" and imported under the dev-dependencies section of the pubspec.yaml file.

  2. After the dev-dependencies section, add a new section for flutter icons as so: flutter_icons: ios: true android: true image_path_ios: "{Icon File Path}" image_path_android: "{Icon File Path}"

Hopefully this helps, and good luck with fixing your issue!

Sashv D
  • 1
0

Using https://pub.dev/packages/firebase_messaging for notifications , for Android Background notifications you can add this in your AndroidManifest.xml file in your application tag. And make sure you have androidlogo.png (this is example name) present in your drawable folder.

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

In case of foreground notifications, you must be using Flutter Local Notifications, so you can provide the same while initializing like

var initializationSettingsAndroid = new AndroidInitializationSettings('androidlogo');
flutterLocalNotificationsPlugin.initialize(initializationSettings, onSelectNotification: onNotificationClicked);

And for application icon you can use this library https://pub.dev/packages/flutter_launcher_icons which is also suggested by answers above.

In case of iOS, your launcher icon will your notification icon.

And for display of badge icon you can use https://pub.dev/packages/flutter_app_badger. (For supported phones).

So using all this you will get both app icon with badge and notification icon as your app icon (or specified by you).

Tanmay Pandharipande
  • 347
  • 2
  • 9