How to Add Action Buttons on Local Notification in Flutter

In this example, we are going to show you how to add an action button in local notification and listen to a button press and identify which button is pressed on the local notification. We will use awesome_notifications package to show local notifications.

First Look at: How to Show Local Notification in Flutter App

First, add awesme_notifications package in your project by adding the following lines in pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  awesome_notifications: ^0.6.19

Now import the package in your script:

import 'package:awesome_notifications/awesome_notifications.dart';

Initialize the channel for local notification in main() method before running your app.

void main() async {
   WidgetsFlutterBinding.ensureInitialized();

   AwesomeNotifications().initialize(
     'resource://drawable/notification_icon', 
     [            // notification icon 
        NotificationChannel(
            channelGroupKey: 'basic_test',
            channelKey: 'basic',
            channelName: 'Basic notifications',
            channelDescription: 'Notification channel for basic tests',
            channelShowBadge: true,
            importance: NotificationImportance.High,
            enableVibration: true,
        ),

     ]
  );
   
  runApp(MyApp()); //run your app.
}

Now you can show Local notifications with action buttons:

AwesomeNotifications().createNotification(
    content: NotificationContent( //simgple notification
        id: 123,
        channelKey: 'basic', //set configuration wuth key "basic"
        title: 'Welcome to FlutterCampus.com',
        body: 'This simple notification with action buttons in Flutter App',
        payload: {"name":"FlutterCampus"},
        autoDismissible: false,
    ),

    actionButtons: [
        NotificationActionButton(
          key: "open", 
          label: "Open File",
        ),

        NotificationActionButton(
          key: "delete", 
          label: "Delete File",
        )
    ]
);

You can also add the icon on the Action button:

NotificationActionButton(
  key: "delete", 
  label: "Delete File",
  icon: "resource://drawable/delete_icon",
)

See this also: How to Show Image from Assets and URL on Local Notification in Flutter App

The path of the icon is from the resource folder of Android, be sure you have placed the icon image at android/app/src/mai/res/ folder

How to Listen Action Button Press on Local Notification:

You can listen to the click on action button with the following code:

AwesomeNotifications().actionStream.listen((action) {
    if(action.buttonKeyPressed == "open"){
        print("Open button is pressed");
    }else if(action.buttonKeyPressed == "delete"){
        print("Delete button is pressed.");
    }    
});

Full Flutter/Dart App Example Code:

import 'package:awesome_notifications/awesome_notifications.dart';
import 'package:flutter/material.dart';

void main() async {
   WidgetsFlutterBinding.ensureInitialized();

   AwesomeNotifications().initialize(
     'resource://drawable/notification_icon', 
     [            // notification icon 
        NotificationChannel(
            channelGroupKey: 'basic_test',
            channelKey: 'basic',
            channelName: 'Basic notifications',
            channelDescription: 'Notification channel for basic tests',
            channelShowBadge: true,
            importance: NotificationImportance.High,
            enableVibration: true,
        ),

     ]
  );
   
  runApp(MyApp()); //run your app.
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    
      AwesomeNotifications().actionStream.listen((action) {
          if(action.buttonKeyPressed == "open"){
            print("Open button is pressed");
          }else if(action.buttonKeyPressed == "delete"){
            print("Delete button is pressed.");
          }else{
             print(action.payload); //notification was pressed
          }    
      });
    
     return MaterialApp(
         home: Home()
      );
  }
}

class Home extends  StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("Local Notification in Flutter"),
            backgroundColor: Colors.deepOrangeAccent,
        ),
        body: Container( 
            alignment: Alignment.topCenter,
            padding: EdgeInsets.all(20),
            child: Column(
              children: [
                    ElevatedButton(
                      onPressed: () async {
                            bool isallowed = await AwesomeNotifications().isNotificationAllowed();
                            if (!isallowed) {
                              //no permission of local notification
                              AwesomeNotifications().requestPermissionToSendNotifications();
                            }else{
                                //show notification
                                AwesomeNotifications().createNotification(
                                    content: NotificationContent( //simgple notification
                                        id: 123,
                                        channelKey: 'basic', //set configuration wuth key "basic"
                                        title: 'Welcome to FlutterCampus.com',
                                        body: 'This simple notification with action buttons in Flutter App',
                                        payload: {"name":"FlutterCampus"},
                                        autoDismissible: false,
                                    ),

                                    actionButtons: [
                                        NotificationActionButton(
                                          key: "open", 
                                          label: "Open File",
                                        ),

                                        NotificationActionButton(
                                          key: "delete", 
                                          label: "Delete File",
                                        )
                                    ]
                                );
                           }
                      }, 
                      child: Text("Show Notification With Button")
                    ),
                    
              ],
            ),
        ),
    );
  } 
}

Here, we have one button, and when the user presses the button, the local notification with action button will be shown.

Output Screenshot:

In this way, you can show local notifications with action buttons in Flutter.