How to show image in notification

Question

I show notification by using firebase and these packages:

• firebase_core: ^1.1.0
• firebase_messaging: ^10.0.0
• flutter_local_notifications: ^5.0.0+4

I have this code and it shows notification with title and body but I don't find any way to add image for notification:

initNotification() {
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      debugPrint("test notification alert");
      RemoteNotification? notification = message.notification;
      AndroidNotification? android = message.notification?.android;
      debugPrint('title : '+notification!.title.toString());
      debugPrint('notification image : '+notification.android!.imageUrl.toString());
      // debugPrint('title : '+notification.android);
      if (notification != null && android != null) {
        flutterLocalNotificationsPlugin.show(
            notification.hashCode,
            notification.title,
            notification.body,
            NotificationDetails(
              android: AndroidNotificationDetails(
                channel.id,
                channel.name,
                channel.description,
                color: Colors.blue,
                playSound: true,
                icon: '@mipmap/ic_launcher',
              ),
            ));
      }
    });

    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
      print('A new onMessageOpenedApp event was published!');
      RemoteNotification? notification = message.notification;
      AndroidNotification? android = message.notification?.android;
      if (notification != null && android != null) {
        showDialog(
            context: context,
            builder: (_) {
              return AlertDialog(
                title: Text(notification.title.toString()),
                content: SingleChildScrollView(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [Text(notification.body.toString())],
                  ),
                ),
              );
            });
      }
    });
  }

is there any way to show image please help me

Answer 1

To show network image,

final http.Response response = await http.get(Uri.parse(URL));
BigPictureStyleInformation bigPictureStyleInformation =
    BigPictureStyleInformation(
  ByteArrayAndroidBitmap.fromBase64String(base64Encode(image)),
  largeIcon: ByteArrayAndroidBitmap.fromBase64String(base64Encode(image)),
);
flutterLocalNotificationsPlugin.show(
  Random().nextInt(1000),
  title,
  description,
  NotificationDetails(
    android: AndroidNotificationDetails(channel.id, channel.name,
        channelDescription: channel.description,
        importance: Importance.high,
        styleInformation: bigPictureStyleInformation),
  ),
);

To show local image,

final String filePath = '${directory.path}/$fileName';
final BigPictureStyleInformation bigPictureStyleInformation =
    BigPictureStyleInformation(FilePathAndroidBitmap(filePath),
        largeIcon: FilePathAndroidBitmap(filePath));
flutterLocalNotificationsPlugin.show(
  Random().nextInt(1000),
  title,
  description,
  NotificationDetails(
    android: AndroidNotificationDetails(channel.id, channel.name,
        channelDescription: channel.description,
        importance: Importance.high,
        styleInformation: bigPictureStyleInformation),
  ),
);

Answer 2

In your listen callback you must retrieve the image url, download it and pass it to the AndroidNotificationDetails or IOSNotificationDetails.

Here is how you can do: First retrieve the url

String? _getImageUrl(RemoteNotification notification) {
  if (Platform.isIOS && notification.apple != null) return notification.apple?.imageUrl;
  if (Platform.isAndroid && notification.android != null) return notification.android?.imageUrl;
  return null;
}

Then download and save the picture

Future<String?> _downloadAndSavePicture(String? url, String fileName) async {
  if (url == null) return null;
  final Directory directory = await getApplicationDocumentsDirectory();
  final String filePath = '${directory.path}/$fileName';
  final http.Response response = await http.get(Uri.parse(url));
  final File file = File(filePath);
  await file.writeAsBytes(response.bodyBytes);
  return filePath;
}

Build the notification details

NotificationDetails _buildDetails(String title, String body, String? picturePath, bool showBigPicture) {
  final AndroidNotificationDetails androidPlatformChannelSpecifics = AndroidNotificationDetails(
    _channel.id,
    _channel.name,
    channelDescription: _channel.description,
    styleInformation: _buildBigPictureStyleInformation(title, body, picturePath, showBigPicture),
    importance: _channel.importance,
    icon: "notification_icon",
  );
    final IOSNotificationDetails iOSPlatformChannelSpecifics = IOSNotificationDetails(
    attachments: [if (picturePath != null) IOSNotificationAttachment(picturePath)],
  );
  final NotificationDetails details = NotificationDetails(
    android: androidPlatformChannelSpecifics,
    iOS: iOSPlatformChannelSpecifics,
  );
  return details;
}

And finally show the notification

await _flutterNotificationPlugin.show(
  0,
  title,
  body,
  details,
);

EDIT (add code block bellow):

BigPictureStyleInformation? _buildBigPictureStyleInformation(
    String title,
    String body,
    String? picturePath,
    bool showBigPicture,
  ) {
    if (picturePath == null) return null;
    final FilePathAndroidBitmap filePath = FilePathAndroidBitmap(picturePath);
    return BigPictureStyleInformation(
      showBigPicture ? filePath : const FilePathAndroidBitmap("empty"),
      largeIcon: filePath,
      contentTitle: title,
      htmlFormatContentTitle: true,
      summaryText: body,
      htmlFormatSummaryText: true,
    );
  }

It's a little bit long but with this plugin there is no shortest way to do that.