top of page

[Flutter/dart] Display an icon on the notification screen with local_notification


Overview


You can create notifications using a library called local_notification. The official sample only has a title and body, but you can also add an icon like Line. This time, I will introduce how to display the icon on the notification screen.



Method


For android


set largeIcon property of AndroidNotificationDetails()


var styleInformation=DefaultStyleInformation(true, true);

var androidChannelSpecifics = AndroidNotificationDetails(
  "channel_id",
  "channel_name",
  "channel_description",
  importance: Importance.max,
  priority: Priority.high,
  largeIcon: FilePathAndroidBitmap(icon_path),  //here!
  styleInformation: styleInformation,
);

In my case, the icon image is saved locally, so I pass the image path (icon_path) to the argument of FilePathAndroidBitmap (). If you want to use the image in drawable resource, you can use DrawableResourceAndroidBitmap () (as far as I read the docs, I haven't tried it).


for ios


Do the following: icon_path is the path of the icon image.


var iosChannelSpecifics =IOSNotificationDetails(
    attachments: [IOSNotificationAttachment(icon_path)]
);

It should be noted that the image placed in icon_path will be moved by the system after creating the notification. If you're referencing icon_path anywhere other than creating a notification, make sure to copy the file and pass in that path.

Once validated, attached files are moved into the attachment data store so that they can be accessed by all of the appropriate processes.



Finally, create a platformChannelSpecific with the androidChannelSpecific and isoChannelSpecific created above as arguments.


var platformChannelSpecifics = 
NotificationDetails(
  android: androidChannelSpecifics,
  iOS: iosChannelSpecifics
);

The notification screen is as follows. (It's ios)


The image is borrowed from freepik.

Lastly


It seems that you can't bring an icon in front of the title like Line (please let me know if you can!).

Recent Posts

See All

[Flutter/Dart] Format string with TextField

What want to do I want to create an input form using TextField. For example, if the input content is a monetary amount, I would like to display it in 3-digit delimiters with a ¥ prefix. Rather than ha

Let's do our best with our partner:​ ChatReminder

iphone6.5p2.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Let's do our best with our partner:​ ChatReminder

納品:iPhone6.5①.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Theme diary: Decide the theme and record for each genre

It is a diary application that allows you to post and record with themes and sub-themes for each genre.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Inquiries: Please contact us on Twitter

  • Twitter
bottom of page