Hello! I have been trying to implement push notifications in my app, i use supabase as backend and authentication.
I have followed different tutorials online on setting push notifications through FCM, but I always run into the same error (the blank screen), that i believe is caused by some issue with firebase_messaging dependency.
I created an action called initializeMessaging, and when i add it to main.dart and try running the app i get the Blank screen. If i don't set the custom code to main.dart the app works just fine (without the notification feature). I will apreciate so much if somebody can help me with this, it is the only thing that is left for me to do to in my app before launch, and I am getting really frustrated...
Firebase is set up with blaze plan.
My FF version: FlutterFlow v5.3.5 released March 27, 2025 Flutter version is 3.27.3
these are tutorials that i followed and ran into this issue:
on these tutorials, the creator simply adds firebase_messaging as a dependency and does not get this error, but looking into the comment section you can see that there are plenty of users that, like me, are facing this issue.
https://www.youtube.com/watch?v=Zo9TQauG8Hs&list=LL&index=9
https://www.youtube.com/watch?v=IHQJ5P3PR9U&lc=UgzPZmumUx_X4Uq-2Q14AaABAg.ACZtjuSxF1NAFPE0cvzv32
these are the codes that I tried:
initializeMessaging from the first video:
// Automatic FlutterFlow imports
import '/backend/supabase/supabase.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
import 'package:collection/collection.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:awesome_notifications/awesome_notifications.dart';
Future initializeMessaging() async {
// Add your function code here!
await Firebase.initializeApp();
FirebaseMessaging.instance.requestPermission().then((settings) {
if (settings.authorizationStatus == AuthorizationStatus.authorized) {
FirebaseMessaging.instance.getToken().then((token) {
FFAppState().fcmToken = token ?? "No token";
});
} else {
FFAppState().fcmToken = "No token";
}
});
// Initialize our local notifications
await AwesomeNotifications().initialize(
null,
[
NotificationChannel(
channelKey: 'alerts',
channelName: 'Alerts',
channelDescription: 'Notification tests as alerts',
playSound: true,
onlyAlertOnce: true,
groupAlertBehavior: GroupAlertBehavior.Children,
importance: NotificationImportance.High,
defaultPrivacy: NotificationPrivacy.Private,
defaultColor: Colors.deepPurple,
ledColor: Colors.deepPurple,
)
],
debug: true,
);
FirebaseMessaging.onMessage.listen((RemoteMessage message) async {
print("received message 1: ${message.notification?.title}");
await AwesomeNotifications().createNotification(
content: NotificationContent(
id: -1,
channelKey: 'alerts',
title: message.notification?.title ?? "No title",
body: message.notification?.body ?? "No body",
payload: {'notificationId': '1234567890'}),
actionButtons: [
NotificationActionButton(
key: "DISMISS",
label: "Dismiss",
actionType: ActionType.DismissAction,
isDangerousOption: true,
)
]);
});
}
setFCMToken custom action from second video:
// Automatic FlutterFlow imports
import '/backend/supabase/supabase.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
Future setFCMToken() async {
await Firebase.initializeApp();
FirebaseMessaging messaging = FirebaseMessaging.instance;
NotificationSettings settings = await messaging.requestPermission(
alert: true,
badge: true,
sound: true,
);
FFAppState().fcmToken = "About to check PN permissions";
if (settings.authorizationStatus == AuthorizationStatus.authorized) {
FFAppState().fcmToken = "authorizing works";
try {
String? fcmToken = await messaging.getToken();
FFAppState().fcmToken = fcmToken ?? "";
} catch (e) {
FFAppState().fcmToken = e.toString();
}
}
}