Flutter: FCM background notification large icon

Question

I'm using firebase_messaging and flutter_local_notifications for notifications, and I was able to show a large icon in case of local(foreground) notifications, but I didn't seem to find a way to show the same large icon when the app is background.

Answer 1

A better way to use largeIcon is using the image property in notification payload when you are sending the notification:

const payload = {
        notification: {
          title: 'title',
          body: 'description',
          image: 'large_icon_url',
          sound : "default"
        },
      };

Answer 2

handle background noti and show noti using local notification.

FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

Answer 3

This code help you to receive a Notification and to use in your app :

void initMessaging() {
var androiInit = AndroidInitializationSettings(‘@mipmap/ic_launcher’);//for logo
  var iosInit = IOSInitializationSettings();
  var initSetting=InitializationSettings(android: androiInit,iOS:
   iosInit);
  fltNotification = FlutterLocalNotificationsPlugin();
  fltNotification.initialize(initSetting);
  var androidDetails =
   AndroidNotificationDetails(‘1’, ‘channelName’, ‘channel 
    Description’);
  var iosDetails = IOSNotificationDetails();
  var generalNotificationDetails =
   NotificationDetails(android: androidDetails, iOS: iosDetails);
FirebaseMessaging.onMessage.listen((RemoteMessage message) {     RemoteNotification notification=message.notification;
   AndroidNotification android=message.notification?.android;
   if(notification!=null && android!=null){
     fltNotification.show(
       notification.hashCode, notification.title, notification.
       body, generalNotificationDetails);
}
});
}

If you have any difficulty, please check this article : Flutter Push Notification Medium . Thanks.

Answer 4

1- use flutter_local_notifications in backgroundMessageHandler to display the image

2- remove the "notification" in the payload and add your data in "data:{ title: 'title', body: 'description', image: 'image', }"