Mastering Push Notifications in Flutter: Firebase Integration Guide

by the end of this video you will learn how to push notifications in your flutter app from Firebase and we will also learn how we can handle background and foreground notifications and at the end we will be adding an ontar functionality when we tap on the notification it will open a new screen with the pillow so let's start first we need to come to our Firebase console and from here we are going to create our new project let us name the project as push notification for now we don't need Google analytics so let's just disable it now our Firebase project has been created inside of Firebase console let us select the platform as flutter now first step we need to have Firebase CLI installed in our system if you don't have Firebase CLI inside your system then visit this link as provided and install Firebase CLI using npm and then perform Firebase login and and then you need to create a new project you can also use flutter create command to create a project in my case I have already created a floater app it is a simple flutter app where we have a material amp and inside we have only one route as home page an inside home page we have an ABBA and a text and Center so let's some would look like this so this is the app that we have already written now we are going to push notifications in this app we need to click next here and here we need to activate flutter CLI just copy this command and open the terminal inside vs code and paste a command now it has just activated flutter CLI and next we need to configure our project just copy this and paste it inside your terminal now in our case we'll only be using this for Android so we are only selecting Android now our app has been registered you will find a Firebase option store dot pipe inside our left folder that it has created now we are going to be using this Firebase options dot file inside our main dot dot but before that we need to install two packages let us use flutter per bag and our first package will be Firebase code and our second package will be Firebase messaging install both the packages just verify inside your percept.tml file that both the packages are installed Firebase go and Firebase messaging and then you need to come inside our window dot file click on next here it is asking us to initialize our Firebase app just copy this and first we need to make this mean function asynchronous and then we need to paste the code import Firebase on Firebase code and default Firebase options on the Firebase options that letter CLI has created for us now let's stop that and run the app again so here we are getting an error we need to have the minimum SDK to 19 otherwise it will not work for that visit Android inside app build.gradle sure you will find minimum SDK version change it to 19 now run the app again now we missed one step we need to also add widgets flutterbinding dot ensure initialized otherwise it will not not initialize all the widgets just restart that and now our app is working fine now let us first add background notifications for our app for that first we'll be creating a file it will be push notifications dot dot you will create a class name it as push notification you will create a static final variable we are naming this as Firebase messaging and it will be Firebase messaging dot instance and now here we will create an initialization function where we are going to request notification permissions from the device for that request notification permission it will be a static future function it will be a static future function we are naming this as init make it async and now here we will wait and find this messaging Dot request permission here it accepts many parameters we can provide basically deserted default values that it provides if you want we can also modify this depending upon your name suppose in our case we want the announcement to be true and it should have a batch and it should have a sound then and depending upon you that what you want now here we will also be generating a token get the device fcm token the token is unique for every device by which we identify the device uniquely so you will be taking a token it will be a week so it will be inside this init function a weight Firebase messaging Dot get token it will get the fcm token for the device and then we can print that same token download token foreign function it will request a permission first and it will generate the same token that will be using now for testing now inside our main function after our Firebase initialization is done we'll be calling the push notification class and call the init function it will initialize Firebase messaging and generate the same token and now we need to add a function to listen to background changes let's name this this will be a future function let's name this app as Firebase foreign message and this function will be accepting uh message of return type of remote message make it async and then if message dot notification is not equal to null it means that we have received some notification we can print that some notification received and after our initialization is done we can call this Firebase lesson [Music] to background notifications foreign messaging dot on background message and here we will pass the function that we have created Firebase background message let's stop the app and run the app again and now we need to go to our console now here go to engage and form your select messaging now from here we need to create our first campaign click on create your first campaign and for now we are only going to be focusing on sending notifications inside our app so select the first option click on create here let's give the title as sample notification and give the description as testing click on next here we need to select our app Target this was the name of our app click on next schedule it for now and we can enable the sound here and since we have added the background Handler means our app will receive notifications only in background so let us just run our app in background now let us click on The View and publish now let's wait until the notification arrives now here you can see some notification received and here we are getting the notification now here you are getting that this notification that we recently sended now when we are clicking on this it will open our app but what we can do we can pass a payload and open into a new page so for that let us first create a message page foreign and here it will have a scaffold and we can give it an ABBA that will have a title as your message and inside our body we will show the payload that has been passed for that we will receive some arguments we can use final beta is equal to model route Dot off context dot settings dot arguments we need to add a null check here now the arguments that we will pass inside our message stateful widget will be passing the payload here mainly and now our return type will be as remote message and from here we can just display the payload or data Dot data Dot and here for now let us just display the string we need a text widget and inside that we will display it as string foreign now we have created a message widget we need to add this inside our route on background notification tapped will be using Firebase messaging dot on message open Dot listen your inside event will pass our remote message message and if our message thought notification is not equal to null it means we have tapped a notification first we will print as notification background notification tapped and here we'll be creating a navigator key final Navigator key it will be a global key and it will have a return type of Navigator state we need to also use the Navigator here the Navigator key will be the Navigator key that we have created here and now when we click on the notification we want to send the user to the message page that were recently created so it will navigate to key dot current state Dot push named the name of our route was message and the arguments that we are passing was our message the remote message that we are getting from here we are passing it as the argument we need to add a null check here now let's run our app on background let's copy our same token here we need to click on duplicate just name the note to notification as sample notification tool here we'll use the sender text message option you will paste our same token just copy the SM token and paste it here and click on test you will find that we are receiving a notification here now when we are clicking on it it's not doing anything let's just stop the app and run it again let's run the app on background and test a message we are receiving a notification when we are clicking on it it's opening the your message option and since we are not passing anything inside our payload it's showing us this but we can do 110 just inside our additional option we can pass the data as like name or something key value pair that we are willing to pass like value to true text as welcome and now if we try to test this again we are getting the notification instantly and when we click it we are getting the payload that we are passing text is welcome and value is true now we can use this value as we want inside our app but this was only for background if we test this when our app is running in foreground then will not be receiving any notification but here we can see that broadcasts received more the message it means that notification is coming but it's not showing inside our foreground so what we can do for that now we can use our local notifications plugin to show the notification inside our foreground so to use foreground notification what we are going to do we need to initialize local notification first so we'll be using the code that we have discussed in our previous app this was the initialization code we'll just copy this and Inside Out push notification we'll create another function that will initialize just paste it so it will initialize local notifications foreign local notifications package so just install local notifications now we need to import local notifications here and will also be needing the local notifications plugin and since we have already have an init function we cannot use this as a net let's name it as local naughty and it's here we need flutter local notification plugin and an ontap function so we will be needing underscore plot and local notifications let us just create a static final underscore Lotto local notification foreign type here we need to provide the on tap function when we click on local notification so here let us write on Tab local notification foreign ground just simply create a static void local narrative on notifications tab will be navigating like our previous one Navigator key dot current state DOT foreign messages and our arguments will be the form here when we are damping will accept a notification response now here we are already passing an argument if we check our message then we'll find that we are already passing the data and we are reading it as remote message it will give us a problem so let us use pass notification response here because both the return type is not same we need to add a null check here now when we click on the local notification it will open our new message page with the notification response that we pass now we need to also add a function to show a simple notification like our previous one to show a simple notification just copy this and paste it here it will show a simple notification here we are passing the title body and the payload now let's quickly go to our main.tart it was for our background now let's write a code to handle foreground notifications we need to also call push notifications Dot local notifications in it it will initialize the local notifications and then we'll use Firebase messaging dot on message Dot listen here we'll be accepting here we need to pass an even for even let us pass remote message and here let us first print got a message in program and like our previous one if our message dot notification is not equal to null it means that we have received some notification so we'll use push notifications dot show simple notification here we need to pass the title body and preload our title was inside message dot notification dot Android Dot notification Dot title and body was inside message dot notification Dot body add a null check here and uh payload inside payload was inside message dot data so the data is in form of so the data is in form of map spring dynamic so what we can do to handle it first let us just encode the data reload data that we are getting here make it a string payload data it will message dot data but let's just use Json dot in code message dot data foreign and now we are converting the Dynamic data we are converting the map data to a string of pillow data so that we can pass inside this payload now we can simply use payload data and save it but one problem that we'll be facing is that your inside messages we are passing the arguments as notification response so we need to do a modification that it is also able to handle the notification response data so for that now let us keep the data as model route of settings dot argument and let's add some if else logic like first let us declare a map of payload it will be an empty map and here if our data is of return type of remote message then we'll convert the data then we'll convert we'll save our data inside the payload and if our data is of return type of notification response then also will be saving our data that we are receiving inside but here we need to use Json decode because here payload is a type of map spring common dynamic so payload is of map so we need to convert that string to map now Theta dot preload let's add a null check here foreign notification response then also we are handling the data now we need to Simply use payload dot to string now we have completed Let's test inside our foreground test notification three let's send it to our local device we are still not getting anything I think that we need to stop the app and restart it again otherwise it will not work now let's try to send a message in foreground let's make it as test notification tree let's keep it as test notification tree and now let's just test it inside our local device you will find we are getting a notification here and now when we click on it and now let's just test it inside our local device you'll find we are getting a notification here and now when we click on it now we have completed the way of sending push notifications inside our app now generally you can store to fcm token for a specific device during login because after login your fcm token will not change and you can use and you can send specific notifications depending upon their Sim tokens and if you want to send notification to all your users then use this option like this one important notification and click on the Target and schedule it for now and you can pass some more payload like important okay now click on review wait for some time you will find notification will arrive also check our debug console now as you can see our notification is right now when we are clicking on it it is going to open our new message widget and here it is also shown the pillow that we are passing so that's all for this video now I hope that it's clear how we can send background and foreground notifications and our flutter app from Firebase so that's all thank you

Channel: Snehasis Ghosh

Views: 2,307

Keywords: Snehasis Ghosh, flutter, firebase, firebase cloud messaging, flutter push notification, local notifications, push notifications flutter, Flutter Firebase Integration, Flutter Notification System, Push Notification Implementation, Firebase Cloud Messaging in Flutter, Local Notifications in Flutter, Push Notification Handling Flutter, Flutter Notification Payload Handling, Real-time Notifications in Flutter, Flutter Notification Best Practices, flutter tutorial

Id: 3LvTFuQXIV8

Length: 35min 35sec (2135 seconds)

Published: Sun Oct 01 2023