How to send message with firebase console and One-to-One using Firebase Cloud Messaging in flutter-Android

When I was new in flutter I integrated push notification in the flutter application. I researched a lot but I could not find what I exactly wanted. So I thought of writing this blog in detail so it might help others too.

Push Notification is the ideal solution to engage the user and get them back to your application. But here we will use it in a different way. We will send push notifications from device to device or we can say user to user.

In this article, we will learn how to integrate push notifications easily into our Flutter app and how to send simple notifications from the Firebase console as well as device to device. If you want to know in detail about Firebase cloud messaging then check the link.

Now we will move step by step, so let’s start.

Create Flutter Project:

• Go to file -> New -> New Flutter Project -> Select Flutter Application
• Give the name of the Project send_message_fcm
• Select flutter SDK path
• Select project location where you want to save the project
• Set description if you want to add
• Select Next

• Set package name
• Click on finish

Setup project on Firebase.

If you are an android or iOS developer then you might already know but in case for a beginner here are the steps to create a project in firebase.

• Go to console
• Click on Add Project

• Add Project Name “SendMessageFCM” and click on continue

• Click on Continue
• Select Default Account for Firebase and click on create project

• Now our project is ready, click on continue

• Now it’ll redirect to our created project. Select Android

• Add package name and click on Register app (Here App nickname and Debug signing certificate SHA-1 are optional)

• Download google_service.json file and put it in the app folder of the project. This config file contains unique, but non-secret identifiers for your project.

• Set below classpath dependency in your project level(root-level) gradle file. It includes the Google Services Gradle plugin.

classpath 'com.google.gms:google-services:4.3.3'

• Add google services gradle plugin into your app level gradle file

apply plugin: 'com.google.gms.google-services'  // Google Services plugin

• Add firebase messaging dependency to your app level gradle file

implementation 'com.google.firebase:firebase-messaging:20.2.4'

• Now add firebase_messaging: ^7.0.0 dependency to your pubspec.yaml file so that Flutter app can receive and process push notifications as well as data messages. Learn more about Firebase Cloud Messaging
• Add intent- filter within the <activity> tag of your android/app/src/main/AndroidManifest.xml for the notification click

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

Now our project is ready.

Add below code in your app.dart file to get FCM Token. FCM Token is registration Token in google-cloud-messaging.

You will get FCM Token like this

• Now send your first test message to the app which is running in the background. For more check compose notification

• Set message

• Select device, review and publish it

• You will get notification in your device

So, we learnt how to send simple notifications from the Firebase console to the device. Now we will move to send notification from device to device. For that we have to create a database in the cloud firestore to store the FCM Token.

• Go to the Cloud Firestore
• Create Database
• Select Start in test mode and click next

• Set Cloud Firestore location where your Cloud Firestore data will be stored.

• Enable cloud firestore. Now our database is created successfully on cloud firestore.

Setup firestore dependency to flutter project to use firestore package as a library. You can check usage of cloud firestore.

• Add below dependency to your pubspec.yaml file

firebase_core: ^0.5.0
cloud_firestore: ^0.14.0+2

All Firebase versions have been updated on 17th August 2020. So, we have to use firebase core dependency to initialize firebase. Set Firebase.initializeApp() before using any Firebase product.

await Firebase.initializeApp();

Now our project is ready to use cloud firestore.

We will store a firebase token for a particular user wise so we can send messages to the user. We will make a screen where users can create a user.

So we can see our data on cloud firestore

To get the list of users from firestore:

Select the user to whom you want to send a message and post json data with FCM Token.

On the other side you will get the notification in the app file.

configure should be called early in the lifecycle of your application so that it can be ready to receive messages.

To update the widget when notification arrives, add notifier dependency to your pubspec.yaml file. It works for both android & iOS. It is inspired by the Broadcast receiver in Android.

notifier: ^1.0.2

Notify widget when receive the message in app.dart file

_notifier.notify('action', message);

Register notification where you want to receive a message.

This blog is covered flutter project creation, firebase app setup, dealing with firebase from flutter like we used Firestore to store the data and finally send the push notification from the mobile app without needing any backend api integration.

So this is how we send push notifications from device to device. From here you can download the Full source.

Hope It may Help You 😊