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.
Top comments (0)