Flutter - How to display FCM notification outside notification bar like whatsapp

Question

I implemented flutter push notification with FCM which is working perfectly for when the app is foreground, background and when the app get closed. But I am looking for a way to display my notification just will the way Whatsapp display popup notification when you are not inside it app just like a floating on top(Not in the notification bar this time.)see image attached:

As you can see in the image above, the user is inside the gallery app on the device, and the popup notification message of another app shows. Below is what my implement implement in flutter looks like:

   FirebaseMessaging.instance.getInitialMessage().then((message) {

            print(message);
        });
   FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {

            print(message);
        });

FirebaseMessaging.onMessage.listen((RemoteMessage message) {

            print(message);
});

My android manifest is like below:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="app_name">
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
    <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
    <uses-permission android:name="android.permission.QUERY_ALL_PACKAGES" />
 

    <application
        android:allowBackup="false"
        android:label="app_name"
        android:icon="@mipmap/ic_launcher">
        <receiver android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationReceiver" />
        <receiver android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationBootReceiver">
            <intent-filter>
                <action android:name="android.intent.action.BOOT_COMPLETED"></action>
            </intent-filter>
        </receiver>

        <service
            android:name="MyNavigationService"
            android:foregroundServiceType="location" >
        </service>
        <receiver
            android:name="app_name.FirebaseBroadcastReceiver"
            android:exported="false"
            android:permission="com.google.android.c2dm.permission.SEND">
            <intent-filter>
                <action android:name="com.google.android.c2dm.intent.RECEIVE" />
            </intent-filter>
        </receiver>

        <!--service
            android:name="app_name.java.MyFirebaseMessagingService"
            android:exported="false">
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT" />
            </intent-filter>
        </service-->

        <service
            android:name="app_name.service.MyFirebaseInstanceIDService"
            android:exported="false">
            <intent-filter>
                <action android:name="com.google.firebase.INSTANCE_ID_EVENT" />
            </intent-filter>
        </service>

        <meta-data android:name="com.google.android.geo.API_KEY"
            android:value="A......"/>

        <meta-data
            android:name="com.google.firebase.messaging.default_notification_channel_id"
            android:value="@string/default_notification_channel_id" />
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:exported="true"
            android:showWhenLocked="false"
            android:turnScreenOn="false"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
       
            <meta-data
                android:name="io.flutter.embedding.android.SplashScreenDrawable"
                android:resource="@drawable/launch_background" />
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT" />
            </intent-filter>

            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
            <intent-filter>
                <action android:name="FLUTTER_NOTIFICATION_CLICK" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>

        </activity>
         <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
</manifest>

My flutter version for pub is: firebase_messaging: ^13.0.4

Answer 1

I was able to work around a solution just in case anyone visits this page for a solution. I was able to work around it with awesome_notification It is a local notification pub.dev in flutter and I implement it in my FirebaseMessaging.onBackgroundMessage So when the app is on background and FCM is triggered then the future function wrapping awesome notification is called as seen below:

call below in

void main() async{

 FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

}

And my _firebaseMessagingBackgroundHandler is like below:

Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  bool isAllowed = await AwesomeNotifications().isNotificationAllowed();
 if (!isAllowed) return;


  await AwesomeNotifications().createNotification(
      content: NotificationContent(
          id: -1, // -1 is replaced by a random number
          channelKey: 'alerts',
          title: message.notification.title,
          body: message.notification.body,
          bigPicture: 'https://storage.googleapis.com/cms-storage-bucket/d406c736e7c4c57f5f61.png',
          largeIcon:'https://storage.googleapis.com/cms-storage-bucket/d406c736e7c4c57f5f61.png',
          notificationLayout: NotificationLayout.BigPicture,
          payload: {'notificationId': '1234567890'}),
      actionButtons: [
        NotificationActionButton(key: 'REDIRECT', label: 'Redirect'),

        NotificationActionButton(
            key: 'REPLY',
            label: 'Reply Message',
            requireInputText: true,
            actionType: ActionType.SilentAction
        ),
        NotificationActionButton(
            key: 'DISMISS',
            label: 'Dismiss',
            actionType: ActionType.DismissAction,
            isDangerousOption: true)
      ]
  );

}

Please note implement this in main.dart