Flutter Push Notification: How To Add Large Icon

In the flutter notification plugin https://pub.dev/packages/flutter_local_notifications

There is a feature that allows flutter developers to add a preffered large icon to customise their notification to their taste. But adding this icon becomes a difficult task for most of us as it comes with an android bitmap type that seems hard to implement.

Note this large icon differs from the usual notification icon with the String type. A pictorial example of what a large icon looks like:

Many of us developers may have been wanting to add a large icon to our push notification but don’t know how.

In this article I will be showing us how to do that in 4 simple steps.

Step 1:

First install the http plugin if you haven’t

https://pub.dev/packages/http

Step 2:

Get the image url you wish to use as the large icon

Future<Uint8List> getImageBytes(String imageUrl) async {
  var response = await http.get(Uri.parse(imageUrl));
  return response.bodyBytes;
}

Step 3:

In your firebase.onMessage.listen method call back your function as below:

FirebaseMessaging.onMessage.listen((RemoteMessage message) async {
      var res = await getImageBytes('YOUR_IMAGE_URL_HERE');
      AndroidBitmap<Object> androidBitmap = ByteArrayAndroidBitmap.fromBase64String(base64Encode(res));
}

Step 4:

Finally, pass it in your android notification details

AndroidNotificationDetails androidNotificationDetails = AndroidNotificationDetails(
    'Your_channel', 'Your_channel', importance: Importance.high, icon: '@mipmap/ic_launcher',
    priority: Priority.high, playSound: true, color: Colors.blue, 
    largeIcon: androidBitmap
);

Thank you..