Flutter Push Notifications with Cloud Messaging
In this project i’ll be showing how to use push notifications in flutter with the firebase_messaging package using firebase cloud messaging.
Create a new project and then add the firebase messaging package:
firebase_messaging: ^7.0.3Then i’ll go to the getting started guide of the package https://pub.dev/packages/firebase_messaging#getting-started and follow the steps.
First step tell us to set up our app in firebase in order to download and place in our project the google-services.json file. So in the firebase console i’ll add one application and follow the four steps. For the first one we won’t be using the SHA-1 certificate.
Second step allow me to download the google-services.json file. We place it in our flutter project in the following path “pushmedium/android/app” .
Then in third step we check if we have the repositories first in our android project level build.gradle file “pushmedium/android/build.gradle”. Google’s repository normally is always there so we only need to add the gms services dependencies:
Then in our app level build.gradle file in “pushmedium/android/app” at the end of the file add:
And now we have firebase in our flutter project (in order to use the Cloud Messaging)
Second step ant third step of our firebase messaging package set up tell us to:
But as you can see we already did that when we were setting up firebase in our project so we skip them and go for step four:
Following the path we open our AndroidManifest.xml file and add the intent filter. This step as the guide says is required if we need to get notifications in the app if it is on the background and the user clicks on a notification in the system tray:
That’s the four mandatory steps, next we’ll do the required steps to handle background messages that isnt enabled by default:
So we add the firebase messaging implementation, the latest version can be found here: https://firebase.google.com/support/release-notes/android#latest_sdk_versions. Just look for “firebase-messaging” and you’ll find it:
So we put the implementation in our app level build.gradle file:
Next step tell us to:
This as you can see it’s a bit confusing since it’s telling us to add a java class in our android kotlin project, so looking for this i found this open issue https://github.com/FirebaseExtended/flutterfire/issues/2311 where people are asking for updated documentacion, there i found the kotlin version of the class, so instead of a .java file, i’ll add a “Application.kt” file, make sure to change the package name to your own (that’s step 3):
Step 4 tell us to add the aplication class we just created to the AndroidManifest.xml file
By default we have in the application level of the file this:
So we replaced it with this:
Step 5 and 6 tell us to define some functions but it doesn’t say where.
I’ll be using a static function so it can be inside a class, i could set the function in the main.dart file, but it would look very messy, so instead, i’ll add a new file called “push_fcm_service.dart” in wich i’ll create the “FCM” class. Be aware of the “token” property at the end, we’ll be using it later to send messages from firebase (you should print it to console and copy it for later use).
So that’s the configuration, now comes the integration in our app. What I want is to show the notification body as a Text widget in our main widget, so i’ll convert the main.dart widget into an statefull widget, and in the initState method initialize the firebase messaging package (just a call to the configure method we copy in step 6).
Im going to usea a Stream to get the notification body (in the data part of the notification, Im going to put a “msg” key and as value the message that i want to be show in the text widget). When a new value is received via Stream then the “_changeMsg” method is called to change de value of the Text Widget.
In our FCM class we create our stream controller
Then when we received a message in the “onMessage” we add the value to the stream, so it can be available on our main.dart widget.
Now the fun part, sent a message from firebase console, we go to the firebase console and in the left menu we look for “Cloud Messaging”, once in there we’re going to create a new notification. Step one just the title and body of the notification.
Step two the target application of the notification.
Step three, scheduling is goint to be now, and in step four we’re goint to add our key “msg” and as value what we want to show in the text widget:
Then we send the notification and…remember the token property in our FCM class, when you run the app you should print this token since is the one that we’ll be using in order to send messages. I already added so i selected it and hit Test:
Our app at first should look like this with the default message:
When we send the message we received and sinked via the stream so in our Text widget in our main.dart file we get it and change the message being displayed:
That’s it, now we can send messages and received them in our flutter app. In the firebase messaging package at the time i’m writing this article there are open issues for the package team to updated the official documentation since it can be a little confusing.
As always the project code is available in here: https://github.com/menagit/pushmedium.
Resources:
- FirebaseMessagin package: https://pub.dev/packages/firebase_messaging#getting-started.
- Kotlin Version of Application class: https://github.com/FirebaseExtended/flutterfire/issues/2311#issuecomment-616688360
- Firebase https://firebase.flutter.dev/docs/messaging/usage/
