Firebase Messaging Flutter
Tags: flutter, firebase
Published: 2021-08-16 12:48:14

---
title: Firebase Messaging Flutter
published: true
date: 2021-08-15 04:30:00 IST
tags: flutter,firebase
canonical_url: https://mukhtharcm.com/firebase-messaging-flutter/
---

Firebase Messaging is another cool feature of [Firebase](https://mukhtharcm.com/tags/firebase/) Suite. It allows us to send notifications to our users and much more.

## Setup

First, we have to set up Firebase for our Flutter Project. Checkout [my post on setting up Firebase](https://dev.to/mukhtharcm/flutter-firebase-android-setup-4bgf-temp-slug-871398) if you haven’t already.

Then we have to add the Firebase Messaging plugin to our project.

```
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
firebase_core: ^1.3.0
firebase_messaging: ^10.0.4 # add this

```

Basically, _this is all you need_ to send notifications to using Firebase!.

## Getting Firebase Messaging Token

Firebase Messaging token is used to send notifications to specific devices.

For getting this, there is a function in the Firebase Messaging plugin. So let’s get the token and print it to the console.

```
Future getToken()async{
var token = await FirebaseMessaging.instance.getToken();
print("Your FCM token is : $token");
}

```

Running the above code will output something like this,

```
dG_9FYgjSiOmHlv_XxyQ8h:APA91bEsV52c873LipKZZQgU2M__XuvKHZn2EsjN2LY8NNiA9_lF_jXNvmnfqi7F5lOEhi5A2kLILGqSY71yrJGNfwcNHUgQ-kXNAP88KIMoFHuDrq5Y2cENV4h2a139JqHFVajaH4pW

```

Take note of the token we got from this step.

## Preparing our Test Notification

We can use the Firebase Console to Send a notification to our Device. First of all, go to `https://console.firebase.google.com` and Select your project. Then from the sidebar, select **Cloud Messaging** under the Engage Section.

![Click on Cloud Messaging](https://mukhtharcm.com/firebase-messaging-flutter/engage-section.png) <figcaption>
<p>Click on Cloud Messaging</p>
</figcaption>

This will open the FCM Section.

Then Click on New Notification. It’ll open a dialog to send a new Notification.

![New Notification Dialog](https://mukhtharcm.com/firebase-messaging-flutter/new-notification_hu8ee932b903b47b9bb7bbfde629a91560_47491_800x0_resize_box_2.png) <figcaption>
<p>New Notification Dialog</p>
</figcaption>

Fill out the **Notification Title** and **Notification Text**. And Optionally, you can also add an Image to your Notification. You can see the Device preview on the Right side.

![Filled the Notification Fields](https://mukhtharcm.com/firebase-messaging-flutter/notification-filled_hud9f7b34fc5033aff49b2261c40001bda_66492_800x0_resize_box_2.png) <figcaption>
<p>filled the Notification Fields</p>
</figcaption>

## Sending our Test Notification

For this step, Just click on **Send Test Message** on the Right Side. This will open a dialog to enter the token we previously noticed.

![Add New Test Device](https://mukhtharcm.com/firebase-messaging-flutter/add-device.png) <figcaption>
<p>Add New Test Device</p>
</figcaption>

Copy-paste the token we noted earlier and click the plus button on the right.

Then Click **Test**.

Voila! You have sent your First Notification!

Check your device and you’ll see something like this on the Notifications Panel.

![Notification we send](https://mukhtharcm.com/firebase-messaging-flutter/notification.jpg) <figcaption>
<p>Notification we send</p>
</figcaption>

PS: That unlimit on the top is one of my Client Works.

## Sending Notification to Multiple Devices

From the Firebase Console itself, we can also send Notification to multiple Devices.

Instead of clicking the **Send Test Message** , Just click Next. It’ll take us to select our Target.

![Select Target](https://mukhtharcm.com/firebase-messaging-flutter/select-target_huf326d6f063ffab1b421c4727bcf158a7_21474_800x0_resize_box_2.png) <figcaption>
<p>Select Target .</p>
</figcaption>

This is dialog is for Selecting the Apps we want our notification to send to ( One of the Apps connected to our Firebase Project). You Can also target Topics Here.

The Next Step is to Schedule the Notification.

![Shedule Dialog](https://mukhtharcm.com/firebase-messaging-flutter/shedule_hu9c75fa81d37c6cdb53c1179f7b317355_18700_800x0_resize_box_2.png) <figcaption>
<p>We can shedule to a Future Date or Can Just Set Now</p>
</figcaption>

The next two steps are optional. So just skip and click On **Review** at the bottom right.

This will open the Dialog to Finally publish our Notification.

![Publish the Notificaton](https://mukhtharcm.com/firebase-messaging-flutter/publish_hub56b938edf3640a746bee956a29b73be_26639_800x0_resize_box_2.png) <figcaption>
<p>Publish the Notification</p>
</figcaption>

This will deliver our Notification to every device which matches the criteria we set.

## Wrap

You can find more articles related to Firebase [Here](https://mukhtharcm.com/tags/firebase/)

Hope you found something useful here.

I’m always open to suggestions!

Let me know your suggestions and opinions on [Twitter](https://twitter.com/mukhtharcm) DM or drop a mail a [mukhtharcm@gmail.com](mailto:mukhtharcm@gmail.com).

If you’re feeling too generous, you can support me through [Buy Me a Coffee](https://buymeacoffee.com/mukhtharcm).

Finally, if you found this helpful, please share this within your reach so that more people can benefit from this. And Follow me on [Twitter](https://twitter.com/mukhtharcm) for getting more posts like these 😉.