A comprehensive Flutter project for integrating and managing Firebase Cloud Messaging (FCM) and local notifications. Features background message handling, interactive notification responses, and user-centric notification controls.
Building a full-fledged Flutter application often requires the integration of notifications to enhance user engagement. This guide walks you through the implementation of both Firebase Cloud Messaging (FCM) for push notifications and local notifications within a Flutter application.
Before you start, make sure you have:
Setting Up Firebase Cloud Messaging Before sending or receiving notifications, you must integrate your Flutter app with Firebase. This involves a few steps:
Add your app to the project by following the setup instructions for iOS and Android. Download the google-services.json file for Android and the GoogleService-Info.plist for iOS and place them in the respective directories of your Flutter project. Initialize Firebase in your Flutter app.
Integrate Firebase into your Flutter application by following these steps:
Follow the instructions on the Firebase console to add your app to your Firebase project. Download the google-services.json file and place it in your Flutter project's android/app directory.
Add firebase_core and firebase_messaging to your pubspec.yaml file and install them by running flutter pub get.
In your main Dart file, initialize Firebase as shown in the provided code snippet. Ensure you do this before calling runApp().
Future<void> main() async {
await notificationSetup();
runApp(const MyApp());
}
Future<void> notificationSetup() async {
await GlobalNotification.localNotificationInit();
FBaseConnect connect = FBaseConnect();
await connect.firebaseInit();
}
The FBaseConnect class handles the initialization and setup for Firebase Messaging:
Define a top-level or static function to handle background messages. This function must have the @pragma('vm:entry-point') annotation to ensure it's compiled into the binary.
@pragma('vm:entry-point')
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
// ... Handle background message
}
Inside firebaseInit(), set up the message handlers for both foreground messages and messages that occur when the app is in the background or terminated.
With FgMsg and NotificationActions, you can define custom actions based on the notification's payload:
Based on the screen name provided in the notification's data payload, navigate the user to different screens or perform specific actions.
Use the flutter_local_notifications package to display banner notifications. Customize the appearance for both Android and iOS platforms.
NotiPayloadParams is a data model representing the notification's payload. Use it to parse and handle the notification data.
Optionally, save the notification data locally for future reference.
For local notifications, you use the flutter_local_notifications plugin:
Configure and initialize the local notifications plugin. Define settings for both Android and iOS.
Define a function to handle the event when a user taps on a notification. This function can also be used to navigate to a specific screen in your app.
Future<void> notificationTapBackground(
NotificationResponse notificationResponse) async {
// ... Handle notification tap
}
Implement UI components and listeners to handle notification streams.
@override
initState() {
configureDidReceiveLocalNotificationSubject();
configureSelectNotificationSubject();
super.initState();
}
void configureDidReceiveLocalNotificationSubject() {
didReceiveLocalNotificationStream.stream.listen(
(ReceivedNotification receivedNotification) async {
var jsonData = jsonDecode(receivedNotification.payload ?? "");
NotiPayloadParams notiPayloadParams =
NotiPayloadParams.fromMap(jsonData);
await ProcessNotification.via
.handlePushNotification(notiPayloadParams, context);
},
);
}
void configureSelectNotificationSubject() {
selectNotificationStream.stream.listen((String? payload) async {
var jsonData = jsonDecode(payload.toString());
NotiPayloadParams notiPayloadParams = NotiPayloadParams.fromMap(jsonData);
await ProcessNotification.via
.handlePushNotification(notiPayloadParams, context);
});
}
Other then request notification permissions andadding google json, no need to configure android platform.
Use the flutter_app_badger plugin to update the badge count on the app icon based on the received notifications.
By integrating both Firebase and local notifications, you can ensure that your users are always engaged with timely and relevant updates. Remember to handle permissions, background processes, and data management appropriately to create a seamless user experience.
For a full implementation guide, including detailed code examples and explanations, refer to the Flutter documentation and respective plugin instructions on pub.dev.