Skip to main content

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.