Firebase Push Notification Integration With Flutter App

Vedesh Kumar

6 March 2021

Firebase Push Notification is the service provided by Google for the developer. Notifications are actually messages that are sent to the users even if the application is closed to spread information, reminders and many more things. By these notifications, users can navigate to specific pages in the app.

For flutter, Google has provided a library for flutter to use the firebase push notification in it.

Let’s start with step by step procedure and integrate this library. I am assuming that you already have the knowledge to configure your project on the firebase console and get the google-services.json.

Add the google-services.json inside your android/app folder.
You need to add google services dependencies in your project level build.gradle.

dependencies { ... // Add the google services classpath classpath 'com.google.gms:google-services:4.3.0' ... }

1
2
3
4
5
6
7
8

dependencies {
  ...

  // Add the google services classpath
  classpath 'com.google.gms:google-services:4.3.0'

  ...
}
And google services plugin at the bottom of your [project]/android/app/build.gradle file.

apply plugin: 'com.google.gms.google-services'

1

apply plugin: 'com.google.gms.google-services'
If you want to get the notification data in the app on notification tap then you will have to add an intent-filter in your <activity> tag.

<intent-filter> <action android:name="FLUTTER_NOTIFICATION_CLICK" /> <category android:name="android.intent.category.DEFAULT" /> </intent-filter>

1
2
3
4

<intent-filter>
<action android:name="FLUTTER_NOTIFICATION_CLICK" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>

Now you will have to initialize the listeners and subscribe to topics and configure the tasks to be done on receiving notification taps. For that, you can use the below-provided helper class.

class FirebaseNotifications {
  FirebaseMessaging _firebaseMessaging;

void setUpFirebase(BuildContext context) {
    _firebaseMessaging = FirebaseMessaging();
    _firebaseCloudMessagingListeners(context);
  }

void _firebaseCloudMessagingListeners(BuildContext context) {
    if (Platform.isIOS) _iosPermission();

_firebaseMessaging.getToken().then((token) {
      print("FCM Token: " + token);
    });

_firebaseMessaging.subscribeToTopic(Constant.FCM_TOPIC);

_firebaseMessaging.configure(
      onMessage: (Map<String, dynamic> message) async {
        print('on message $message');
      },
      onResume: (Map<String, dynamic> message) async {
        print('on resume $message');
      },
      onLaunch: (Map<String, dynamic> message) async {
        print('on launch $message');
      },
    );
  }

void _iosPermission() {
    _firebaseMessaging.requestNotificationPermissions(
        IosNotificationSettings(sound: true, badge: true, alert: true));
    _firebaseMessaging.onIosSettingsRegistered
        .listen((IosNotificationSettings settings) {
      print("Settings registered: $settings");
    });
  }
}

class FirebaseNotifications {

FirebaseMessaging _firebaseMessaging;

void setUpFirebase(BuildContext context) {

_firebaseMessaging = FirebaseMessaging();

_firebaseCloudMessagingListeners(context);

}

void _firebaseCloudMessagingListeners(BuildContext context) {

if (Platform.isIOS) _iosPermission();

_firebaseMessaging.getToken().then((token) {

print("FCM Token: " + token);

});

_firebaseMessaging.subscribeToTopic(Constant.FCM_TOPIC);

_firebaseMessaging.configure(

onMessage: (Map<String, dynamic> message) async {

print('on message $message');

onResume: (Map<String, dynamic> message) async {

print('on resume $message');

onLaunch: (Map<String, dynamic> message) async {

print('on launch $message');

);

}

void _iosPermission() {

_firebaseMessaging.requestNotificationPermissions(

IosNotificationSettings(sound: true, badge: true, alert: true));

_firebaseMessaging.onIosSettingsRegistered

.listen((IosNotificationSettings settings) {

print("Settings registered: $settings");

});

}

After adding the above FirebaseNotifications class in your flutter project. You need to call its setUpFirebase function in your first state class.

This is all you need to do to get the notifications in your flutter application.

That’s all for this blog. Thank you very much. This is Vedesh Kumar signing off.