Display Local Notification in Flutter

Create Free Backend With Appwrite

Display Local Notification in Flutter

The flutter_local_notifications package can be used with Flutter to show local notifications. You may use this package to schedule and show notifications in your Flutter App.

Step 1: Create Flutter Project

Let’s create a flutter project called local_notification by flutter create command. Follow the below steps to create a flutter project.

flutter create local_notification

Step 2: Add flutter_local_notifications Package

To add the flutter_local_notifications package to your Flutter project, open the pubspec.yaml file and add the following code:

dependencies:
  flutter_local_notifications: ^15.1.1

Step 3: Create File

Without increasing the complexity of the app, let’s create 3 files. main.dart : In this file we will do the initiation home_screen.dart : This file will be used as UI to implement and show notifications in the app notification_service.dart : This will maintain the core logic of the notification.

Here is code for main.dart file:

import 'package:flutter/material.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';
import 'package:local_noti/home_screen.dart';
import 'package:local_noti/service/notification_service.dart';

FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
    FlutterLocalNotificationsPlugin();
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await NotificationService.init();
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomeScreen(),
    );
  }
}

Here is code for home_screen.dart file:

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

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InkWell(
            onTap: () => NotificationService.showNotification(
                  title: "This is the title of the notification",
                  body: "This is the body of the notification",
                ),
            child: const Text('Send Notification')),
      ),
    );
  }
}

Here is code for notification_service.dart file:

/// Importing this for showing log
import 'dart:developer';

/// Dependency import for local notifications
import 'package:flutter_local_notifications/flutter_local_notifications.dart';

import 'main.dart';

/// Remember the global varibales I have created in main.dart
/// this import allows us to use that varibale

/// Notificaition Service class handles everything regarding notifications
class NotificationService {
  /// the method is static, for making it easier to use. You can follow the object
  /// instance method as well

  static Future<void> init() async {
    /// This is where start the initialization

// ****** Andriod Initialization ******

    /// @mipmap/ic_launcher' is the icon for the notification, which is deafult in flutter
    /// if you want to use your custom icon make sure to provide the path to that icon.

    AndroidInitializationSettings androidInitializationSettings =
        const AndroidInitializationSettings('@mipmap/ic_launcher');

// ****** IOS Initialization ******

    DarwinInitializationSettings darwinInitializationSettings =
        const DarwinInitializationSettings(

// this will ask permissions to display alert and others are clean with the name
            requestAlertPermission: true,
            requestBadgePermission: true,
            defaultPresentSound: true);

// ****** Combining  Initializations ******

    InitializationSettings initializationSettings = InitializationSettings(
        iOS: darwinInitializationSettings,
        android: androidInitializationSettings);

    /// now using the global instance of FlutterLocalNotificationsPlugin()
    /// Let's Initialize the  notification
    bool? init = await flutterLocalNotificationsPlugin
        .initialize(initializationSettings);
    log('Noti $init');
  }

/* 

Notifications have few things : id, title, body and payload, 
in this method the id is optional, however you're recommended to
provide id  for different notifications. 
 
*/
  static showNotification({
    int? id = 0,
    required String title,
    required String body,
    var payload,
  }) async {
/* 

In notifications, there are few things that we keep in mind.The sound, 
how important the notification is and what is the priority of the notification, 
playload ( this basically means what data does your notifications hold ) of the notification. 

 We need channel id and channel name in the notification, here  "flutter-tut" is 
channel id and "flutter tutorial" is channel name. 

You can give whatever name you wish to give.


*/

// ****** Andriod Configuration ******

    AndroidNotificationDetails androidNotificationDetails =
        const AndroidNotificationDetails(
      'flutter-tut', 'flutter tutorial',
      playSound: true,

// Higher the Priority and Importance,
// will result in high visibility of notification

      priority: Priority.max,
      importance: Importance.max,
    );

// ****** iOS Configuration : with the necessary requirements ******

    DarwinNotificationDetails darwinNotificationDetails =
        const DarwinNotificationDetails(
      presentAlert: true,
      presentSound: true,
      presentBanner: true,
      presentBadge: true,
    );

    /// let's combine both details.

    NotificationDetails noti = NotificationDetails(
        iOS: darwinNotificationDetails, android: androidNotificationDetails);

    /* 

This line will show the notification, after all the configuration is done
 
Passing the payload is totally option. However if your want to navigate to a 
particular screen on click of the notification of perform certain action. Payload
become crutial. 

*/

    await flutterLocalNotificationsPlugin.show(0, title, body, noti,
        payload: payload);
  }
}

Step 4: Run the App

Now, run the app and click on the Send Notification button to display the local notification.