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

user_4863533 · Answer

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 _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,
);

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

How to show image in notification

1 Answers