flutter_local_notifications Examples

flutter_local_notifications Examples.

Flutter Local Notifications - How To Examples

Flutter Local Notifications is a Flutter plugin that allows you to display local notifications on Android and iOS devices. In this tutorial, we will go through various examples to demonstrate how to use the flutter_local_notifications plugin.

Installation

To use the flutter_local_notifications plugin in your Flutter project, follow these steps:

1. Open the pubspec.yaml file of your project.

2. Add the following line under the dependencies section:

   flutter_local_notifications: ^<latest_version>

   Replace <latest_version> with the latest version of the plugin. You can find the latest version on the flutter_local_notifications pub.dev page.

3. Save the file and run the following command in your terminal:

   flutter pub get

   This command will fetch the plugin and its dependencies.

Examples

Example 1: Displaying a simple notification

Let's start by displaying a simple notification with a title and body.

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

Future<void> displayNotification() async {
  FlutterLocalNotificationsPlugin notifications = FlutterLocalNotificationsPlugin();
  const AndroidInitializationSettings androidSettings = AndroidInitializationSettings('@mipmap/ic_launcher');
  final InitializationSettings initializationSettings = InitializationSettings(android: androidSettings);
  await notifications.initialize(initializationSettings);

  const AndroidNotificationDetails androidPlatformChannelSpecifics = AndroidNotificationDetails(
    'channel_id',
    'channel_name',
    'channel_description',
    importance: Importance.max,
    priority: Priority.high,
  );
  const NotificationDetails platformChannelSpecifics = NotificationDetails(android: androidPlatformChannelSpecifics);

  await notifications.show(
    0,
    'Notification Title',
    'Notification Body',
    platformChannelSpecifics,
  );
}

• A notification with the title "Notification Title" and body "Notification Body" will be displayed on the device's notification center.

Example 2: Scheduling a notification

You can also schedule a notification to be shown at a specific time. Let's schedule a notification to be displayed after 5 seconds.

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

Future<void> scheduleNotification() async {
  FlutterLocalNotificationsPlugin notifications = FlutterLocalNotificationsPlugin();
  const AndroidInitializationSettings androidSettings = AndroidInitializationSettings('@mipmap/ic_launcher');
  final InitializationSettings initializationSettings = InitializationSettings(android: androidSettings);
  await notifications.initialize(initializationSettings);

  const AndroidNotificationDetails androidPlatformChannelSpecifics = AndroidNotificationDetails(
    'channel_id',
    'channel_name',
    'channel_description',
    importance: Importance.max,
    priority: Priority.high,
  );
  const NotificationDetails platformChannelSpecifics = NotificationDetails(android: androidPlatformChannelSpecifics);

  await notifications.schedule(
    0,
    'Scheduled Notification Title',
    'Scheduled Notification Body',
    DateTime.now().add(const Duration(seconds: 5)),
    platformChannelSpecifics,
  );
}

• A notification with the title "Scheduled Notification Title" and body "Scheduled Notification Body" will be scheduled to be displayed after 5 seconds. The notification will appear on the device's notification center when the scheduled time is reached.

Example 3: Handling notification click

You can handle the click event of a notification and perform custom actions. Let's display a dialog when the user clicks on a notification.

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

Future<void> handleNotificationClick() async {
  FlutterLocalNotificationsPlugin notifications = FlutterLocalNotificationsPlugin();
  const AndroidInitializationSettings androidSettings = AndroidInitializationSettings('@mipmap/ic_launcher');
  final InitializationSettings initializationSettings = InitializationSettings(android: androidSettings);
  await notifications.initialize(initializationSettings);

  const AndroidNotificationDetails androidPlatformChannelSpecifics = AndroidNotificationDetails(
    'channel_id',
    'channel_name',
    'channel_description',
    importance: Importance.max,
    priority: Priority.high,
  );
  const NotificationDetails platformChannelSpecifics = NotificationDetails(android: androidPlatformChannelSpecifics);

  notifications.initialize(initializationSettings, onSelectNotification: (String? payload) async {
    if (payload != null) {
      showDialog(
        context: navigatorKey.currentState!.overlay!.context,
        builder: (_) => AlertDialog(
          title: const Text('Notification Clicked'),
          content: Text('Payload: $payload'),
        ),
      );
    }
  });

  await notifications.show(
    0,
    'Notification Title',
    'Notification Body',
    platformChannelSpecifics,
    payload: 'Custom Payload',
  );
}

• A notification with the title "Notification Title" and body "Notification Body" will be displayed on the device's notification center. When the user clicks on the notification, a dialog will appear with the title "Notification Clicked" and the payload "Custom Payload".

Example 4: Cancelling a notification

You can cancel a scheduled notification or remove a displayed notification programmatically. Let's cancel a notification after it is displayed.

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

Future<void> cancelNotification() async {
  FlutterLocalNotificationsPlugin notifications = FlutterLocalNotificationsPlugin();
  const AndroidInitializationSettings androidSettings = AndroidInitializationSettings('@mipmap/ic_launcher');
  final InitializationSettings initializationSettings = InitializationSettings(android: androidSettings);
  await notifications.initialize(initializationSettings);

  await notifications.show(
    0,
    'Notification Title',
    'Notification Body',
    const NotificationDetails(),
  );

  // Wait for some time before cancelling the notification
  await Future.delayed(const Duration(seconds: 5));

  await notifications.cancel(0);
}

• A notification with the title "Notification Title" and body "Notification Body" will be displayed on the device's notification center. After 5 seconds, the notification will be automatically canceled and removed from the notification center.

Example 5: Customizing notification appearance

You can customize the appearance of notifications by providing custom icons, colors, and styles. Let's customize the icon and color of a notification.

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

Future<void> customizeNotificationAppearance() async {
  FlutterLocalNotificationsPlugin notifications = FlutterLocalNotificationsPlugin();
  const AndroidInitializationSettings androidSettings = AndroidInitializationSettings('@mipmap/ic_launcher');
  final InitializationSettings initializationSettings = InitializationSettings(android: androidSettings);
  await notifications.initialize(initializationSettings);

  const AndroidNotificationDetails androidPlatformChannelSpecifics = AndroidNotificationDetails(
    'channel_id',
    'channel_name',
    'channel_description',
    importance: Importance.max,
    priority: Priority.high,
    icon: '@mipmap/custom_icon',
    color: Colors.red,
  );
  const NotificationDetails platformChannelSpecifics = NotificationDetails(android: androidPlatformChannelSpecifics);

  await notifications.show(
    0,
    'Notification Title',
    'Notification Body',
    platformChannelSpecifics,
  );
}

• A notification with the title "Notification Title" and body "Notification Body" will be displayed on the device's notification center. The notification will use a custom icon (@mipmap/custom_icon) and have a red color.

Conclusion

In this tutorial, we covered various examples to demonstrate how to use the flutter_local_notifications plugin. You learned how to display a simple notification, schedule a notification, handle notification clicks, cancel a notification, and customize notification appearance. Use these examples as a starting point to integrate local notifications into your Flutter applications.