Flutter Local Notification
Today I’ll tell you that how you can setup Local Notification Plugin on Flutter App. Using Plugin in flutter is not difficult but in case of Flutter Local Notification. We need to setup some configuration before start using it.
Step 1 : Add flutter_local_notifications dependency in your pubspec.yaml file.
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
flutter_local_notifications:Step 2 : Add VIBRATE and RECEIVE_BOOT_COMPLETED permission to your AndroidManifest.xml [ Optional ]
If you don’t give these permission to your app then you can’t use Vibrate and Schedule Feature which is Available in this plugin.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.flutterappnoti">
<!-- The INTERNET permission is required for development. Specifically,
flutter needs it to communicate with the running application
to allow setting breakpoints, to provide hot reload, etc.
-->
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>Step 3: Add image inside drawable directory for Notificaiton Icon [ Optional ]
( flutter_app_name > android > app > src > res > drawable > app_icon.png )
If you don’t add image for notification icon then you have to tell the app to use app icon, which is stored in ‘mipmap’. [ ANDROID ]
If you are reading this article then you must had ever seen the notification and with the notification there is a small icon.
This image is for that purpose. This image will be shown with our notification.
Step 4 : Add a Tone(Music) for Notification [ Optional ]
If you don’t add tone for notification then it will the default tone of you notification.
To add custom Tone (Music)
- Make a directory inside res directory.
- Keep a small Audio (Music) there and remember the file name.
( flutter_app_name > android > app > src > res > raw > slow_spring_board.mp3 )
Step 5 : Now It’s time to come to CODING.
So first we will initialize the Flutter Notification Plugin .It is good to initialize it inside initState(), so that as soon as our app start it get initialize it and we can us8e it anytime.
At the time of initializing we have to keep TWO things in our mind.
1. We have to define the app icon, In the above image you can see this ‘new AndroidInitializationSettings(‘app_icon’)’ . Here app_icon is image name which we had put inside the drawable directory.
If you didn’t put that then you can use default icon for that you have to use ‘@mipmap/ic_launcher’ instead of ‘app_icon’.
2. At the second last line ‘selectNotification: onSelectNotification’. This line is responsible for the action which is going to be happen when we will click on the Notification. This method must return Future and this method must have a string paramter which will be payload.
below you can see onSelectNotification method where I am showing a Dialog. You can open New page and can show the detailed Notification also
Payload : Notification messages can contain an optional data that is known as payload
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';
void main() {
runApp(
new MaterialApp(home: new MyApp()),
);
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin;
@override
initState() {
super.initState();
// initialise the plugin. app_icon needs to be a added as a drawable resource to the Android head project
// If you have skipped STEP 3 then change app_icon to @mipmap/ic_launcher
var initializationSettingsAndroid =
new AndroidInitializationSettings('app_icon');
var initializationSettingsIOS = new IOSInitializationSettings();
var initializationSettings = new InitializationSettings(
initializationSettingsAndroid, initializationSettingsIOS);
flutterLocalNotificationsPlugin = new FlutterLocalNotificationsPlugin();
flutterLocalNotificationsPlugin.initialize(initializationSettings,
selectNotification: onSelectNotification);
}
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('Plugin example app'),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new RaisedButton(
onPressed: _showNotificationWithSound,
child: new Text('Show Notification With Sound'),
),
new SizedBox(
height: 30.0,
),
new RaisedButton(
onPressed: _showNotificationWithoutSound,
child: new Text('Show Notification Without Sound'),
),
new SizedBox(
height: 30.0,
),
new RaisedButton(
onPressed: _showNotificationWithDefaultSound,
child: new Text('Show Notification With Default Sound'),
),
],
),
),
),
);
}
Future onSelectNotification(String payload) async {
showDialog(
context: context,
builder: (_) {
return new AlertDialog(
title: Text("PayLoad"),
content: Text("Payload : $payload"),
);
},
);
}
}
This is basic setup where I am havig 3 button and In above code you can see that corresponding to each button there is different methods
Button 1 : _showNotificationWithSound
Button 2 : _showNotificationWithoutSound
Button 3 : _showNotificationWithDefaultSound
but there is nothing inside all the method. I’ll write that in next step.
Step 6 : Let’s Define All 3 methods
// If you have skipped step 4 then Method 1 is not for you
// Method 1
Future _showNotificationWithSound() async {
var androidPlatformChannelSpecifics = new AndroidNotificationDetails(
'your channel id', 'your channel name', 'your channel description',
sound: 'slow_spring_board',
importance: Importance.Max,
priority: Priority.High);
var iOSPlatformChannelSpecifics =
new IOSNotificationDetails(sound: "slow_spring_board.aiff");
var platformChannelSpecifics = new NotificationDetails(
androidPlatformChannelSpecifics, iOSPlatformChannelSpecifics);
await flutterLocalNotificationsPlugin.show(
0,
'New Post',
'How to Show Notification in Flutter',
platformChannelSpecifics,
payload: 'Custom_Sound',
);
}// Method 2
Future _showNotificationWithDefaultSound() async {
var androidPlatformChannelSpecifics = new AndroidNotificationDetails(
'your channel id', 'your channel name', 'your channel description',
importance: Importance.Max, priority: Priority.High);
var iOSPlatformChannelSpecifics = new IOSNotificationDetails();
var platformChannelSpecifics = new NotificationDetails(
androidPlatformChannelSpecifics, iOSPlatformChannelSpecifics);
await flutterLocalNotificationsPlugin.show(
0,
'New Post',
'How to Show Notification in Flutter',
platformChannelSpecifics,
payload: 'Default_Sound',
);
}// Method 3
Future _showNotificationWithoutSound() async {
var androidPlatformChannelSpecifics = new AndroidNotificationDetails(
'your channel id', 'your channel name', 'your channel description',
playSound: false, importance: Importance.Max, priority: Priority.High);
var iOSPlatformChannelSpecifics =
new IOSNotificationDetails(presentSound: false);
var platformChannelSpecifics = new NotificationDetails(
androidPlatformChannelSpecifics, iOSPlatformChannelSpecifics);
await flutterLocalNotificationsPlugin.show(
0,
'New Post',
'How to Show Notification in Flutter',
platformChannelSpecifics,
payload: 'No_Sound',
);
}
I hope that you got the idea that how you can setup a Local Notification Plugin in Flutter.
If you find any difficulties while reading or you have any doubts.
Let me know may be I can help you with that
If you like it then don’t be strange clap before leaving.
Flutter Local Notification has lots of features and it’s little difficult to set up. As I had shown you the basic setup, Now you can go through the official Github Repo and implement other features also. Now you will not face any problem as I had discussed the Setup.
If you face any problem in implementing other features let me know I’ll help you that or I’ll write one more story.
