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?

Solution 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

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

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

Comments

[Prabhashi Buddhima]

Hi, I have tried SchedulerBinding.instance.addPostFrameCallback((_){ [_fcm.configure block] }); but still the alert dialog is not showing

[Ronak Punase]

Why are you using "showOverlayNotification"? You could just use showDialog and pass an Alert dialog to the showDialog method. Have you tried that?

[Jay]

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