Flutter local notification action button

Flutter Local Notification Action Button

Flutter allows you to create local notifications within your app. These notifications can have action buttons that can perform specific actions when tapped by the user.

Example:

Let’s say you want to create a notification with two action buttons: “Yes” and “No”. When the user taps “Yes”, a specific action is performed, and when the user taps “No”, a different action is performed.

First, make sure to add the flutter_local_notifications dependency to your pubspec.yaml file:

dependencies:
  flutter_local_notifications: ^9.0.0
  

Next, you can use the following code to create a local notification with action buttons:

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

void main() async {
  FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
      FlutterLocalNotificationsPlugin();

  const AndroidInitializationSettings initializationSettingsAndroid =
      AndroidInitializationSettings('@mipmap/ic_launcher');
  final InitializationSettings initializationSettings =
      InitializationSettings(android: initializationSettingsAndroid);
  await flutterLocalNotificationsPlugin.initialize(initializationSettings,
      onSelectNotification: (String payload) async {
    if (payload != null) {
      print('Notification payload: $payload');
    }
  });

  const String channelId = 'default_channel';
  const String channelName = 'Default Channel';
  const String channelDescription = 'Default Notification Channel';
  final AndroidNotificationChannel channel = AndroidNotificationChannel(
    channelId,
    channelName,
    channelDescription,
    importance: Importance.max,
  );
  await flutterLocalNotificationsPlugin
      .resolvePlatformSpecificImplementation<
          AndroidFlutterLocalNotificationsPlugin>()
      ?.createNotificationChannel(channel);

  const int notificationId = 0;
  const String notificationTitle = 'Notification Title';
  const String notificationBody = 'Notification Body';

  const String actionButtonKeyYes = 'KEY_YES';
  const String actionButtonKeyNo = 'KEY_NO';

  const AndroidNotificationDetails androidPlatformChannelSpecifics =
      AndroidNotificationDetails(
    channelId,
    channelName,
    channelDescription,
    importance: Importance.max,
    priority: Priority.high,
    onlyAlertOnce: true,
    showWhen: false,
    importance: Importance.high,
    priority: Priority.high,
    key: 'notification_action',
    styleInformation: BigTextStyleInformation(''),
    additionalExperiments: {
      // Handle user taps on action buttons
      'on-select-action-type': 'foreground',
    },
    addActionButtons: [
      NotificationActionButton(
        actionButtonKeyYes,
        'Yes',
        actionType: ActionType.Default,
      ),
      NotificationActionButton(
        actionButtonKeyNo,
        'No',
        actionType: ActionType.Default,
      ),
    ],
  );

  final NotificationDetails platformChannelSpecifics =
      NotificationDetails(android: androidPlatformChannelSpecifics);
  await flutterLocalNotificationsPlugin.show(
    notificationId,
    notificationTitle,
    notificationBody,
    platformChannelSpecifics,
    payload: 'notification_payload',
  );
}

class NotificationActionButton extends NotificationAction {
  const NotificationActionButton(
    String key,
    String label, {
    ActionType actionType,
  }) : super(key, label, actionType: actionType);
}

  

In the above code, we first initialize the FlutterLocalNotificationsPlugin with necessary settings. We also create an AndroidNotificationChannel for our notifications. Then, we define our action buttons using the NotificationActionButton class.

When creating the AndroidNotificationDetails, we pass the action buttons using the ‘addActionButtons’ parameter, providing the button’s key, label, and optional action type. In the example, we used ActionType.Default to perform a default action when the button is tapped. You can also specify ActionType.Disabled to disable the button or ActionType.InputField to display a text input field.

Finally, we use the show method of the FlutterLocalNotificationsPlugin to display the notification, passing the notification details and payload.

Note that the above code is just a basic example. You can customize various aspects of the notification, such as the app icon, notification sound, etc., based on your requirements.