Local notifications in flutter
Published: 2024-01-31 21:09:12

In this article we will focus on how to create local notifications in flutter by using [awesome_notifications](https://pub.dev/packages/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](https://pub.dev/packages/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](https://pub.dev/packages/awesome_notifications#-configuring-android-for-awesome-notifications).

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](https://pub.dev/packages/awesome_notifications#-configuring-ios-for-awesome-notifications)

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oerx71kwv6gyt57lsbav.png)


## 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cm2nlv2dpdyy1c4749bn.png)

## 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.