App icon notification badge does not appear on Iphones, but works on Android

[Torkilws]

Has your issue been reported?

• I have searched the existing issues and confirm it has not been reported.
• I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

I have set up notification for my app. Notification popup-banners works on both Iphone and Android phones.

But the app notification badge (the dot with a number) over the app icon is only present on Android, not iphone.

Expected Behavior

App icon notification badge is present on both Android and Iphones after a user has received a notification and not opened the app.

Steps to Reproduce

This one is not so easily reproduceable.

The code needs to be deployed on a Android device or emulator. And for iphone it can only be tested on a real device (as far as I know).

Firebase integration and push notifications also needs to be set up.

Reproducible from Blank

• The steps to reproduce above start from a blank project.

Bug Report Code (Required)

ITESlMmA5c9goblH0LnqcMdqhQIgQ0QnU7gnlO1ucx4gJZCsP6QQPs7sV0NKTubmeH9fPmKjmjoz3NLUvuLlCe1dJUuaQaJg0JVPWw3hRkeXRLKXEc2oSnJAJ+xRfUye36azpxYkA7ZfLWQt62GHNq3qNleeY8aSfxBlZ7vfcPo=

Context

Notifications are sent to users that are invited to events in my app. If an Iphone user miss the notification popup accidentally removes it, they can't see that my app has a notification because of the missing app badge.

Visual documentation

Using sample images from the web to demonstrate the issue.

Android:

Android notification popup OK:

Android notification app icon badge OK:

Iphone:

Iphone notification popup OK:

Iphone notification app icon badge MISSING:

Additional Info

Environment

- FlutterFlow version: v4.0 (released Sept 28. 2023)
- Platform: Windows Web
- Browser name and version: Chrome 117.0.5938.132 (Official Build) (64-bit)
- Operating system and version affected: Windows 11

[hariprasadms]

Hi @Torkilws - Thanks for submitting the issue. In iOS, app icon badges (notification badges) don't automatically appear on the app icons. Its needs additional code settings to explicitly set the badge count in the app.

[Torkilws]

@hariprasadms Ok thanks for confirming this issue. It this something that will be fixed in a flutterflow update, or do I have to add this code manually myself?
If possible, I want to avoid editing the core app code myself so I don't have to create my own develop-branch. But the app icon badges is crucial for my app.

[hariprasadms]

Hi @Torkilws - I checked this with dev team and they confirmed that this is currently not readily available in FlutterFlow for iOS devices. It can be achieved in two ways,

1. Using third party dependency flutter_app_badger and
2. Adding something like this to iOS AppDelegate.{m,swift} file ( defiantly It needs a bit of reading and understanding). I can confirm at this stage, this should be done at code level.

I have marked this issue as enhancement/feature request. I would suggest submit a feature requests through the in-app feature request tool. You can find it in the “Help” menu inside of the FlutterFlow. This will help us keep to track of and prioritise feature requests.

I hope this can help you.

[Torkilws]

Thank you for the suggestions @hariprasadms.

As of my understanding, using the two methods can not be done using custom actions/functions/main.dart. So I want to avoid it if possible.

In my opinion, this functionality should already be in place so it works equally for both Android and IOS, not just Android. Integrated with the current (very good) FCM Push notification system. A high priority feature if you ask me. ⬆️

❓ Is there a place to check if/when this feature is being worked on?

I guess I have to try to create a workaround if this will take many weeks/months to implement.

A relevant post from over 1 year ago:
https://stackoverflow.com/questions/72980880/flutter-the-notification-badge-counter-on-the-ios-app-icon-on-the-home-screen-i

[wenkaifan0720]

Hi @Torkilws. I agree that this is something we should be working on. I will add it to our roadmap. Closing this issue for now as it is more of a feature request.

[TiberioZ]

