How to Show Local Notification in Flutter App

In this example, we are going to show you how to implement local notification and display notification in Flutter App. We will create a different kinds of Local notifications such as Notification with images, locked notifications, and fullscreen mode.

First, you need to awesome_notifications package in your project by adding the following lines in pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  awesome_notifications: ^0.6.19

Now, after adding a package to your project, it's time to set up local notifications for Android and iOS.

Setup Icon for Notification on status bar:

Android: For, Android app, you do not have much to set up except the app icon. Copy the app icon at android/app/src/main/res/drawable/ folder.

Here, we have the icon "notification_icon.png" in the drawable folder, it is only for android. For, iOS, it will have an icon of the app.

Initialization of Local Notification:

In main() method, you have to initialize local notifications and configure different kinds of notifications to be shown in the app. 

import 'package:awesome_notifications/awesome_notifications.dart';

void main() async {
   WidgetsFlutterBinding.ensureInitialized();
   AwesomeNotifications().initialize(
     'resource://drawable/notification_icon', 
     [            // notification icon 
        NotificationChannel(
            channelGroupKey: 'basic_test',
            channelKey: 'basic',
            channelName: 'Basic notifications',
            channelDescription: 'Notification channel for basic tests',
            channelShowBadge: true,
            importance: NotificationImportance.High,
            enableVibration: true,
        ),

        NotificationChannel(
            channelGroupKey: 'image_test',
            channelKey: 'image',
            channelName: 'image notifications',
            channelDescription: 'Notification channel for image tests',
            defaultColor: Colors.redAccent,
            ledColor: Colors.white,
            channelShowBadge: true,
            importance: NotificationImportance.High
        )

        //add more notification type with different configuration

     ]
  );
  runApp(MyApp());
}

Here, we have set up different channels for notification. In another word, we have set up different configurations for different kinds of notifications.

How to Show Simple Local Notification?

bool isallowed = await AwesomeNotifications().isNotificationAllowed();
if (!isallowed) {
  //no permission of local notification
  AwesomeNotifications().requestPermissionToSendNotifications();
}else{
    //show notification
    AwesomeNotifications().createNotification(
        content: NotificationContent( //simgple notification
            id: 123,
            channelKey: 'basic', //set configuration wuth key "basic"
            title: 'Welcome to FlutterCampus.com',
            body: 'This simple notification is from Flutter App',
        )
    );
}

Here the channelKey is from NotificationChannel() which is initialized in main() method.

Simple Notification Output

How to Show Local Notification with Large Icon?

AwesomeNotifications().createNotification(
  content: NotificationContent( //simgple notification
      id: 123,
      channelKey: 'basic', //set configuration wuth key "basic"
      title: 'Welcome to FlutterCampus.com',
      body: 'This simple notification is from Flutter App',

      largeIcon: 'asset://assets/images/elephant.jpg',
      //large icon will be displayed at right side
  )
);

You have to pass a large icon image from the assets folder to show a larger icon on the right side of the notification. Be sure you have indexed the images or image folder as assets in pubspect.yaml file. You see more details at: How to Add Image from Assets Folder in Flutter App

How to Show Local Notification with Image from Assets?

AwesomeNotifications().createNotification(
    content: NotificationContent( //with asset image
        id: 1234,
        channelKey: 'image',
        title: 'Simple Notification With Image',
        body: 'This simple notification is from Flutter App',
        bigPicture: 'asset://assets/images/elephant.jpg',
        notificationLayout: NotificationLayout.BigPicture,
    )
);

To show local notification with an image from the assets folder, you have to pass asset image like in the above code in bigPicture attribute. And, you also have to change notificationLayout to NotificationLayout.BigPicture

How to Show Local Notification with Image from URL?

AwesomeNotifications().createNotification(
  content: NotificationContent( //with image from URL
      id: 12345,
      channelKey: 'image',
      title: 'Simple Notification with Network Image',
      body: 'This simple notification is from Flutter App',
      bigPicture: 'https://www.fluttercampus.com/img/logo_small.webp',
      notificationLayout: NotificationLayout.BigPicture
  )
);

To display a local notification with a network image from a URL, you have to pass the URL of an image on bigPicture parameter.

How to show Locked Local Notification?

AwesomeNotifications().createNotification(
    content: NotificationContent( //simgple notification
        id: 123,
        channelKey: 'basic', //set configuration wuth key "basic"
        title: 'Welcome to FlutterCampus.com',
        body: 'This simple notification is from Flutter App',
        locked: true,
    )
);

To show locked local notification, you have to pass locked:true. When you make the locked local notification, the User will not able to dismiss the notification from the panel.

How to Get Data from Notification on Click?

You have to add the listener in the main() method at main.dart file

AwesomeNotifications().actionStream.listen((ReceivedNotification receivedNotification){
    print(receivedNotification.payload!['name']);
    //output from first notification:  FlutterCampus
});

And you have to show the notification with a payload like below:

