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

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?

Solution 1:^[1]

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");
      },
    );

Solution 2:^[2]

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

Solution 3:^[3]

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] });

Solution 4:^[4]

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

Solution 5:^[5]

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);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Hany Alsamman
Solution 2
Solution 3
Solution 4	Akashgreninja
Solution 5	Israr

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]