how to create a notification with small image using a String image path in Flutter?

Question

I have tried to watch a lot of tutorials that show how to implement natification with big picture using big picture style information like this

var bigPictureStyleInformation = BigPictureStyleInformation(
  FilePathAndroidBitmap(attachmentPicturePath),
  contentTitle: '<b>Attached Image</b>',
  htmlFormatContentTitle: true,
  summaryText: 'Test Image',
  htmlFormatSummaryText: true,
);

but what I really want is to show notification with small image in Android like this

how to make notification like that if I have a string image path? so it seems I have to download the image from server then 'attach' it to notification. how to do that

Answer 1

For future users:

If you want to have the same image as shown in the attached image, you should pass largeIcon for AndroidNotificationDetails.

The code is something like this(This example shows both large icon and big image together):

This example is from flutter_local_notifications.

  Future<String> _downloadAndSaveFile(String url, String fileName) async {
    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;
  }

Future<void> _showBigPictureNotification() async {
    final String largeIconPath = await _downloadAndSaveFile(
        'https://via.placeholder.com/48x48', 'largeIcon');
    final String bigPicturePath = await _downloadAndSaveFile(
        'https://via.placeholder.com/400x800', 'bigPicture');
    final BigPictureStyleInformation bigPictureStyleInformation =
        BigPictureStyleInformation(FilePathAndroidBitmap(bigPicturePath),
            largeIcon: FilePathAndroidBitmap(largeIconPath),
            contentTitle: 'overridden <b>big</b> content title',
            htmlFormatContentTitle: true,
            summaryText: 'summary <i>text</i>',
            htmlFormatSummaryText: true);
    final AndroidNotificationDetails androidPlatformChannelSpecifics =
        AndroidNotificationDetails(
            'big text channel id', 'big text channel name',
            channelDescription: 'big text channel description',
            styleInformation: bigPictureStyleInformation);
    final NotificationDetails platformChannelSpecifics =
        NotificationDetails(android: androidPlatformChannelSpecifics);
    await flutterLocalNotificationsPlugin.show(
        0, 'big text title', 'silent body', platformChannelSpecifics);
  }