AwesomeNotifications().createNotification(
    content: NotificationContent( //simgple notification
        id: 123,
        channelKey: 'basic', //set configuration wuth key "basic"
        title: 'Welcome to FlutterCampus.com',
        body: 'This simple notification is from Flutter App',
        payload: {"name":"FlutterCampus"}
    )
);

Cancel Specific Notification:

AwesomeNotifications().dismiss(notification_id);

Cancel All Notifications:

AwesomeNotifications().dismissAllNotifications();

You can also push local notification using Firebase: How to Push Local Notification with Firebase in Flutter

Full Dart/App Example:

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

void main() async {
   WidgetsFlutterBinding.ensureInitialized();
   AwesomeNotifications().initialize(
     'resource://drawable/notification_icon', 
     [            // notification icon 
        NotificationChannel(
            channelGroupKey: 'basic_test',
            channelKey: 'basic',
            channelName: 'Basic notifications',
            channelDescription: 'Notification channel for basic tests',
            channelShowBadge: true,
            importance: NotificationImportance.High,
            enableVibration: true,
        ),

        NotificationChannel(
            channelGroupKey: 'image_test',
            channelKey: 'image',
            channelName: 'image notifications',
            channelDescription: 'Notification channel for image tests',
            defaultColor: Colors.redAccent,
            ledColor: Colors.white,
            channelShowBadge: true,
            importance: NotificationImportance.High
        )

        //add more notification type with different configuration

     ]
  );

  //tap listiner on notification
  AwesomeNotifications().actionStream.listen((ReceivedNotification receivedNotification){
     print(receivedNotification.payload!['name']);
     //output from first notification:  FlutterCampus
  });

  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return MaterialApp(
         home: Home()
      );
  }
}

class Home extends  StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("Local Notification in Flutter"),
            backgroundColor: Colors.deepOrangeAccent,
        ),
        body: Container( 
            alignment: Alignment.topCenter,
            padding: EdgeInsets.all(20),
            child: Column(
              children: [
                    ElevatedButton(
                      onPressed: () async {
                            bool isallowed = await AwesomeNotifications().isNotificationAllowed();
                            if (!isallowed) {
                              //no permission of local notification
                              AwesomeNotifications().requestPermissionToSendNotifications();
                            }else{
                                //show notification
                                AwesomeNotifications().createNotification(
                                    content: NotificationContent( //simgple notification
                                        id: 123,
                                        channelKey: 'basic', //set configuration wuth key "basic"
                                        title: 'Welcome to FlutterCampus.com',
                                        body: 'This simple notification is from Flutter App',
                                        payload: {"name":"FlutterCampus"}
                                    )
                                );
                           }
                      }, 
                      child: Text("Show Notification")
                    ),

                    ElevatedButton(
                      onPressed: () async {
                            bool isallowed = await AwesomeNotifications().isNotificationAllowed();
                            if (!isallowed) {
                              //no permission of local notification
                              AwesomeNotifications().requestPermissionToSendNotifications();
                            }else{
                                //show notification
                                AwesomeNotifications().createNotification(
                                    content: NotificationContent( //with asset image
                                        id: 1234,
                                        channelKey: 'image',
                                        title: 'Simple Notification With Image',
                                        body: 'This simple notification is from Flutter App',
                                        bigPicture: 'asset://assets/images/elephant.jpg',
                                        notificationLayout: NotificationLayout.BigPicture,
                                        fullScreenIntent: true, //it will display over app
                                        locked: true,
                                        payload: {"id":"1234"}
                                        
                                    )
                                );
                           }
                      }, 
                      child: Text("Show Notification With Asset Image")
                    ),

                    ElevatedButton(
                      onPressed: () async {
                            bool isallowed = await AwesomeNotifications().isNotificationAllowed();
                            if (!isallowed) {
                              //no permission of local notification
                              AwesomeNotifications().requestPermissionToSendNotifications();
                            }else{
                                //show notification
                                AwesomeNotifications().createNotification(
                                    content: NotificationContent( //with image from URL
                                        id: 12345,
                                        channelKey: 'image',
                                        title: 'Simple Notification with Network Image',
                                        body: 'This simple notification is from Flutter App',
                                        bigPicture: 'https://www.fluttercampus.com/img/logo_small.webp',
                                        notificationLayout: NotificationLayout.BigPicture,
                                        payload: {"id":"12345"}
                                    )
                                );
                           }
                      }, 
                      child: Text("Show Notification With Image From URL")
                    ),

                    ElevatedButton(
                      onPressed: (){
                          AwesomeNotifications().dismiss(123);
                      }, 
                      child: Text("Cancel Notification")
                    ),

                    ElevatedButton(
                      onPressed: (){
                            AwesomeNotifications().dismissAllNotifications();
                      }, 
                      child: Text("Cancel All Notifications")
                    ),
              ],
            ),
        ),
    );
  } 
}

Output Screenshot:

Widget Output

Notification Output:

In this way, you can display Local notifications in both Android and iOS Flutter App.