How to handle background push notifications in Flutter 🔔

Recently I was working on notifications. While implementing it I faced an issue that I’m not receiving notification in the background and also when my application got terminate. I searched a lot and I saw that It’s not only me who’s facing this issue the Stack Overflow and GitHub are full with this issue. I did a lot of research on it and finally, I overcome this issue.

So Let’s start

STEP # 1

First Import all the necessary plugins.

flutter_local_notifications | Flutter Package

firebase_messaging | Flutter Package

firebase_core | Flutter Package

Here I’m using these versions👇

firebase_core: ^0.5.3

firebase_messaging: ^7.0.3

flutter_local_notifications: ^4.0.1+2

STEP # 2

Setting up the AndroidManifest.xml👇

👈 File Directory

Add this line Inside your main activity after android.intent.action.MAIN

Add this MetaData outside of the main activity.

👈Place your Icon here for the notification

STEP # 3

Create a file called firebase_service.dart and create an instance of flutter local notification and firebase messaging

STEP # 4

Now in firebase_service.dart create a function called setupFirebaseAndLocalNotification.

Now take a look at what’s happening inside of this function.

Now call this function in your main.dart main function✌️

Here at very first, I’m initializing the flutter local notification with android and ios configuration and along with that I’m giving the notification icon in android settings👉 AndroidInitializationSettings(‘notification_icon_push’)

STEP # 5

Create a function called myBackgroundMessageHandler

So this is my function for handling the background notification here you can do whatever you want to do like navigating to the specific screen etc it’s up to you.🧠

STEP # 6

NOTE:- You can never hit the background notification if you send the notification from the firebase console so in this you have to create a postman request.

The background notification handler depends on the payload so be careful here. I’m sharing the sample request to do it right.👈

Post request URL 👉 https://fcm.googleapis.com/fcm/send

for sending the notification you have to add the server key in your request header👍

Now hit the send button and check the notification in your mobile app.🎉

Here you can check the payload in your background handler.

For a real quick implementation copy and paste the below code in firebase_service.dart and follow the rest of the steps🥱

Hurray…!!!🥳🥳🥳

So these are the basic steps to get notifications in the background. Support me by giving claps and follow me if you like it🙏🏽

Osama Asif