As most of us are aware of the notifications we receive day in and day out when using apps like Gmail, Whatsapp, Teams, Slack and others on your smart phones. In order to implement such kind of notifications in your custom build App you can follow the below steps
Step-1
Install plugin (firebase_messaging : ^7.0.3) in pubspec.yaml
[Note: Firebase_messaging is a plugin in Flutter app that can receive and process push notifications as well as data messages in Android and iOS.]
To integrate your plugin into the Android part of your app:
1. Create a project in Firebase Console for your Android app.
2. Download the google-services.json file from the Firebase and place it inside your project.
3. Add dependencies
:dependencies{
//Example existing classpath
classpath 'com.android.tools.build:gradle:3.5.3'
//Add the google-services classpath
classpath 'com.google.gms:google-services:4.3.2'
}
4. Add the apply plugin to the [project]/android/app/build.gradle.file
// ADD THIS AT THE BOTTOM
apply plugin: 'com.google.gms.google-services'
5. Optional, but recommended - If you want to be notified in your app (via onResume and onLaunch, see below) when the user clicks on a notification in the system tray, include the following intent-filter within the < activity >
< intent-filter >
< action
android:name="FLUTTER_NOTIFICATION_CLICK" / >
< category
android:name="android.intent.category.DEFAULT" / >
< /intent-filter >
By default background messaging is not enabled. To handle messages in the background:
5.a. Add the com.google.firebase:firebase-messaging dependency in your app-level build.gradle file that is typically located at < app-name >
dependencies {
// ...
implementation
'com.google.firebase:firebasemessaging < latest_version>
}
if your file(above path) is in java then proceed below step 5.b else if your file is in kotlin follow step 5.c.
5.b. Add an Application.java class to your app in the same directory as your MainActivity.java. This is typically found in < app-name >
packageio.flutter.plugins.firebasemessagingexample;
import io.flutter.app.FlutterApplication;
import io.flutter.plugin.common.PluginRegistry;
import io.flutter.plugin.common.PluginRegistry.PluginRegistrantCallback;
import io.flutter.plugins.GeneratedPluginRegistrant;
import io.flutter.plugins.firebasemessaging.FlutterFirebaseMessagingService;
public class Application extends FlutterApplication implements PluginRegistrantCallback {
@Override
public void onCreate () {
super.onCreate();
FlutterFirebaseMessagingService.setPluginRegistrant(this);
}
@Override
public voidregisterWith(PluginRegistry registry) {
GeneratedPluginRegistrant.registerWith(registry);
}
}
5.c.
package com.example.projectName;
import io.flutter.app.FlutterApplication
import io.flutter.plugin.common.PluginRegistry
import io.flutter.plugin.common.PluginRegistry.PluginRegistrantCallback
import io.flutter.plugins.GeneratedPluginRegistrant
import io.flutter.plugins.firebasemessaging.FlutterFirebaseMessagingService
class Application : FlutterApplication(), PluginRegistrantCallback {
override fun onCreate() {
super.onCreate()
FlutterFirebaseMessagingService.setPluginRegistrant(this);
}
override fun registerWith(registry: PluginRegistry?)
{
io.flutter.plugins.firebasemessaging.FirebaseMessagingPlugin.registerWith(registry?.registrarFor("io.flutter.plugins.firebasemessaging.FirebaseMessagingPlugin"));
}
}
5.d. In Application.java, make sure to change packageio.flutter.plugins.firebasemessagingexample; to your package's identifier. Your package's identifier should be something like com.domain.myapplication.
package com.domain.myapplication;
5.e. Set name property of application in AndroidManifest.xml. This is typically found in < app-name >
5.f. Define a TOP-LEVEL or STATIC function to handle background messages
Future
async {
if (message.containsKey('data')) {
// Handle data message
final dynamic data = message['data'];
} if (message.containsKey('notification')) {
// Handle notification message
final dynamic notification = message['notification'];
}
// Or do other work.
}
Step-2
Install plugin (flutter_local_notifications: ^2.0.0+1) in pubspec.yaml
This plugin helps to show messages as a pop-up notification
If your application needs the ability to schedule notifications then you need to request permissions to be notified when the phone has been booted as scheduled notifications use the AlarmManager API to determine when notifications should be displayed. However, they are cleared when a phone has been turned off. Requesting permission requires adding the following to the manifest (i.e. your application's AndroidManifest.xml file)
< uses-permissionIf your application needs the ability to schedule full-screen intent notifications, add the following to the manifest (i.e. your application’s AndroidManifest.xml file)
< uses-permissionclass NotificationPlugin {
FlutterLocalNotificationsPlugin
flutterLocalNotificationsPlugin;
final BehaviorSubject< ReceivedNotification >
didReceiveLocalNotificationSubject =
BehaviorSubject< ReceivedNotification >
var initializationSettings;
NotificationPlugin._() {
init();
}
init() {
flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
if (Platform.isIOS){
_requestIosPermission();
}
initializePlatformSpecifics();
}
initializePlatformSpecifics() {
var initializationSettingsAndroid =
AndroidInitializationSettings('notification');
var initializationSettingsIos = IOSInitializationSettings(
requestAlertPermission: true,
requestBadgePermission: true,
requestSoundPermission: false,
onDidReceiveLocalNotification: (id, title, body, payload) async {
ReceivedNotification receivedNotification = ReceivedNotification(
id: id, title: title, body: body, payload : payload ); didReceiveLocalNotificationSubject.add(receivedNotification);
},
);
initializationSettings = InitializationSettings(
initializationSettingsAndroid,initializationSettingsIos);
}
_requestIosPermission() {
flutterLocalNotificationsPlugin
.resolvePlatformSpecificImplementation<
IOSFlutterLocalNotificationsPlugin>()
?.requestPermissions(
alert: true,
badge: true,
sound: true,
);
}
setListenerForLowerVersions(Function
onNotificationInLowerVersions) { didReceiveLocalNotificationSubject.listen((receivedNotification) { onNotificationInLowerVersions(receivedNotification);
});
}
setOnNotificationClick(Function onNotificationClick)
async {
await flutterLocalNotificationsPlugin.initialize(initializationSettings,
onSelectNotification: (String payload) async {
onNotificationClick(payload);
});
}
Future
var androidChannelSpecifics = AndroidNotificationDetails(
'fcm_default_channel', 'CHANNEL_NAME', 'CHANNEL_DESCRIPTION',
importance: Importance.Max,
priority: Priority.High,
playSound: true,
timeoutAfter: 5000);
var iosChannelSpecifics = IOSNotificationDetails();
var platformChannelSpecifics =NotificationDetails(androidChannelSpecifics,iosChannelSpecifics);
await flutterLocalNotificationsPlugin.show(0, 'Title',
'body', platformChannelSpecifics,
payload: 'Test Payload');
}
}
NotificationPlugin notificationPlugin = NotificationPlugin._();
class ReceivedNotification {
final int id;
final String title;
final String body;
final String payload;
ReceivedNotification({
@required this.id,
@required this.title,
@required this.body,
@required this.payload,
});
}
Place below code in landing page in order to work in resume/background/foreground
class LandingPage extends StatefulWidget {
_Home createState() => _Home();
}
class _Home extends State< LandingPage >
final FirebaseMessaging _firebaseMessaging = FirebaseMessaging();
@overridevoid initState() {
_messages = List< Message >
_configureFirebaseListeners();
notificationPlugin
.setListenerForLowerVersions(onNotificationInLowerVersions);
notificationPlugin.setOnNotificationClick(onNotificationClick);
}
getNotifications(type) {
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext context) =>
NotificationList(details: notificationsList)));
}
static Future
Map< String,dynamic>
if (message.containsKey('data')) {
// write your code
}
if (message.containsKey('notification')) {
// write your code
}
// Or do other work.
}
_configureFirebaseListeners() {
_firebaseMessaging.requestNotificationPermissions(
const IosNotificationSettings(
sound: true,
badge: true,
alert: true),
);
_firebaseMessaging.configure(
onMessage: (Map< String,dynamic >
print('onMessage: $message');
await notificationPlugin.showNotification(message);
this.getNotifications('onMessage');
}
onBackgroundMessage: myBackgroundMessageHandler,
onLaunch: (Map
print('onLaunch: $message');
await this.getNotifications('launch');
}
onResume: (Map< String,dynamic >
print('onResume: $message');
await this.getNotifications('resume');
}
onNotificationInLowerVersions(ReceivedNotification receivedNotification) {}
onNotificationClick(String payload) async {
// wite your code
}
}
}
