How To Use Firebase Cloud Messaging In Flutter
In this article, we will add Firebase Cloud Messaging (FCM) to a Flutter application, which will enable us to send notifications to one user or a group of users.
Get Started With Firebase Cloud Messaging
This is the sixth article related to Firebase in Flutter, you can check the previous articles in the below links:
To know how to download the google-service.json file, you can check the first article in the above list. In the other two articles, I created a form using Flutter performed queries for the real-time database and authenticated users with Firebase, and in the last article, it was different code snippet related to Firestore and explaining each one. This article is aimed for the android phones.
Note: You can find the source code for all the Firebase/Flutter tutorials in the following repository: Firebase-Flutter-tutorials. Support me by starring the repository and following me on Github for more awesome content! You can also subscribe to my newsletter! Let’s get started 😁
Introduction
What is Firebase Cloud Messaging?
Firebase Cloud Messaging or FCM is used to easily send notifications to different users. To be able to send messages, you can retrieve the registration token of each user or you can subscribe a group of users to different topics. After doing that you can either use Firebase Cloud Functions or your own server to be able to send the notifications.
Types Of Messages
FCM has two different messages, notification message and data message.
The notification message, is handled by the FCM SDK. It goes directly to the Android Notification’s tray, if the application is in background/killed state, while if the application is in foreground then it will get delivered to the onMessage callback in the firebase_messaging plugin.
The data message, is handled by the client application. The data message will call onMessage or onBackgroundMessage callback if the application is in foreground, background, or killed. If you use only data message in the request, you can then use flutter_local_notification to display the notification.
In this article, we will use the Firebase console which sends notification messages and postman to send data messages.
Adding FCM To Flutter
To check how to create a flutter project and add the google-service.json file which is used for android, then please check this article Get Started With Firebase in Flutter. Next, you need to add the following dependency to the pubspec.yaml file:
Click CTRL + S to save, and you have successfully added Firebase Cloud Messaging to your Flutter application!
Note: I’m using latest Flutter version 2.0 with null safety enabled, you can enable null safety by executing:
dart migrate --apply-changesSending Messages Using Token
As I said before, to send messages to individual users, then you need to get the registration token of the device. Therefore navigate to the main.dart file and add the following:
FirebaseMessaging is the class provided by the firebase_messaging plugin. First you need to get an instance of that class, you can do that by calling instance property. Then using getToken() we can get the registration token of the device, which we can save to a database to use later on, but to make this tutorial simple I just printed the token.
Note: The token can change if the following happens, therefore you need to also call the property onTokenRefresh to get the new token.
Handling Message In Foreground
Now, if you have the application in foreground, you need to add the following in initState():
The onMessage property will return a Stream that is called when an incoming FCM payload is received when the application is in foreground.
Now execute flutter run on the terminal, and copy the token. Then navigate to the Firebase console -> Cloud Messaging and click on Send your first message. In the notification composer page, add the notification title, text:
And then click on Send Test Message , which will open the following modal:
Here you can add the registration token that was printed to the terminal. Now if you send a message while the application is in foreground then the onMessage callback will be called and it will print:
/flutter (23133): message recieved
I/flutter (23133): Hello World!You can also add a dialog that will show the information of that message, for example:
Which will give you the following:
Handling Message In Background
If the application is in background state, you need to use the onBackgroundMessage method to access the data, for example:
Here the _messageHandler callback, will be called when application is in background or terminated state, and the callback function has to be a top level function. Therefore when you recieve the message on your device:
The following will be printed to the terminal:
I/flutter (30603): background message Hello World!Also, if you are sending a notification message, and you clicked the notification then the onMessageOpenedApp will be called. For example:
When clicking the message, the above will print Message clicked.
Sending Messages Using Topics
To send messages to multiple users, you can use topics. For example two users can subscribe to a topic called test, then using REST API or the Firebase admin sdk, you can send messages to that topic and all the users that are subscribed will recieve a notification. To subscribe to a topic you can do:
You can also unsubscribe by executing:
To test the message, you can open postman and create the following request:
If the device was in foreground state, then this will call onMessage callback. You can get the values of the data payload using the following:
You can also send to multiple devices by using registration_ids:
I hope you enjoyed reading this flutter/firebase tutorial, please feel free to leave any comments or feedback on this post!
Originally published at https://petercoding.com on May 4, 2021.