I have posted this feature request in the Flutterflow community wishlist:
(https://community.flutterflow.io/general-wishlist/post/app-icon-notification-badge-UfJr7IsjdpcVvqJ)

[ibm777p2]

I'm waiting for this feature too

[lsole]

I also need this feature to be implemented asap, please!

[Torkilws]

As this is an essential feature and we have no idea if the FF team will implement this soon or in a year or 2, we just have to keep pestering about it I guess. It would be amazing with a rough time estimate of when it will be implemented.

In my case, my (communication) app will not be fully complete without it. I understand it could be built if the code was downloaded and the functionality was built manually. But this kind of destroys the purpose of FF.

[lsole]

Looking at the code in flutter_app_badger and assuming it works OK (I haven't tried), I think it shouldn't be so difficult to implement it. Hope the folks at FF put it high on the requests list as this is really a must.

[ibm777p2]

As this is an essential feature and we have no idea if the FF team will implement this soon or in a year or 2, we just have to keep pestering about it I guess. It would be amazing with a rough time estimate of when it will be implemented.

In my case, my (communication) app will not be fully complete without it. I understand it could be built if the code was downloaded and the functionality was built manually. But this kind of destroys the purpose of FF.

I super agree, this is really essential and should been implemented in day one, I don't know why this is not done yet.
Not only your app is not completed without it, many app built with FF are not completed either. I did testing on implementing on Flutter code and it did not work, I tried to put an increment int in the autogenerate code on this function Future _handlePushNotification(RemoteMessage message) async it never worked, looks like it needs to be in the native AppDelegate.swift of iOS to make it work. Make this a priority for once.

[ibm777p2]

Still no features in works or roadmap for the badge count icon in iOS on todays update of new features.

[Torkilws]

What a shame 🙁
Where did you find this?

[ibm777p2]

What a shame 🙁 Where did you find this?

Email of features update of FF

[wenkaifan0720]

Hi all. I have bumped this feature request to the priority column. Please be patient while we review and implement this feature. Thank you for your understanding.

[Wittrup90]

Upvote

[ibm777p2]

This is too basic as iOS feature to be ignored.

[leighajarett]

This issue has been fixed and you should see it in the release next week

[ibm777p2]

Finally we have that coming
https://community.flutterflow.io/c/whats-new-in-flutterflow/post/what-s-new-in-flutterflow-april-18-2024-xiQAr0TKHHL8oCO

[whobick]

Hey all! We just pushed a product update which includes the ability to add badges to your app icon. You can find documentation on how to use the new actions here: https://pub.dev/packages/awesome_notifications

**Important Note:**For Android, badges automatically appear on app icons with push notifications. However, due to this Firebase issue, badges do not automatically appear on iOS app icons at the moment. We'll monitor the situation for a future fix that would allow for automatic badges for IOS.

[Torkilws]

@leighajarett is the update out?

[bdonovan858]

Hi @leighajarett, @whobick, and the FF team,

Thanks for your work on the new iOS badge feature. I noticed that the issue was closed, but I wanted to raise a concern that it might not fully address the needs most of us are looking for. The key functionality we're aiming for is for the badge count to increment on the recipient’s device when a push notification is triggered. Having the authenticated user's badge update only after a foreground action is taken on the device doesn't seem as beneficial.

I understand there might be issues with Firebase, but keeping this issue open could be very important. I believe many others share this viewpoint and would appreciate continued efforts to refine this feature.

[Torkilws]

@bdonovan858 so the badge functionality is out now?

[bdonovan858]

@Torkilws not specifically what you're looking for, but they've added an action that enables you to update your App Badge Count. This doesn't increment the badge for the recipient user on a push notification.

[ibm777p2]

@Torkilws not specifically what you're looking for, but they've added an action that enables you to update your App Badge Count. This doesn't increment the badge for the recipient user on a push notification.

then what is this for?

[ibm777p2]

I just checked this needs to be added manually because firebase has this issue firebase/flutterfire#9563 and it's blocking that to be automatically
https://docs.flutterflow.io/actions/actions/alerts-notifications/update-app-badge-count-ios-only#adding-stripe-payment-action

Then we need to figure out how use it manually.

[Torkilws]

Oh my god really. The whole point was that the badge appears when the user receives a push notification. Doesn't even need to be a number, just a red dot on the icon..

When would you even want to manually update the counter 🤔

[ibm777p2]

it's still useless because there is no action that would detect the background notification of the chat messages. This badge update in form of action which mean the end user needs to tap on something in the app in oder to trigger the action then that defeats the purpose of having the badge updated. We want the badge to be updated is because we want the user to tap the app when there is a badge but if this needs the user to tap the app first in order to update the badge defeats the purpose and it's a bit of nonsense.

[Torkilws]

@ibm777p2 exactly. We just want it to be the same as on android, where it is working correctly.

@leighajarett this issue is not resolved.

[ibm777p2]

@leighajarett I see your firebase department not able to collaborate with your department at the moment in oder to get the ios version working like android because the post of automated badge feature for ios is blocked due to this issue mentioned on the website firebase/flutterfire#9563.

Your both department should prioritize the issues and come up with a timeline when your teams can get this done?

Please consult with firebase, collaborate, prioritize and get this done.
Please find the timeline and post it here.

[Torkilws]

@ibm777p2 have you found any solution?

[ibm777p2]

@ibm777p2 have you found any solution?

There are developers that manually add code in x-code as a work around solution, the only downside on that is that need to be added every time you publish or test on your device. Not the ideal solution at all.

@leighajarett is there a time line to get this solved firebase/flutterfire#9563. and continue building the actual solution?

[Torkilws]

@ibm777p2 The firebase/flutterfire#9563 issue has been closed for a long time. Do you know if there is another issue created for this, to track updates and such?

You would think all flutter users that use firebase notifications would want this fixed.

[ibm777p2]

@ibm777p2 The firebase/flutterfire#9563 issue has been closed for a long time. Do you know if there is another issue created for this, to track updates and such?

You would think all flutter users that use firebase notifications would want this fixed.

@leighajarett the issue that FF mentioned is closed long time ago, will FF continue to develop the badge to be displayed automatically when there is a notification, the way it's now defeat the purpose, the user need to press something in order to execute an action for the badge to show.

Is there a plan to fix this?

[bdonovan858]

For those following along, I found a way to update the badge count when a push notification is triggered. This method sets the badge count to a fixed number (in this example, I've used 1). If the steps below seem intimidating, don’t worry—I'm not very technical myself, and I managed to figure it out!

1. Assuming you've enabled push notifications, FlutterFlow automatically generates a cloud function to send push notifications which you can find in your Firebase console under Build -> Functions:

• You'll see a function that is called "sendUserPushNotificationsTrigger"

2. Once you've located the function, open your Google Cloud Console and in the top search bar, search for Cloud Functions

3. This will bring you to a page with all your existing Cloud Functions, and click on "sendUserPushNotificationsTrigger"

4. This will bring you to the "sendUserPushNotificationsTrigger" page, click the "Source" tab. This will open up the source code associated with the function

5. Scroll down to line 180 of the code where you'll see the following code:
   -You'll see code that looks like the screenshot attached, except it won't have line 183: badge: 1,

6. Once you've located this section of the code, click the blue "Edit" button:

• move your cursor to the right edge of line 182 after "aps: {".
• Hit enter and type the following:
• badge: 1,

7. Then hit "Save and Redeploy" and every time a push notification is triggered, it will update the badge count to 1

NOTE: This solution doesn't dynamically update the badge count; however, in my opinion, it is much better than delivering a push notification without a badge. You will need to clear the badge count based on the business logic of your app. To create dynamic badge counts, you will need to create a custom cloud function. This function will have similar code but with the ability to set the badge count dynamically. I haven't done this yet, but hope to get to it soon.

Message me if you have any questions, happy to help in any way that I can!

[ibm777p2]

For those following along, I found a way to update the badge count when a push notification is triggered. This method sets the badge count to a fixed number (in this example, I've used 1). If the steps below seem intimidating, don’t worry—I'm not very technical myself, and I managed to figure it out!

1. Assuming you've enabled push notifications, FlutterFlow automatically generates a cloud function to send push notifications which you can find in your Firebase console under Build -> Functions:

• You'll see a function that is called "sendUserPushNotificationsTrigger"

2. Once you've located the function, open your Google Cloud Console and in the top search bar, search for Cloud Functions
3. This will bring you to a page with all your existing Cloud Functions, and click on "sendUserPushNotificationsTrigger"
4. This will bring you to the "sendUserPushNotificationsTrigger" page, click the "Source" tab. This will open up the source code associated with the function
5. Scroll down to line 180 of the code where you'll see the following code:
   -You'll see code that looks like the screenshot attached, except it won't have line 183: badge: 1,

6. Once you've located this section of the code, click the blue "Edit" button:

• move your cursor to the right edge of line 182 after "aps: {".
• Hit enter and type the following:
• badge: 1,

7. Then hit "Save and Redeploy" and every time a push notification is triggered, it will update the badge count to 1

NOTE: This solution doesn't dynamically update the badge count; however, in my opinion, it is much better than delivering a push notification without a badge. You will need to clear the badge count based on the business logic of your app. To create dynamic badge counts, you will need to create a custom cloud function. This function will have similar code but with the ability to set the badge count dynamically. I haven't done this yet, but hope to get to it soon.

Message me if you have any questions, happy to help in any way that I can!

once you want to clear the badge count you use the action of update app badge count for ios to 0 in flutterflow, correct? @bdonovan858

[bdonovan858]

Yes, that's correct @ibm777p2

[ibm777p2]

Yes, that's correct @ibm777p2

I think your solution works, it's just that changing the cloud function will add the badge for android and ios, then the action block will only clean up the ios device, right? @bdonovan858

[Torkilws]

@bdonovan858 Thank you for coming up with a solution that doesn't involve changing ios code. I will try this, but have a couple of observations:

• You have mentioned sendUserPushNotificationsTrigger, but for by case I schedule most of my notifications, so sendScheduledPushNotifications will in my case also need to be changed with the badge count.
• To clear the notifications, I assume one would have to use the "Update App Badge Count" (ios only) action and set the count to 0. And that this will clear the badge when opening the app on ios. Is this also needed on Android? I would assume not as I think that the "apns" section in the cloud function is only for ios.
• I also noticed that the Node version used for cloud functions (v16) is deprecated, so this code will probably change before the decomission date (jan 30. 2025).

[Torkilws]

I have now changed, deployed and tested this fix. Changing the following functions:

• sendPushNotificationsTrigger
• sendScheduledPushNotifications
• sendUserPushNotificationsTrigger

I received feedback from my friend with iphone, and can confirm that it worked!
I also did not need to add the action to set the badge count 0 at all, the badge was still removed on opening the app. Thanks again @bdonovan858

[ibm777p2]

I have now changed, deployed and tested this fix. Changing the following functions:

• sendPushNotificationsTrigger
• sendScheduledPushNotifications
• sendUserPushNotificationsTrigger

I received feedback from my friend with iphone, and can confirm that it worked! I also did not need to add the action to set the badge count 0 at all, the badge was still removed on opening the app. Thanks again @bdonovan858

@Torkilws did you just put badge: 1 like the image below on these cloud functions and everything work for android and ios?

sendPushNotificationsTrigger
sendScheduledPushNotifications
sendUserPushNotificationsTrigger

[Torkilws]

@ibm777p2 that is correct :)

[ibm777p2]

5. badge: 1,

Finally made work too. Thanks
@Torkilws @bdonovan858

[ibm777p2]

5. badge: 1,

Finally made work too. Thanks @Torkilws @bdonovan858

I think I still need to use the action block to clean it, the red badge doesn't go away by looking at the message.

[Torkilws]

@ibm777p2 I see now that it might have worked "out of the box" for me because I already had this custom action added to main.dart:

import 'package:clear_all_notifications/clear_all_notifications.dart';

Future clearAllNotifications() async {
  // Add your function code here!
  if (!isWeb) {
    await ClearAllNotifications.clear();
  }
}

Using
clear_all_notifications: ^1.0.0

[ibm777p2]

Super crazy the community actually solved this and the developers of flutterflow did not contributed much for our success.
This solutions is not perfect but it's everything you expected.