Mastering Local Notifications in Flutter: A Comprehensive Guide on How To Implement and Customize

Nowadays finding an app that doesn't have a push notification feature is rare. We'll learn here how to have local push notifications in our app.

First thing first, we have to add the flutter_local_notifications plugin to our project.

flutter pub add flutter_local_notifications

Then we'll create a local_notification_service file and add our necessary codes there to have a separation of UI and logic code for better readability and maintainability.

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

class LocalNotificationService {
  static final flutterLocalNotificationsPlugin =
      FlutterLocalNotificationsPlugin();

  int notificationId = 1;

  static Future<void> init() async {
    // Initialize native android notification
    const AndroidInitializationSettings initializationSettingsAndroid =
        AndroidInitializationSettings('@mipmap/ic_launcher');

    // Initialize native Ios Notifications
    const DarwinInitializationSettings initializationSettingsIOS =
        DarwinInitializationSettings();

    const InitializationSettings initializationSettings =
        InitializationSettings(
      android: initializationSettingsAndroid,
      iOS: initializationSettingsIOS,
    );

    await flutterLocalNotificationsPlugin.initialize(
      initializationSettings,
    );
  }
}

We'll call the init method from our main function.

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

  // our init method
  await LocalNotificationService.init();

  runApp(const MyApp());
}

We'll now implement the showNotification*() method for our specific platform, the method will take a title and a message* parameter.

class LocalNotificationService {
  ...

  NotificationDetails getNotificationDetailsAndroid(
      String title, String value) {
    const AndroidNotificationDetails androidNotificationDetails =
        AndroidNotificationDetails('channel_id', 'Channel Name',
            channelDescription: 'Channel Description',
            importance: Importance.max,
            priority: Priority.high,
            ticker: 'ticker');

    const NotificationDetails notificationDetails =
        NotificationDetails(android: androidNotificationDetails);

    return notificationDetails;
  }

  NotificationDetails getNotificationDetailsIos(String title, String value) {
    final DarwinNotificationDetails iOSPlatformChannelSpecifics =
        DarwinNotificationDetails(
      presentAlert:
          true, // Present an alert when the notification is displayed and the application is in the foreground (only from iOS 10 onwards)
      presentBadge:
          true, // Present the badge number when the notification is displayed and the application is in the foreground (only from iOS 10 onwards)
      presentSound:
          true, // Play a sound when the notification is displayed and the application is in the foreground (only from iOS 10 onwards)
      // sound: String?,  // Specifics the file path to play (only from iOS 10 onwards)
      // badgeNumber: int?, // The application's icon badge number
      // attachments: List<IOSNotificationAttachment>?, // (only from iOS 10 onwards)
      subtitle: value, //Secondary description  (only from iOS 10 onwards)
      threadIdentifier: title, // (only from iOS 10 onwards)
    );

    final NotificationDetails notificationDetails =
        NotificationDetails(iOS: iOSPlatformChannelSpecifics);

    return notificationDetails;
  }

  Future<void> showNotification(
      {required String title, required String description}) async {
    final notificationDetails = Platform.isAndroid
        ? getNotificationDetailsAndroid(title, description)
        : getNotificationDetailsIos(title, description);
    await flutterLocalNotificationsPlugin.show(
      notificationId,
      title,
      description,
      notificationDetails,
      payload: 'Not present',
    );
  }
}

Now we can call the showNotification() method anywhere from our app to show a local notification.