Local notifications in flutter

In this article we will focus on how to create local notifications in flutter by using awesome_notifications package.

Local notifications are notifications that are scheduled by the app and delivered on the same device. We use local notifications to get user's attention. With local notifications we can display an alert, play a sound, or badge our app's icon. For example, an app downloading a file on background could ask the system to display an alert when the app finishes downloading the file.

This article will cover various aspects of local notifications, beginning with Basic Notification. We will then explore Big Picture, Emoji, Action button, progress bar, and scheduled notifications (which are notifications set to repeat at specific date and time).

Create a Flutter project

In order to get started we need to create a flutter project. In your terminal you can easily create a flutter project by running the following command flutter create <Project name>, after creating your project you can open it with your favorite code editor.

After creation of the project we need to install dependencies that we will need to run our Project, and for our case we will install awesome_notifications, make sure you add awesome_notifications in pubspec.yaml file.

After that let's continue with the setup on android and iOS.

Android setup

For android configuration we'll go to the awesome_notification page and scroll to the Initial configuration section -> Configuring android for Awesome Notification click here.

In the first step we'll see that we're required to update build.grade file located inside "android/app/" folder and set minSdkVersion to 21 and the compileSdkVersion and targetSdkVersion to 34.

The second step is to update AndroidManifest.xml file located "android/app/src/main" and add the following permissions.

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

Then with in the same file, inside activity tag make sure exported is set to true, android:exported="true"

And that's all setup we're required for android.

iOS setup

For iOS setup we're have few configuration to do, mhhhh actually we just need to make sure if the following variable have the required values.

• Build libraries for distribution -> NO
• Only safe API extensions -> NO
• iOS Deployment Target -> NO

To verify them open you're project iOS folder with Xcode and navigate to Runner -> Target Runner -> Build settings, and you can find the above variables by simply searching them.

But also we need to make modifications of our Podfile file you can refer it here

And that's we need in order to get started in iOS.

Initialize Awesome Nofification

In this section we will initialize Awesome notification so we can be able to send notification.

To initialize Awesone notification open main.dart file and inside our main function call the AwesomeNotification constructor and then call initialize method.

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

  AwesomeNotifications().initialize();
  runApp(const MyApp());
}

When we call .initialize() we'll see that it accepts four parameters which are defaultIcon, channels, channelGroups and debug.

Let's start with the defaultIcon:

• For the defaultIcon we will set null so that awesome notification wi'll use the default app icon.

Then we will pass a list of NotificationChannel which are used for creating a notification.

The following is a sample of the NotificationChannel.

NotificationChannel(
    channelKey: "basic_notification",
    channelName: "Basic notifications",
    channelDescription: "Notification channel for basic tests",
    importance: NotificationImportance.Max,
    defaultPrivacy: NotificationPrivacy.Private,
    enableVibration: true,
    defaultColor: Colors.redAccent,
    channelShowBadge: true,
    enableLights: true,
)

The above code defines settings for our notification settings.

Now our main function will be as follows

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

    AwesomeNotifications().initialize(
        null,
        [
            NotificationChannel(
                channelKey: "basic_notification",
                channelName: "Basic notifications",
                channelDescription: "Notification channel for basic tests",
                importance: NotificationImportance.Max,
                defaultPrivacy: NotificationPrivacy.Private,
                enableVibration: true,
                defaultColor: Colors.redAccent,
                channelShowBadge: true,
                enableLights: true,
            ),
        ],
        debug: false,
    );
    runApp(const MyApp());
}

After finishing up setup of our notification we need to request permission for Notification. First we will check if user has granted notification permission else we request it.

Add the following code in the initState of you're home page Widget

@override
void initState() {
  AwesomeNotifications().isNotificationAllowed().then(
    (isAllowed) {
      if (!isAllowed) {
        AwesomeNotifications().requestPermissionToSendNotifications();
      }
    },
  );

  super.initState();
}

This will request permission for our app to send notification to the user.

And that's it for the initialization of local notification, if we hot restart our project we will see a pop that requests notification permission.

Basic notification

In this section we will create our first Notification, let's get into it.

First we will need to modify our home page widget and remove the initial flutter code that comes in when we create our project and add the following code.

Scaffold(
  body: SafeArea(
    child: Center(
      //
      child: ElevatedButton(
        onPressed: ()  {
        },
        child: const Text("Trigger Notification"),
      ),
    ),
  ),
)

In the above code we have updated our home widget and add a button that will be responsible to trigger our notification.

Now our button wait's for the function that it will be calling. Let's create a function that will be triggering notifications.

void localNotification() {
   AwesomeNotifications().createNotification(
      content: NotificationContent(
        id: 1,
        channelKey: 'basic_notification',
        title: "Proc notification",
        body: "Hey awesome prosper",
      ),
    );
}

In the above function we call createNotification from AwesomeNotifications which accepts the following parameters

• id - an ID of the sent notification
• channelKey - this is the channel that we created while initializing our notification
• title - notification title
• body - body of the notification

And now let's return in to our button and call our function.

If we hot restart our application and click the button we will the a notification pop.

Conclusion

Let's end here for this article, in our next article we will focus on BigPicture, action button and scheduled notification, for now you can try to play more with the notifications and see what you can do with it.