flutter_local_notifications: Display Local Notifications

Welcome to another exciting blog post where we explore the amazing world of Flutter packages. Today, we'll delve into the powerful flutter_local_notifications package, which allows you to display local notifications in your Flutter applications. Notifications are a crucial aspect of any mobile app, as they help you deliver important information and engage with your users effectively. So, let's dive right in!

What is the flutter_local_notifications package?

The flutter_local_notifications package is a robust and easy-to-use solution for displaying local notifications in your Flutter apps. It provides a high-level API that simplifies the process of creating and scheduling notifications, making it a breeze to keep your users informed and engaged.

Installation

Getting started with flutter_local_notifications is simple. Open your Flutter project and add the following dependency to your pubspec.yaml file:

dependencies:
  flutter_local_notifications: ^2.0.0

Once you've added the dependency, run flutter pub get to fetch the package. You're now ready to integrate local notifications into your app!

Configuring Permissions

Before we dive into using the package, it's important to configure the necessary permissions for displaying notifications on both Android and iOS.

Android: Open the android/app/src/main/AndroidManifest.xml file and add the following permissions:

<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />

iOS: Open the ios/Runner/Info.plist file and add the following key-value pairs:

<key>UIBackgroundModes</key>
<array>
  <string>fetch</string>
  <string>remote-notification</string>
</array>

Creating Notifications

Now, let's see how easy it is to create and schedule notifications using the flutter_local_notifications package.

Initializing the FlutterLocalNotificationsPlugin

The first step is to initialize the FlutterLocalNotificationsPlugin instance. You can do this in your app's entry point, such as the main function. Here's an example:

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
    FlutterLocalNotificationsPlugin();

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await initializeNotifications();
  runApp(MyApp());
}

Future<void> initializeNotifications() async {
  const AndroidInitializationSettings initializationSettingsAndroid =
      AndroidInitializationSettings('@mipmap/ic_launcher');
  final IOSInitializationSettings initializationSettingsIOS =
      IOSInitializationSettings();
  final InitializationSettings initializationSettings =
      InitializationSettings(
    android: initializationSettingsAndroid,
    iOS: initializationSettingsIOS,
  );
  await flutterLocalNotificationsPlugin.initialize(initializationSettings);
}

Displaying a Notification

Once the plugin is initialized, you can easily display a notification. Here's an example of how to create a basic notification:

Future<void> showNotification() async {
  const AndroidNotificationDetails androidPlatformChannelSpecifics =
      AndroidNotificationDetails(
    'channel_id',
    'channel_name',
    'channel_description',
    importance: Importance.max,
    priority: Priority.high,
    ticker: 'ticker',
  );
  const NotificationDetails platformChannelSpecifics =
      NotificationDetails(android: androidPlatformChannelSpecifics);
  await flutterLocalNotificationsPlugin.show(
    0,
    'Notification Title',
    'Notification Body',
    platformChannelSpecifics,
    payload: 'notification_payload',
  );
}

Make sure to customize the notification details based on your app's requirements.

Scheduling Notifications

The flutter_local_notifications package also allows you to schedule notifications for a specific date and time. Here's an example:

Future<void> scheduleNotification() async {
  const AndroidNotificationDetails androidPlatformChannelSpecifics =
      AndroidNotificationDetails(
    'channel_id',
    'channel_name',
    'channel_description',
    importance: Importance.max,
    priority: Priority.high,
    ticker: 'ticker',
  );
  const NotificationDetails platformChannelSpecifics =
      NotificationDetails(android: androidPlatformChannelSpecifics);
  await flutterLocalNotificationsPlugin.zonedSchedule(
    0,
    'Scheduled Notification Title',
    'Scheduled Notification Body',
    tz.TZDateTime.now(tz.local).add(const Duration(seconds: 5)),
    platformChannelSpecifics,
    androidAllowWhileIdle: true,
    uiLocalNotificationDateInterpretation:
        UILocalNotificationDateInterpretation.absoluteTime,
    matchDateTimeComponents: DateTimeComponents.time,
    payload: 'scheduled_notification_payload',
  );
}

In the above example, the notification is scheduled to appear 5 seconds from the current time.

Conclusion

And that's it! You've learned how to integrate the flutter_local_notifications package into your Flutter app and display local notifications effortlessly. Notifications play a vital role in engaging users and delivering important updates, so make sure to leverage this powerful package in your future projects.

Remember to check out the official documentation for more detailed information and additional features offered by the flutter_local_notifications package.