Local Push Notification in Flutter
In today’s world if we look at any live app in the market has the web notification or local notification functionality. This shows the importance of integrating our app with notification functionality. Local Notification is widely used to inform the user about any information or a way to alert the user in realtime without the use of the internet. These notification are pre-scheduled by the developer according to the various actions performed by the user in the app.
Table of Content
Need of Local Push Notification
How to implement Local Notification in Flutter?
Creating a Flutter Local Notification object
Need of Local Push Notification?
- Scheduled notification.
- Setting Up the project
- No web request is required to display Local notification.
- No limit of notification per user.
- Originate from the same device and displayed on the same device.
- Alert the user or remind the user to perform some task.
How to implement Local Notification in Flutter?
Thankfully in flutter, we had a package to do it. This package provides us the required functionality of Local Notification. Using this package we can integrate our app with Local Notification in android and ios app both.
flutter_local_notifications | Flutter Package
A cross platform plugin for displaying and scheduling local notifications for Flutter applications with the ability to…pub.dev
flutter_local_notifications: ^latest version
install this package into your pubspec.ymal file and don’t forget to import
import 'package:flutter_local_notifications/flutter_local_notifications.dart';
Setting Up the project
Edit your AndroidManifest file
Add the following permission to integrate your app with the ability of scheduled notification.
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>Add this inside the application section
<receiver android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationBootReceiver">
<intent-filter>
<action android:name="android.intent.action.BOOT_COMPLETED"></action>
</intent-filter>
</receiver>
<receiver android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationReceiver" />Add vibration permission
<uses-permission android:name="android.permission.VIBRATE" />Creating a Flutter Local Notification object
FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
FlutterLocalNotificationsPlugin();
flutterLocalNotificationsPlugin is our object that we will use to perform various operations.
Creating initState
void initState() {
super.initState();
var initializationSettingsAndroid =
AndroidInitializationSettings('flutter_devs');
var initializationSettingsIOs = IOSInitializationSettings();
var initSetttings = InitializationSettings(
initializationSettingsAndroid, initializationSettingsIOs);
flutterLocalNotificationsPlugin.initialize(initSetttings,
onSelectNotification: onSelectNotification);
}
- AndroidInitializationSettings is a class that initializes the settings for android devices. This class is used to provide an icon for our notification.
- IOSInitializationSettings plugin used to initialize the settings for ios devices.
- InitializationSettings plugin used to initialize the settings of each platform (Android and ios).
- initialize method is used to set the setting according to the platform of the device. If the device is android then the app will work according to the android setting specified and if the platform is ios then it enables all the ios settings. It also has onSelectNotification property which performs the task given on pressing the Notification.
Future onSelectNotification(String payload) {
Navigator.of(context).push(MaterialPageRoute(builder: (_) {
return NewScreen(
payload: payload,
);
}));
}
NewScreen Widget is a new screen that occurs when the user presses the notification.
class NewScreen extends StatelessWidget {
String payload;
NewScreen({
@required this.payload,
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(payload),
),
);
}
}
Simple Notification
showNotification() async {
var android = AndroidNotificationDetails(
'id', 'channel ', 'description',
priority: Priority.High, importance: Importance.Max);
var iOS = IOSNotificationDetails();
var platform = new NotificationDetails(android, iOS);
await flutterLocalNotificationsPlugin.show(
0, 'Flutter devs', 'Flutter Local Notification Demo', platform,
payload: 'Welcome to the Local Notification demo');
}
}
AndroidNotificationDetails is a class that contains the details about the notification on Android devices such as priority, importance, channel name, channel description, channel id, sound, vibration, etc. Similarly, IOSNotificationDetails it contains the ios notification details. It is not necessary to provide the details of android and ios, if your app is specific t the android users then you can pass null in the NotificationDetails in ios section. show() method automatically checks for the available platform whether it is ios and android. If the platform is android then it sets the AndroidNotificationDetails as the notification details. show() method takes the id, title, body, NotificationDetails, payload is a string that we will use to pass it as an argument in the onSelectedNotification function to display some text in the new screen related to the type of notification clicked.
Schedule notification
scheduleNotification is a notification which used to perform a scheduled task. This notification occurs at a specified time.
Future<void> scheduleNotification() async {
var scheduledNotificationDateTime =
DateTime.now().add(Duration(seconds: 5));
var androidPlatformChannelSpecifics = AndroidNotificationDetails(
'channel id',
'channel name',
'channel description',
icon: 'flutter_devs',
largeIcon: DrawableResourceAndroidBitmap('flutter_devs'),
);
var iOSPlatformChannelSpecifics = IOSNotificationDetails();
var platformChannelSpecifics = NotificationDetails(
androidPlatformChannelSpecifics, iOSPlatformChannelSpecifics);
await flutterLocalNotificationsPlugin.schedule(
0,
'scheduled title',
'scheduled body',
scheduledNotificationDateTime,
platformChannelSpecifics);
}
Big Picture Notifications
Future<void> showBigPictureNotification() async {
var bigPictureStyleInformation = BigPictureStyleInformation(
DrawableResourceAndroidBitmap("flutter_devs"),
largeIcon: DrawableResourceAndroidBitmap("flutter_devs"),
contentTitle: 'flutter devs',
summaryText: 'summaryText',
);
var androidPlatformChannelSpecifics = AndroidNotificationDetails(
'big text channel id',
'big text channel name',
'big text channel description',
styleInformation: bigPictureStyleInformation);
var platformChannelSpecifics =
NotificationDetails(androidPlatformChannelSpecifics, null);
await flutterLocalNotificationsPlugin.show(
0, 'big text title', 'silent body', platformChannelSpecifics,
payload: "big image notifications");
}
Media Notification
Future<void> showNotificationMediaStyle() async {
var androidPlatformChannelSpecifics = AndroidNotificationDetails(
'media channel id',
'media channel name',
'media channel description',
color: Colors.red,
enableLights: true,
largeIcon: DrawableResourceAndroidBitmap("flutter_devs"),
styleInformation: MediaStyleInformation(),
);
var platformChannelSpecifics =
NotificationDetails(androidPlatformChannelSpecifics, null);
await flutterLocalNotificationsPlugin.show(
0, 'notification title', 'notification body', platformChannelSpecifics);
}
Cancel Notification
cancel() removes the notification of the given id.
Future<void> cancelNotification() async {
await flutterLocalNotificationsPlugin.cancel(0);
}
Conclusion
Local push notification is extremely useful to provide notification or alert about the important task. Local notification can be implemented without the internet. The Scheduled Notification is extremely powerful as they are very fast and very accurate and notify the user as per the time scheduled by the user.
If you are making a reminder app or todo app, then you should use Local Notification. I hope this article has provided you with content information about what’s all about the topic, and you will give it — a Try. Initiate using Local Push Notification for your apps. !!!
Github Link
flutter-devs/local_push_notification
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
🌸🌼🌸 Thank you for reading. 🌸🌼🌸🌼
Feel free to connect with us:
And read more articles from FlutterDevs.com
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.
