I need to show firebase notifications when the app is on foreground by using local notification but it is not working.
FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin=new FlutterLocalNotificationsPlugin();
static FirebaseMessaging _firebaseMessaging = FirebaseMessaging();
static StreamController<Map<String, dynamic>> _onMessageStreamController =
StreamController.broadcast();
static StreamController<Map<String, dynamic>> _streamController =
StreamController.broadcast();
static final Stream<Map<String, dynamic>> onFcmMessage =
_streamController.stream;
#override
void initState() {
super.initState();
var android=AndroidInitializationSettings('mipmap/ic_launcher.png');
var ios=IOSInitializationSettings();
var platform=new InitializationSettings(android,ios);
flutterLocalNotificationsPlugin.initialize(platform);
firebaseCloudMessaging_Listeners();
}
Here is the Firebase Code
void firebaseCloudMessaging_Listeners() {
if (Platform.isIOS) iOS_Permission();
_firebaseMessaging.getToken().then((token) {
print("FCM TOKEN--" + token);
});
_firebaseMessaging.configure(
onMessage: (Map<String, dynamic> message) async {
print('on message $message');
showNotification(message);
},
onResume: (Map<String, dynamic> message) async {
print('on resume $message');
},
onLaunch: (Map<String, dynamic> message) async {
print('on launch $message');
},
);
}
This is showNotification method
void showNotification(Map<String, dynamic> msg) async{
print(msg);
var android = new AndroidNotificationDetails(
'my_package', 'my_organization', 'notification_channel', importance: Importance.Max, priority: Priority.High);
var iOS = new IOSNotificationDetails();
var platform=new NotificationDetails(android, iOS);
await flutterLocalNotificationsPlugin.show(
0,'My title', 'This is my custom Notification', platform,);
}
and Firebase Response
{notification: {title: Test Title, body: Test Notification Text}, data: {orderid: 2, click_action: FLUTTER_NOTIFICATION_CLICK, order name: farhana}}
You can find the answer in FlutterFire documentation
https://firebase.flutter.dev/docs/migration/#messaging
You just add to your code the following line
FirebaseMessaging.instance.setForegroundNotificationPresentationOptions(alert: true, badge: true, sound: true);
There is an active issue logged on GitHub repository for the package regarding the same. Firebase messaging and local notifications won't work together on iOS since you can register only a single delegate for notifications.
Check out: https://github.com/MaikuB/flutter_local_notifications/issues/111
There's also an active flutter issue for the same:
https://github.com/flutter/flutter/issues/22099
Problem:
See the Push Notification while application is in foreground.
Solution:
I was using firebase_message plugin and I was able to see the Push Notification while application is in foreground by making these few changes in my flutter project's iOS AppDelegate.swift file in flutter project.
import UIKit
import Flutter
import UserNotifications
#UIApplicationMain
#objc class AppDelegate: FlutterAppDelegate, UNUserNotificationCenterDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?
) -> Bool {
GeneratedPluginRegistrant.register(with: self)
// set the delegate in didFinishLaunchingWithOptions
UNUserNotificationCenter.current().delegate = self
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
// This method will be called when app received push notifications in foreground
func userNotificationCenter(_ center: UNUserNotificationCenter, willPresent notification: UNNotification, withCompletionHandler completionHandler: #escaping (UNNotificationPresentationOptions) -> Void)
{
completionHandler([.alert, .badge, .sound])
}
}
Note:
This also works while using with flutter_local_notification plugin but with an issue that onSelectNotification is not working due to changes done above.
For not receiving the notification in foreground make sure the android drawable file contains the launcher_icon or the icon which you have set in shownotification function.
I also couldn't get firebase notifications with flutter_local_notifications working on iOS in foreground. Background notifications worked fine. Problem was that firebase notification data is different on iOS. Notification data is not ["notification"]["title"] as in android but ["aps"]["alert"]["title"].
Related
I'm creating a chat app (kind of WhatsApp-like messaging) using Flutter.
First, the notifications mechanism is working as intended, whenever I send a message from 1 device to another device, the notification would pop up.
I created a local_notification_service.dart to handle the foreground notification & sending a not
import 'dart:math';
import 'package:get/get.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';
class LocalNotificationService extends GetConnect {
String serverKey ='xxxxxxxxxxxxxxxxxxxx'
static final FlutterLocalNotificationsPlugin _flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
static void initialize() {
const InitializationSettings initializationSettings = InitializationSettings(android: AndroidInitializationSettings("#mipmap/ic_launcher"));
_flutterLocalNotificationsPlugin.initialize(initializationSettings);
}
static void display(RemoteMessage message) async {
try {
print("Display notification");
// int id = DateTime.now().microsecondsSinceEpoch ~/1000000;
Random random = Random();
int id = random.nextInt(1000);
const NotificationDetails notificationDetails = NotificationDetails(
android: AndroidNotificationDetails(
"mychanel",
"my chanel",
importance: Importance.max,
priority: Priority.high,
));
print("my id is ${id.toString()}");
await _flutterLocalNotificationsPlugin.show(
id,
message.notification!.title,
message.notification!.body,
notificationDetails,
);
} on Exception catch (e) {
print('Error>>>$e');
}
}
Future<void> sendNotification({
String? title,
String? message,
String? token,
String? uniqueId,
String? action,
String? channelId,
String? channelName,
String? channelDesc,
}) async {
final data = {
"click_action": "FLUTTER_NOTIFICATION_CLICK",
"action": action,
"uniqueId": uniqueId,
"message": message,
"channelId": channelId ?? 'my channel id',
"channelName": channelName ?? 'my channel Name',
"channelDesc": channelDesc ?? 'my channel description',
};
try {
final response = await post(
'https://fcm.googleapis.com/fcm/send',
{
'notification': {'title': title, 'body': message},
'priority': 'high',
'data': data,
'to': '$token',
'direct_boot_ok': true,
},
headers: {
'Content-Type': 'application/json',
'Authorization': 'key=$serverKey',
},
);
print('response body : ${response.body}');
} catch (e) {}
}
}
Then, I'm trying to validate the users in my flutter application whenever they receive FCM notification, here's the logic that I want to create:
If the user is not logged in, then the device could not receive the notification
If the user is logged in, but the specific user is not eligible to receive the message (in case there are some users with the same FCM token / device registered ) then the device could not receive the notification. I would want to solve this after the point number 1 is succeeded
Here's my main.dart file
void main() async {
await GetStorage.init();
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
GlobalController globalC = Get.put(GlobalController());
AuthController authC = Get.put(AuthController());
ErrorController errorC = Get.put(ErrorController());
ConnectivityResult connectivityResult = ConnectivityResult.none;
final Connectivity connectivity = Connectivity();
connectivityResult = await connectivity.checkConnectivity();
if (connectivityResult == ConnectivityResult.wifi || connectivityResult == ConnectivityResult.mobile) {
// Start FCM
final fcmToken = await FirebaseMessaging.instance.getToken();
globalC.fcmToken.value = fcmToken ?? ''; //set global fcm Token
final FirebaseMessaging fcmInstance = FirebaseMessaging.instance;
NotificationSettings settings = await fcmInstance.requestPermission(
alert: true,
announcement: true,
badge: true,
carPlay: false,
criticalAlert: false,
provisional: false,
sound: true,
);
await FirebaseMessaging.instance.setForegroundNotificationPresentationOptions(
alert: true,
badge: true,
sound: true,
);
/* Handle message when in foreground */
FirebaseMessaging.onMessage.listen((event) {
if (globalC.isAuthenticated.isTrue) {
LocalNotificationService.display(event); //display notification
}
});
/* Handle message when in background */
if (globalC.isAuthenticated.isTrue) {
FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
}
fcmInstance.onTokenRefresh.listen((fcmToken) {
// Note: This callback is fired at each app startup and whenever a new
// token is generated.
}).onError((err) {
// Error getting token.
});
// End FCM
}
FirebaseAnalytics analytics = FirebaseAnalytics.instance;
runApp(MyApp());
}
as you can see, I'm trying to filter the non logged in user when in the foreground using the FirebaseMessaging.onMessage.listen with the globalC.isAuthenticated.isTrue validation. And it works (because the default of globalC.isAuthenticated is false whenever user is not logged in)
But for the FirebaseMessaging.onBackgroundMessage function does not seems to work with the validation. I've tried to search for the solution in the documentations, youtube but i couldn't find it till this question is made.
How can I make this kind of validation for background message?
Sorry for this newbie question, any help would be greatly appreciated.
Thank you .
How do I send a notification to another user when one user presses a button? Can someone show me a code snippet?
I realize that this question was asked before, however, it was closed since there were "several answers." The links that were provided that were similar did not explain sending notifications in flutter.
The below solution works, however, my solution is much simpler, and avoids adding new technologies
I have figured out how send a notification to another device using an in app feature.
First, you will need to import the necessary packages:
firebase_messaging
flutter_local_notifications
Note: you will also use the http package
Also note: to send notifications to another device, you must know the device token of that device. I prefer getting the token and saving it in Firestore or Realtime Database. Here is the code to get the device token.
String? mtoken = " ";
void getToken() async {
await FirebaseMessaging.instance.getToken().then((token) {
setState(() {
mtoken = token;
});
});
}
The token will be saved in mtoken, you can now use this as the token for the coming steps.
The next step is to request permission to send push notifications to your app.
void requestPermission() async {
FirebaseMessaging messaging = FirebaseMessaging.instance;
NotificationSettings settings = await messaging.requestPermission(
alert: true,
announcement: false,
badge: true,
carPlay: false,
criticalAlert: false,
provisional: false,
sound: true,
);
if (settings.authorizationStatus == AuthorizationStatus.authorized) {
print('User granted permission');
} else if (settings.authorizationStatus ==
AuthorizationStatus.provisional) {
print('User granted provisional permission');
} else {
print('User declined or has not accepted permission');
}
}
(If you get "User declined or has not accepted permission" in your console, try going out of your app, finding the icon in the homescreen, pressing and holding on the app icon, tapping "App Info", tapping "Notifications" and turn on "All [app name] notifications."
You will also need two functions to load a Firebase Cloud Messaging notification and one to listen for a notification.
Code to load a Firebase Cloud Messaging notification:
void loadFCM() async {
if (!kIsWeb) {
channel = const AndroidNotificationChannel(
'high_importance_channel', // id
'High Importance Notifications', // title
importance: Importance.high,
enableVibration: true,
);
flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
/// Create an Android Notification Channel.
///
/// We use this channel in the `AndroidManifest.xml` file to override the
/// default FCM channel to enable heads up notifications.
await flutterLocalNotificationsPlugin
.resolvePlatformSpecificImplementation<
AndroidFlutterLocalNotificationsPlugin>()
?.createNotificationChannel(channel);
/// Update the iOS foreground notification presentation options to allow
/// heads up notifications.
await FirebaseMessaging.instance
.setForegroundNotificationPresentationOptions(
alert: true,
badge: true,
sound: true,
);
}
}
And this function to listen for a Firebase Cloud Messaging notifcation.
void listenFCM() async {
FirebaseMessaging.onMessage.listen((RemoteMessage message) {
RemoteNotification? notification = message.notification;
AndroidNotification? android = message.notification?.android;
if (notification != null && android != null && !kIsWeb) {
flutterLocalNotificationsPlugin.show(
notification.hashCode,
notification.title,
notification.body,
NotificationDetails(
android: AndroidNotificationDetails(
channel.id,
channel.name,
// TODO add a proper drawable resource to android, for now using
// one that already exists in example app.
icon: 'launch_background',
),
),
);
}
});
}
You will want to run loadFCM, listenFCM, and requestPermission when the page is initialized.
void initState() {
super.initState();
requestPermission();
loadFCM();
listenFCM();
}
The next step is to find your Firebase Cloud Messaging API key. This can simply be done by heading to your Firebase project > Project Settings > Cloud Messaging then copy the API key under Cloud Messaging API (Legacy).
When you have your Firebase Cloud Messaging API key, this is the code to display a notification given the notification title, body, and device token to send it to.
void sendPushMessage(String body, String title, String token) async {
try {
await http.post(
Uri.parse('https://fcm.googleapis.com/fcm/send'),
headers: <String, String>{
'Content-Type': 'application/json',
'Authorization':
'key=REPLACETHISWITHYOURAPIKEY',
},
body: jsonEncode(
<String, dynamic>{
'notification': <String, dynamic>{
'body': body,
'title': title,
},
'priority': 'high',
'data': <String, dynamic>{
'click_action': 'FLUTTER_NOTIFICATION_CLICK',
'id': '1',
'status': 'done'
},
"to": token,
},
),
);
print('done');
} catch (e) {
print("error push notification");
}
}
Now you can call this function like this:
sendPushMessage('Notification Body', 'Notification Title', 'REPLACEWITHDEVICETOKEN');
I hope this helps.
You will need Firebase Cloud Messaging for that.
The way I've done it is using a Cloud Function that you can trigger via HTTP or even via a Firestore trigger, like this:
// The Firebase Admin SDK to access Firestore.
const admin = require('firebase-admin');
admin.initializeApp();
const db = admin.firestore();
/**
* Triggered by a change to a Firestore document.
*
* #param {!Object} event Event payload.
* #param {!Object} context Metadata for the event.
*/
exports.messageNotificationTrigger = (change, context) => {
db.collection('users').get().then((snapshot) => {
snapshot.docs.forEach(doc => {
const userData = doc.data();
if (userData.id == '<YOUR_USER_ID>') {
admin.messaging().sendToDevice(userData.deviceToken, {
notification: {
title: 'Notification title', body: 'Notification Body'}
});
}
});
});
};
Every user you have registered in your users collection must have a device token, sent from their device they access the app.
From Flutter, using the FCM package, this is how you send the device token to Firebase:
// fetch the device token from the Firebase Messaging instance
// and store it securely on Firebase associated with this user uid
FirebaseMessaging.instance.getToken().then((token) {
FirebaseFirestore.instance.collection('users').doc(userCreds.user!.uid).set({
'deviceToken': token
});
});
Where userCredentials.user!.uid is the user you use to log in to your application using Firebase Authentication like this:
UserCredential userCreds = await FirebaseAuth.instance.signInWithCredential(credential);
Hope that helps.
I am building an Android application using Flutter. My app needs to display local notification. I am using this package, https://pub.dev/packages/flutter_local_notifications. When I show the notification on the emulator it is working. But it is not working, when I compiled the release APK and installed it on the actual device.
This is NotificationService class
import 'package:flutter_local_notifications/flutter_local_notifications.dart';
class NotificationService
{
static FlutterLocalNotificationsPlugin? flip;
static FlutterLocalNotificationsPlugin getFlipInstance()
{
if (flip == null) {
flip = FlutterLocalNotificationsPlugin();
// app_icon needs to be a added as a drawable
// resource to the Android head project.
var android = const AndroidInitializationSettings('#mipmap/ic_launcher');
var ios = const IOSInitializationSettings();
var settings = InitializationSettings(android: android, iOS: ios);
flip!.initialize(settings);
}
return flip as FlutterLocalNotificationsPlugin;
}
static Future showNotification(String title, String body) async {
var androidPlatformChannelSpecifics = const AndroidNotificationDetails("your channel id", "my channel name");
var iOSPlatformChannelSpecifics = const IOSNotificationDetails();
// initialise channel platform for both Android and iOS device.
var platformChannelSpecifics = NotificationDetails(android: androidPlatformChannelSpecifics, iOS: iOSPlatformChannelSpecifics);
await getFlipInstance().show(0, title,
body,
platformChannelSpecifics, payload: 'Default_Sound'
);
}
}
I show notification like this in the initState method of home page.
#override
void initState() {
super.initState();
setState(() {
NotificationService.showNotification("Local Notification", "Local Notification Message");
}
As I mentioned, it works on the emulator. But when I generated an APK and installed it on the real device, it is not working.
I am working on a food delivery app with Flutter. I have recently Implemented the flutter_local_notifications and the notification is working fine. But there's one problem is that the notification doesn't show as pop up by default. The "Show as pop up" option is disabled by default in the notification settings.
Is there any way that when the app is installed the "Show as pop up" option is enabled by default.
Here's my Notification Configuration Code:
void registerNotification() {
// This function registers the user for recieving push notifications.
// After registering the user, it creates a new field inside 'userForChat' Database
// The field is called : 'pushToken' which is later used on to configure Firebase Automatic Cloud Messaging
firebaseMessaging.requestNotificationPermissions();
firebaseMessaging.configure(
onMessage: (Map<String, dynamic> message) {
print('onMessage: $message');
Platform.isAndroid
? showNotification(message['notification'])
: showNotification(message['aps']['alert']);
return;
},
onResume: (Map<String, dynamic> message) {
print('onResume: $message');
return;
},
onLaunch: (Map<String, dynamic> message) {
print('onLaunch: $message');
return;
},
);
// Token for Firebase Messaging
firebaseMessaging.getToken().then((token) {
print('token: $token');
Firestore.instance
.collection('usersForChat')
.document(currentUserId)
.updateData(
{'pushToken': token}); //Sets the firebase Token into the database
}).catchError((onError) {
setState(() {});
});
}
void configLocalNotification() {
var initializationSettingsAndroid = AndroidInitializationSettings(
'mipmap/ic_launcher');
var initializationSettingsIOS = IOSInitializationSettings();
var initializationSettings = InitializationSettings(
initializationSettingsAndroid, initializationSettingsIOS);
flutterLocalNotificationsPlugin.initialize(initializationSettings);
}
void showNotification(message) async {
// This function takes the notfication message as input triggers the notification to show the message.
// The input is in a json format so you have to decode the json with dart:convert.
// IMPORTANT: Specify the Application package name according to the OS.
//For Android, Use the android app package name from firebase
//For iOS, Use the iOS app package name from firebase
var androidPlatformChannelSpecifics = AndroidNotificationDetails(
// add your apps package name for each OS(Android:iOS)
Platform.isAndroid
? 'com.jexmovers.app' //Update the package name to your app's package names
: 'com.jexmovers.ios', //Update the package name to your app's package names
'JexMovers Chat',
'App that lets you contact with your food delivery person',
playSound: true,
enableVibration: true,
importance: Importance.Max,
priority: Priority.Max,
visibility: NotificationVisibility.Public,
enableLights: true,
);
var iOSPlatformChannelSpecifics = IOSNotificationDetails();
var platformChannelSpecifics = NotificationDetails(
androidPlatformChannelSpecifics, iOSPlatformChannelSpecifics);
print(message);
print(message['body'].toString());
print(json.encode(message));
await flutterLocalNotificationsPlugin.show(
0,
message['title'].toString(),
message['body'].toString(),
platformChannelSpecifics,
payload: json.encode(message),
);
}
I have implemented local push notifications in flutter app. This plugin was working smoothly at first. The issues came when I had run flutter clean and also uninstalling the app on android Emulator to do a clean install with flutter run. After doing so the app crashes on startup.
When run the app in debugging mode, it is showing that the error is happening on await localNotificationsPlugin.initialize. Debugger showing statement below.
Exception has occurred.
PlatformException (PlatformException(INVALID_ICON, The resource ic_launcher could not be found. Please make sure it has been added as a drawable resource to your Android head project., null))
Code below is showing how I have implemented the localNotificationsPlugin.
FlutterLocalNotificationsPlugin localNotificationsPlugin =
FlutterLocalNotificationsPlugin();
initializeNotifications() async {
var initAndroid = AndroidInitializationSettings('ic_launcher');
var initIOS = IOSInitializationSettings();
var initSettings = InitializationSettings(initAndroid, initIOS);
await localNotificationsPlugin.initialize(
initSettings,
onSelectNotification: gotToNotificationsPage,
);
}
#override
void initState() {
super.initState();
initializeNotifications();
showNotification();
}
Future singleNotification(
DateTime datetime, String message, String subtext, int hashcode,
{String sound}) async {
var androidChannel = AndroidNotificationDetails(
'channel-id',
'channel-name',
'channel-description',
importance: Importance.Max,
priority: Priority.Max,
);
var iosChannel = IOSNotificationDetails();
var platformChannel = NotificationDetails(androidChannel, iosChannel);
localNotificationsPlugin.schedule(
hashcode, message, subtext, datetime, platformChannel,
payload: hashcode.toString());
}
showNotification() async {
DateTime now = DateTime.now().toUtc().add(
Duration(seconds: 5),
);
await singleNotification(
now,
'Notification',
'This is a notification',
98123871,
);
}
Future gotToNotificationsPage(String payload) {
return Navigator.pushNamed(context, '/notifications');
}
Note the problem is on await localNotificationsPlugin.initialize I'm failing to assign app Icon properly. Thank you.
To set a custom icon, you can add an app_icon.png inside android/app/src/res/drawable, then initialize it with
const AndroidInitializationSettings initializationSettingsAndroid =
AndroidInitializationSettings('app_icon');`
Otherwise, if you'd like to use the default app icon, you can set the app icon on AndroidInitializationSettings with #mipmap/ic_launcher
If you're unsure on where to start, you can try out the sample provided by the plugin on GitHub.