Using Awesome Notifications with Flutter

Do you have a Flutter app that requires you to send notifications to the user such as when a payment is successful, to inform the user about the new changes/upgrades in the app, or to present a progress bar to the user when downloading a receipt, file from your app or even to remind the user about scheduled meetings?

There are different options you could use such as Firebase Cloud Messaging, OneSignal, PusherBeams, AWS Simplify, Flutter Local Notifications, and Awesome Notifications amongst others.

GETTING STARTED WITH AWESOME NOTIFICATIONS

I really needed to use push notifications in one of my upcoming apps on PlayStore so I stumbled on the awesome notifications package. I figured that the documentation on the pub. dev was amazing but for people like me that love things to be done quickly, I decided to write documentation to help navigate your way through awesome notifications in a simple and precise manner.

Awesome notification is a flutter package that is used to create, update, send, and schedule notifications for the user. It can serve different purposes such as functioning as a progress bar while the user downloads from your app, as a messaging bar(picture something like a WhatsApp notification), or even as a Media Player that shows a media controller with action buttons, that allows the user to send commands without bringing the application to foreground. It is a robust package that is very easy to use.

It has the following features

• It has Cross-platform support. It can create local notifications on Android, IOS, and the Web.
• It allows you to create fully custom notifications such as adding images, emotions, emojis, and different layouts. It also allows you to create custom actions that the user can interact with when the notification is displayed.
• It is very easy to use
• It allows offline notifications even when the app is not running.
• You can schedule notifications to be displayed at specific times and intervals. For example, you would want to schedule notifications for apps like TODO APPS, Calendar Apps, Meditation Apps, or even Medication Apps(to remind the user of their appointments with the doctor or when to use their drugs)
• You can group notifications too based on their group source

DISCLAIMER!!!!!

Firebase Cloud Messaging can work with Awesome Notification. However, you would need to use the Awesome Notifications FCM plugin.

Also, please don’t use Flutter Local Notifications with Awesome Notifications. Your app won’t run. I didn’t read the documentation when I tried this, I had several errors in my code.

Having said this, Let’s get started……

In your terminal. To open your terminal, type;

Ctrl+Shift+ `(Windows)

Command+Shift+ ` (Mac)

Write this command in your terminal to add awesome notification as a dependency in your pubspec.yaml.

flutter pub add awesome_notifications

Or you can add it directly to your dependencies by

dependencies:
awesome_notifications:any

To ensure that it works, you would have to make the following modifications. This is because the package requires certain permissions from the app. It requires a min sdk version of 21 and a Java Compiled Sdk version of 33 on Android 13 and certain modifications for IOS.

How do you do this?

Open your build.gradle which is the root of your android/app folder(or in your terminal, use the following)

check the directory you are in by typing;
pwd

You should be in the root folder of your app. If you are,type
cd android,
cd app,
code build.gradle

In your build.gradle, change it to

android{
compileSdkVersion 33
.....

defaultConfig{
minSdkVersion 21
targetVersion 33
......
}
.....
}

In your terminal, type

flutter pub get

However, if you are using a MacBook, you would need to click on Runner, Target Runner, Build Settings.

In Runner Target:

• Build libraries for distribution => NO
• Only safe API extensions => NO
• iOS Deployment Target => 11 or greater

In all other Targets:

• Build libraries for distribution => NO
• Only safe API extensions => YES

I got this line for MacUsers from pub.dev

If you have done this, you are good to go

Working with Awesome Notifications in Flutter App

Import the package by using

import 'package:awesome_notifications/awesome_notifications.dart

Initialize the package in your main. dart file by typing

AwesomeNotification().initialize()

[

‘main.dart’ is the entry point of the app. It is where the ‘main()’ function is located and it is responsible for setting up the app’s main widget tree and configuring any plugins that the app needs to use. By initializing it, you want to make it readily available throughout the app.

]

To initialize, it takes the following parameters

• default Icon(String). You can set it to null if you want to use the icon of your flutter app
• List of Channels. It is used with the function NotificationChannel.
• List of Channels Groups

Let’s see Notification Channel….

To use the notification Channel, you simply have to use NotificationChannel() which takes different parameters which are

• Channel Key- It takes a string that is required. It is a unique id that you would use to interact with other notifications throughout the cycle of your app.
• Channel Name: It takes a string(Required)
• Description: It also takes a string where you are stating or describing your notification in simpler words. It is also required.

The others are optional which are;

• Channel Show Badge: It is a boolean. It takes either true or false
• PlaySound: It determines if the notification should play sound. It takes either true or false
• Icon
• Critical Alerts: Here the notification is still sent even when the user puts his device on DoNotDisturb(DnD).
• There are more options that the notification channel takes. You could play around with it.

Having said this, let’s put it together

AwesomeNotifications().initialize(null, [    
NotificationChannel(     
 ledColor: Colors.pink,       
 enableVibration: true,        
channelKey: "test_channel",        
channelName: "Test Notification",        
channelDescription: 'Basic Notifcaction for the user')  ]);

The next task will be to create a new notification. But before this, you would need to confirm that the user allows your app to send notifications.

 AwesomeNotifications().isNotificationAllowed().then((isAllowed) {
      if (!isAllowed) {NotificationChannel()
        AwesomeNotifications().requestPermissionToSendNotifications();
      }
    });

