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?

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