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:
How to use Firebase realtime database with Flutter
You started learning flutter and now you need a backend, you read about Firebase but didn’t really understand how to…
How to use Firebase Queries In Flutter
In this article, we will go more in depth in using Firebase realtime database in flutter, and we will also see how…
How To Use Firebase Authentication In Flutter
In this article, we will create a form to be able to create a new user which will be authenticated using the Firebase…
How To Use Cloud Firestore in Flutter
In this article, we will add Cloud Firestore to a Flutter application, perform different read, write operation and use…
How To Use Firebase Storage in Flutter
In this article, we will use Firebase Storage to add images, retrieve them, and we will also connect the images with…
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 😁
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
The data message, is handled by the client application. The data message will call
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
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-changes
Sending 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
onMessage property will return a Stream that is called when an incoming FCM payload is received when the application is in foreground.
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:
_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
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.