Flutter Firebase messaging - push notification is not showing when app is open

Question

I'm new to flutter and I'm just trying to receive firebase push notifications to my flutter app. Push notifications are receiving when the app is closed and in the background. But when the app is open, push notification is receiving, but it's not showing the alert notification (I want to show the push notification title and body as an alert in my app if it's opened). Here's my code for it.

_fcm.configure(
      onMessage: (Map<String, dynamic> message) async {
        showDialog(
          context: context,
          builder: (context) => AlertDialog(
            content: ListTile(
              title: Text(message['notification']['title']),
              subtitle: Text(message['notification']['body']),
            ),
            actions: <Widget>[
              FlatButton(
                child: Text('Ok'),
                onPressed: () => Navigator.of(context).pop(),
              ),
            ],
          ),
        );
        print("onMessage: $message");
      },
      onLaunch: (Map<String, dynamic> message) async {
        print("onLaunch: $message");
        
      },
      onResume: (Map<String, dynamic> message) async {
        print("onResume: $message");
      },
    );

Can someone please help me with this?

score 9 · Accepted Answer · edited Feb 22 '21 at 18:49

Finally, I was able to manage my issue by using overlay_support package

I have referred the following question links:

Flutter - Firebase Messaging Snackbar not showing

Flutter - how to get current context?

and I managed my issue by following the below tutorial and package

tutorial: https://medium.com/flutter-community/in-app-notifications-in-flutter-9c1e92ea10b3

package: https://pub.dev/packages/overlay_support/install

I wrapped my MaterialApp() widget in the OverlaySupport() widget.

return OverlaySupport(
            child: MaterialApp(....
               
          ));

and then I add showOverlayNotification to my _fcm.configure --> onMessage:

_fcm.configure(
      onMessage: (Map<String, dynamic> message) async {
        print("onMessage: $message");
        showOverlayNotification((context) {
          return Card(
            margin: const EdgeInsets.symmetric(horizontal: 4),
            child: SafeArea(
              child: ListTile(
                leading: SizedBox.fromSize(
                    size: const Size(40, 40),
                    child: ClipOval(
                        child: Container(
                      color: Colors.black,
                    ))),
                title: Text(message['notification']['title']),
                subtitle: Text(message['notification']['body']),
                trailing: IconButton(
                    icon: Icon(Icons.close),
                    onPressed: () {
                      OverlaySupportEntry.of(context).dismiss();
                    }),
              ),
            ),
          );
        }, duration: Duration(milliseconds: 4000));

        print(message['notification']['title']);
      },
      onLaunch: (Map<String, dynamic> message) async {
        print("onLaunch: $message");
      },
      onResume: (Map<String, dynamic> message) async {
        print("onResume: $message");
      },
    );

Hari Aditya · Answer 2 · 2020-11-26T15:17:39.573

You can make use of the Get package to display a snackBar when the user receives a notification while the app is in the Foreground.

_fcm.configure(
  onMessage: (Map<String, dynamic> message) async {
    Get.snackbar("message['notification']['title']", snackPosition: SnackPosition.TOP,);
  },
  onLaunch: (Map<String, dynamic> message) async {
    print("onLaunch: $message");
  },
  onResume: (Map<String, dynamic> message) async {
    print("onResume: $message");
  },
);

The 'snackPosition' parameter allows the snackBar to be displayed at the top, hence appearing as an alert message.

There is a good explanation of how to use the flutter_local_notifications package in conjunction with FCM here

Ronak Punase · Answer 3 · 2020-09-14T05:58:43.827

2

FCM provides you with three callbacks. OnResume, OnLaunch and OnMessage.

When the app is in foreground, the onMessage is triggered, and it gives you the opportunity to carry out any custom action.

In order to show a notification while the app is in foreground, you can make use of Flutter Local Notifications package.

You might not be able to see an alert dialog due to the lack of context inside onMessage callback. Try wrapping the _fcm.configure inside

SchedulerBinding.instance.addPostFrameCallback((_){ [_fcm.configure block] });

edited Sep 14 '20 at 05:58

answered Sep 14 '20 at 05:53

Ronak Punase

126
4

Hi, I have tried SchedulerBinding.instance.addPostFrameCallback((_){ [_fcm.configure block] }); but still the alert dialog is not showing – Prabhashi Buddhima Sep 15 '20 at 07:56
Why are you using "showOverlayNotification"? You could just use showDialog and pass an Alert dialog to the showDialog method. Have you tried that? – Ronak Punase Sep 16 '20 at 18:36

score 1 · Answer 4 · answered Jan 29 '22 at 12:22

1

Guys if you have connected your phone to your pc and are testing it it will not show notifications .Same thing happened to me so i built the apk then tried it again it actually worked

answered Jan 29 '22 at 12:22

Akashgreninja

501
5
11

1

Thanks for this answer! I was following a tutorial (he used an emulator). And he used the firebase cloud messaging website to push a notification. I tried it as well but it did not show anything. Glad I know why it was not working :D – Jay Mar 17 '22 at 15:24

score 1 · Answer 5 · answered Apr 20 '22 at 07:22

1

Actually default behavior of Android is like not showing notification when app is open.

So, if you want to show notification when App is open then add below line after initializing FirebaseApp and FirebaseMessaging .

FirebaseMessaging.instance.setForegroundNotificationPresentationOptions(alert: true,badge: true,sound: true);

answered Apr 20 '22 at 07:22

Israr

220
3
11

1

Thats work!!!! ... – a.snss Jun 23 '23 at 13:47

score 0 · Answer 6 · edited Apr 29 '23 at 09:49

The new methods to handle the notification when the app is opened are as below:

  // Called when the app is in background state
  FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) async {
    await _handleMessage(message);
  });

  // Called when the app is in foreground (open)
  FirebaseMessaging.onMessage.listen((RemoteMessage message) async {
    await _handleMessage(message);
  });

Flutter Firebase messaging - push notification is not showing when app is open

6 Answers6