This is to test if your user has accepted permission to receive notifications from your app. If permission has not been allowed, the user would see a bottom dialog stating to the user to accept. So, awesome notifications help you to handle the permissions without necessarily having to write fresh codes from the start.

You can create awesome notifications by using the CreateNotification method.

The CreateNotification Method takes the following parameters;

• a required NotificationContent content
• a schedule(an optional parameter)
• a list of Action Buttons

I would only show us the content parameter which is required. We can play around with others

Notification Content takes the following options;

• id: this is a required number that identifies a unique notification.
• Channel Key: recall, that we initialized the notification at our main.dart and we used a channel_key. It is the same with this too. You would use the same channel_key you initialized
• Title. It takes a String
• Body: It has the description of your notification. It takes a string
• Wake-up screen: It looks like a pop notification. It takes a true or false. To use this, you would need to add the following lines to your AndroidManifest.xml to be able to use it,

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

• Color
• Background Color
• Display on Foreground
• Display on Background

Therefore, to create a notification, simply type…

AwesomeNotifications().createNotification(
          content: NotificationContent(
              id: 1,
              color: Colors.red
              channelKey: 'test_channel',
              title: 'Time to meditate' +
                  Emojis.smile_smiling_face_with_heart_eyes,
              body: 'Take some time to meditate and be mindful',
              criticalAlert: true,
              wakeUpScreen: true)),

You can use and play around other features

You are ready and set to use notifications…..

How do you handle the Notifications?

For example,

What happens when the notification is created?

What happens when a notification is displayed on the system Status Bar?

What happens when the user taps the notification?

What happens when the user dismisses the notification?

You can handle them all using

AwesomeNotifications.setListeners()

The Listeners help you handle each of them. For example;

• If you want something to happen when the notification is created. Simply type;

onNotificationCreatedMethod;

• To test if the notification is displayed, use;

onNotificationDisplayMethod;

• What happens when the user taps it can be done using

onActionReceivedMethod;

• when the user dismisses it can be done using

onDismissActionReceivedMethod

You can use any or more of these methods depending on the nature of your app.

You are good to go to creating custom notifications for your Flutter app.

Let's put all of these together.

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

void main() {
AwesomeNotifications().initialize(null, [    
NotificationChannel(     
 ledColor: Colors.pink,       
 enableVibration: true,        
channelKey: "test_channel",        
channelName: "Test Notification",        
channelDescription: 'Basic Notifcaction for the user')  ]);
  runApp(const MyApp());
}

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


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Awesome Notifications Test',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
          useMaterial3: true,
        
        primarySwatch: Colors.blue,
      ),
      home: TestPage(),
    );
  }
}



class TestPage extends StatefulWidget {
  const TestPage({super.key});

  @override
  State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: (){

AwesomeNotifications().isNotificationAllowed().then((isAllowed) {
      if (!isAllowed) {
        AwesomeNotifications().requestPermissionToSendNotifications();
      }else{
AwesomeNotifications().createNotification(
          content: NotificationContent(
              id: 1,
              color: Colors.red
              channelKey: 'test_channel',
              title: 'Hello, this is The Flutter Mentor'
              body: 'Thank you for tapping me',
              criticalAlert: true,
              wakeUpScreen: true)),
        },
        child: Center(
          child: Text("Tap"),
        ),
      ),
    );
}
    });
         
  }
}

What we just did here was to create a Stateful Widget called TestPage which has Text in the center called “Tap Me” and when the user taps the text, they receive a notification. You can customize it to suit your taste.

Let’s also try setListeners to monitor the lifecycle of your application.

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

void main() {
AwesomeNotifications().initialize(null, [    
NotificationChannel(     
 ledColor: Colors.pink,       
 enableVibration: true,        
channelKey: "test_channel",        
channelName: "Test Notification",        
channelDescription: 'Basic Notifcaction for the user')  ]);
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Awesome Notifications Test',
      theme: ThemeData(
        /
        primarySwatch: Colors.blue,
      ),
      home: TestPage(),
    );
  }
}

class TestPage extends StatefulWidget {
  const TestPage({super.key});

  @override
  State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: (){

AwesomeNotifications().isNotificationAllowed().then((isAllowed) {
      if (!isAllowed) {
        AwesomeNotifications().requestPermissionToSendNotifications();
      }else{
           AwesomeNotifications().createNotification(
          content: NotificationContent(
              id: 1,
              color: Colors.red
              channelKey: 'test_channel',
              title: 'Hello, this is The Flutter Mentor'
              body: 'Thank you for tapping me',
              criticalAlert: true,
              wakeUpScreen: true,
              payload: {'data': 'example payload'},
)),

             
           AwesomeNotifications().setListeners(onActionReceivedMethod: (receivedNotification) {
    if (receivedNotification.payload != null) {
      // handle notification payload here
      print('Notification payload: ${receivedNotification.payload}');
    })

}
    });
},
        child: Center(
          child: Text("Tap"),
        ),
      ),
    );
  }
}

You could play around with other setListeners methods and other features depending on the nature of the app.

I hope this documentation was simple enough as compared to some packages that require a whole lot of code writing. I would be writing another piece where I would be stating how to use scheduled notifications, emojis, a progress bar, and other fun features with the awesome notifications package. In the meantime, Have fun playing around with this package.

I hope it was easy and precise!

My name is Jesutoni Aderibigbe, an aspiring Google Software engineer.