Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter local notification with action buttons and image

I want to push this type of notification with a firebase message. Now the time I am using a normal notification with https://pub.dev/packages/flutter_local_notifications this package. But I didn't see there is a way to add an Action button. As well as I want to remove this notification after 45second or with another firebase message. as well I'm developing this application for android and ios. If my question is not clear or need more information please free to comment.

enter image description here

I saw a Similar Question on Stackoverflow.

  • Flutter local notification with action buttons
  • Notification with action buttons
like image 236
Kasun Hasanga Avatar asked Jun 01 '21 14:06

Kasun Hasanga


People also ask

How do you add action buttons in Flutter local notification?

You may want to consider using awesome_notifications plugin in the meantime since it has support for notification buttons. You can then add the icon for the Action Button by adding the icon property on NotificationActionButton. The icon should be a String resource of the image mapped in the assets.

How do I display images in Flutter local notification?

To achieve an image on local notification, first add the awesome_notifications Flutter package by adding the following lines in pubspec. yaml file. awesome_notifications is the best flutter package we got to show local notifications in the Flutter app.

How do I send a local notification in Flutter?

Displaying a notification in Flutter To display a notification, we need to create a platform-specific NotificationDetails instance, which takes in arguments that are unique to each platform. AndroidNotificationDetails handles the configuration of notifications in Android devices.

How to add image on local notification in flutter?

To achieve an image on local notification, first add the awesome_notifications Flutter package by adding the following lines in pubspec.yaml file. awesome_notifications is the best flutter package we got to show local notifications in the Flutter app. How to add Image from Assets folder on Local Notification?

How do I schedule full-screen intent notifications in flutter?

If your application needs the ability to schedule full-screen intent notifications, add the following attributes to the activity you're opening. For a Flutter application, there is typically only one activity extends from FlutterActivity. These attributes ensure the screen turns on and shows when the device is locked.

How to assign button actions in flutter SDK?

Below are some button widgets that are shipped with Flutter SDK: Actions are assigned using onPressed () function. We are going to see two methods to assign Actions. Note: We are not going to use any other dependencies for this application. Using function reference.

What is a flutter button?

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Flutter provides a number of prebuilt widgets to use. There are different types of Button widgets that are provided by the Flutter SDK.


1 Answers

flutter_local_notification has yet to have support for Notification Action Buttons as mentioned on this ticket. You may want to consider using awesome_notifications plugin in the meantime since it has support for notification buttons.

To show notification with Action Button, simply use


void _showNotificationWithButton() {
  AwesomeNotifications().createNotification(
    content: NotificationContent(
        id: 10,
        channelKey: 'basic_channel',
        title: 'Simple Notification',
        body: 'Simple body'),
    actionButtons: <NotificationActionButton>[
      NotificationActionButton(key: 'yes', label: 'Yes'),
      NotificationActionButton(key: 'no', label: 'No'),
    ],
  );
}

You can then add the icon for the Action Button by adding the icon property on NotificationActionButton. The icon should be a String resource of the image mapped in the assets.

To listen for the Action Button press, use an actionStream listener. You can add this on the screen's initState()

AwesomeNotifications().actionStream.listen((receivedNotification) {
  // prints the key of the NotificationActionButton pressed
  debugPrint('Notification key pressed: ${receivedNotification.buttonKeyPressed}');
});
like image 97
Omatt Avatar answered Oct 16 '22 20:10

Omatt