Firebase push notification is not popup on the screen [Flutter]

Question

I am trying to implement firebase push notifications for a flutter app.

But it appears just as an icon in the status bar. How can i make it pop up?

I want popup on the screen when notification is received.

Here is how my code looks like:

 Future<bool> sendNotification(var userToken, String bodyMessage) async {
 final data = {
  "notification": {
    "body": bodyMessage,
    "title": "Leave Application",
  },
  "priority": "high",
  "data": {
    "click_action": "FLUTTER_NOTIFICATION_CLICK",
    "id": "1",
    "status": "done"
  },
  "registration_ids": userToken,
 };

 final headers = {
  'content-type': 'application/json',
  'Authorization':
  'key=<Firebase web key>',
 };

 final response = await http.post(postUrl,
    body: json.encode(data),
    encoding: Encoding.getByName('utf-8'),
    headers: headers);

 if (response.statusCode == 200) {
  print(response.statusCode.toString());
  print("Working");
  return true;
 } else {
  print(postUrl.toString());
  print(response.statusCode.toString());
  print("Not Working");
  return false;
 }
}

Answer 1

All notifications will be sent to Miscellaneous channel if android_channel_id is not specified in the FCM HTTP API. Miscellaneous channel comes with a default level of importance which only has sound but will not pop on screen.

To make the notification pop on screen, you need to create a notification channel with importance of max/high. For detailed steps on how to create a notification channel, you may refer to the Notification Channel Documentation by FlutterFire.

After the notification channel is created, you can add the channel id (eg: high_importance_channel) into the FCM HTTP API request body and the notifications that sent to this channel should start to pop on screen when your app is in the background.

{
  "notification": {
    "android_channel_id": "high_importance_channel",
    "title": "Notification Title",
    "body": "Notification body ...",
    "sound": "default",
    "priority": "high",
    "time_to_live": 86400,
    "click_action": "FLUTTER_NOTIFICATION_CLICK",
  },
  "data": {
    "post_id": 10000012,
    "type": "NEWS",
  },
  "condition": "'dogs' in topics"
}

Answer 2

I tried to reproduce the problem and dug deeper and from what I found you can't achieve what you want in Flutter. Although, you can handle Firebase onMessageReceived in Java/Kotlin and then show the notification that you want.

Please refer here: FCM for android: popup system notification when app is in background