Notifications is important concept when talking about mobile apps. When we started using Flutter for our app development, we have faced challenges in integrating push notification using Firebase Cloud Messaging. 

In this blog, I will provide the steps on how to integrate push notifications into your flutter app.

Read: Flutter with Provider State management

Push Notification Workflow

Push notifications are messages that pop up on a user’s mobile device even when the user is not active on device. It is a reminder of actions to do in a timely manner.

It is a message push from backend to frontend under certain conditions through messaging services providers.

Our app is the front end which receives a notification triggered from our backend service. For our app to be able to receive push notifications, it must be configured and registered with a Push Notification Service Provider either Google Cloud Messaging (CGM) or Firebase Cloud Messaging (FCM). Apple Push Notification service (APNs) is an apple service. The communication between backend to frontend is not straightforward due to security reasons, it has to go through IOS or Android operating system and service.

The following are the key steps to implement and test push notifications.

1. Register our app with Google and Apple

• Sending push notifications with Firebase Cloud Messaging requires a Firebase project. If you do not have one yet, create a new one at firebase.google.com.

2. Get the key / certificate

• Get a certificate key from Apple developer account for the app. I re-download provisional profile id already was created.

3. Implement code in Flutter

For the integration of Firebase Cloud Messaging, Google’s Flutter team provided the “firebase_messaging” package. Add the package dependency to your project’s “pubspec.yaml” and load it by running flutter pub get.

i. Android Integration

• Create an Android-App in your Firebase-Project’s “Project Overview” section. The package name can be found and defined in your “app/build.gradle” file.
• After registering the app, download the generated google-services.json and put it into your project’s “android/app” folder.

When the user taps on a notification, if the app need to be opened, add the following intent-filter inside of the main << /span>activity> element of your android/app/src/main/AndroidManifest.xml file

ii. IOS Integration

• To send messages to iOS devices, Firebase Cloud Messaging uses the Apple Push Notification Service (APNs). It requires an Apple Developer Account and an Apple Push Notification Authentication Key. Both can be created in the Apple Developer Member Center.
• Generate the certificates required by Apple to receive push notifications by following the instructions of the FCM documentation, ignoring the section called “Create the Provisioning Profile”. After successful creation, download the authentication key and store in a secure place.

iOS configuration from Firebase side

• In Firebase console, add your iOS app to the project.
• a. Project Overview → add app(IOS icon)
• b. Register your ios app with bundle id
• c. The requested iOS -Bundle-ID can be found in XCode under: Runner > Target (Runner) > General
• d. Download GoogleService-Info.plist file add to your project
• Next, the previously downloaded Authentication Key needs to be uploaded in your Firebase project’s “Cloud Messaging” settings. You can find these settings via the gear icon besides the menu item called “Project Overview”.
• Now upload your APNs certificate section of the Firebase docs. Find your iOS app in the section called “iOS app configuration” and upload the APN key.

• Now open the app’s iOS module in XCode, select Runner and activate Push Notifications and Background Modes under “Project > Capabilities”. Enable Background fetch and Remote notifications under Background Modes.
• The FCM SDK performs method swizzling in two key areas: mapping your APNs token to the FCM registration token and capturing analytics data during downstream message callback handling. 

After that, add the following lines to the AppDelegate method of your iOS project.

-> Bool {
FirebaseApp.configure()
if #available(iOS 10.0, *) {
UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate
}
GeneratedPluginRegistrant.register(with: self)
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}

• From your Dart code, you need to import the plugin and instantiate it:

import ‘package:firebase_messaging/firebase_messaging.dart’;
final FirebaseMessaging _firebaseMessaging = FirebaseMessaging();

• To encapsulate the push notification related logic create a new file called “push_nofitications.dart” in your project’s “lib” folder and define a class called “PushNotificationManager” in it. In order to prevent multiple initializations, add a factory constructor which returns a singleton instance of the class.
• Letting the system handle and display the notifications and bringing the app to the foreground when the user taps on them might be sufficient for simple messages. But, when the app is in foreground while the notification comes in, the user will never see it, nor know about it.
• Also, if you send additional data besides title and message, this data is lost when the system handles the notifications automatically.To solve these cases Firebase Messaging allows you to handle in “MessageHandler” functions to its configure() method.
• To receive Push Notifications, call _firebaseMessaging.requestNotificationPermissions(). This will bring up a permissions dialog for the user to confirm on iOS. Register onMessage, onResume, and onLaunch callbacks via _firebaseMessaging.configure() to listen for incoming messages.
• Note: We were getting FCM token before IOS configuration setting, so didn’t get push notification, added the following code for notification permission from iOS user.

await _firebaseMessaging.requestNotificationPermissions(const IosNotificationSettings(sound: true, badge: true, alert: true, provisional: false));

4. Send and Test Notification Messages

Now let’s test notification with Firebase Console through Cloud Messaging. Remember remote notifications testing via simulator are not supported. So to test it on a physical device after installing app on the device.

This is one of the simplest ways to send a notification. Select “Cloud Messaging” in the console’s navigation. Now click on the “Send your first message” button to open the form. Here, push notifications are created as campaigns. For a simple test enter a notification title and text.

This way you can create notification in Firebase console. After reviewing your notification you can publish your notification and will available to phone in which app is installed.

If you’ve made it to this point, you should have understanding of what push notifications are, how to integrate push notification functionality with a Flutter app, and how to send push notifications using Firebase Cloud Messaging.

There are some other customizations you can explore when implementing push notifications in Flutter.