Push Notification in Flutter using Firebase Detailed Video (Null Safety, 2021)

say it in the notification also so if i tap on it it should take me to the green screen so let's uh tap on the notification you can see it's working and it is it's taken me to the green screen hello friends i'm maz aftab from easy approach and in this video we are going to implement push notification in our flutter application using firebase i already have a video on this topic on my channel but there are two things with that video first of all the video is now obsolete since there are a lot of changes has been done in the recent flutter version and you know about flutter to go all the code breaking stuff the null safety thing and the second thing is that video has some missing features which i'm gonna cover in this video so my subscribers were actually asking me about those missing feature and i had to reply them individually so i decided uh that it's better to make a new video with all the all the latest stuff which is the null safety stuff and all the missing features that i haven't that i had not covered in the in the last video anyways let's begin with the project structure that we have set up uh to save the time these are a little bit of files that i added uh just after i created a new project of flutter first of all let's see what what we have in the public spec what dependencies we need to add in order to make this thing which we are going to make so basically there are three dependencies that we have to add the first one which is very important uh in order to integrate firebase in our project it is basically firebase underscore core so you can search on pub.dev and you can get the latest version right now this is the latest version but uh whenever you are making whenever you are following this tutorial you have to check which is the latest version and you have to keep it uh latest the second dependency which is very important and we are going to use it for push notification it is firebase messaging since we are actually using firebase messaging behind the scene for notification for sending the notification and it will be like the it will be like acting as a server so this is very important dependency and similarly uh this is uh the latest uh version right now but uh you have to use uh the version which is latest at the time when you are following this video and the second one is letter local notification it's also uh basically for showing it's actually for displaying the notification once we will receive the the notification from the firebase so this basically allow us to show the heads-up notification which is a type of notification and we will shortly discuss about it so just use the latest version uh when you are following the video so these are the three dependencies you need to add now we have very simple structure in lib we have nothing fancy we have three files the first one this is the generated file you will just whenever you will add the firebase underscore core and you will click on pubg this will be this will be generated automatically so uh let's leave this well basically we have these three files the main dot dot red page and green page first of all let's see what we have in the main dart file so we have nothing fancy in this file first of all we have set up uh we have defined the routes and we have basically two routes the red page and green page which i have used which i'll be using for navigation for testing the navigation after the user tap on the notification so this is just these are just two simple pages if i go inside this you can see this is just a scaffold with the red color and there are some text which is indicating that this is red screen and also similarly for the green page we have exactly the same code that we have in the red page or the only difference is the color is of color we have here a green color just to differentiate between two different screens so these are the two screens we have then in the home we have my home page which is basically the default uh widget i just changed it a little bit i removed the counter and all that stuff and what i did is this is basically a stateful widget not a stateless widget because we need it as a stateful uh because we will use some functions for initializing the firebase and we will do it at init function in it state in this in this my home page anyways in the build method we just have this uh basic screen you can see right now and on the emulator it's alive so you can see it's we have a scaffold and then we have a center text with some padding so that is what we have right now and now we will um move forward to the firebase part to integrate the firebase in our flutter project that's basically the first part so this is our firebase project it's just a new project i haven't done anything in this in this project so first of all what i'm gonna do is i'm gonna i'm gonna integrate the firebase uh uh the flutter project called and specific specifically the android module with this firebase project because we can just test the push notification on of uh in android since uh the ios push notification needs a real device and some other stuff and i will shortly i will basically cover that video also uh very soon but right now we are just focusing on android because the the concept are very much same i mean the base is same and we can later on do on ios also when we set up when i have like the setup for doing for making the video anyways so for android you have to click on android and then you have to provide some information like the package name and app nickname and the sha1 certificate which is in our case it's optional because in in case when you are implementing dynamic links or google sign-in then you have to must provide it but we can skip it for now so first of all how to get the android package name i know it's pretty simple to integrate the firebase so if you already know how to do it you can skip some part and you can move to the next part however i want to make this video full and comprehensive so that anyone can follow without moving or leaving the video so for for the for the application id you have to go in the application level gradle file which is in the android module and then you have to find for the application id so this is the application id or more specifically the package name so you can copy and you can paste it over here then you have to provide the app nickname you can do anything it is not necessary to even provide it you can leave it if you want and sha-1 if you have the sha-1 you can provide it but it's not mandatory this is the sha-1 and it's unique for each of the development uh environment like for for for the laptop so this is my sha-1 but you can leave it empty also so once you provided all these information you can click on register app and this will take some time now it will say you to download the configuration file which is the google services.json file so i already have the file with the same name so what i'm doing right now i'm deleting this file first so that it can be easily downloaded with the exact name that we need so this is the file you can show in your finder it's still downloading okay okay here it is and now you can copy it press the copy keywords and then you have to put it in the in the app directory which is in your android module so let's do it so this is the app directory so just come here and you have to press ctrl or command v and you can just copy it so that's the second step you have to perform so now you can click on next and now there are some some dependencies and some uh lines you have to paste in your in your gradle file so first of all you have to go inside the build.gradle file for the project so there are basically two build.general file the first one is the app level and the other one is the project level so right now we have to go in project level and you have to paste this line in the dependencies so let's go in the project level so this is which the one which is inside the app folder it is app level and the other one which is outside is the project level so go in the project level and inside the dependencies just paste this line that's all good okay so the next step is you have to open the app level build.gradle file and you have to paste first of all you have to paste this line and it should be after apply plugin so let's open the build.gradle file which is the app level and over here you have the apply plugin and you have to just paste it over here and then you have to paste these two lines also so just copy this and let's paste it at the very bottom inside the dependencies yep and this one also okay that's all good and you can press continue and then that's all good you have successfully integrated uh now what you have to do to synchronize everything you have to stop your application and you have to rerun the application and open the console to make sure that you have uh set up everything correctly and you are not getting any sort of error okay so the application is restarted and you can see some red lines in the console but don't worry it's just the uh warnings not the errors so we can continue with this so now we have successfully integrated firebase without flutter project and now what i'm gonna do i'm gonna do a really basic or simple thing just to start things so what i'm gonna do i'm gonna receive a push notification right after integrating the firebase with our project and that's a that's really simple uh procedure basically so you don't have to do anything you just have to integrate firebase with the project and then you'll be able to receive the push notification so first of all let's close all these things which is unnecessary right now okay so we have just this main uh part and these two screens or we can just remove these two screens also so what i'm gonna do i'm gonna first move it in the background sorry okay i'm gonna move this application in the background uh even though it's still opens not terminated at all and i'm gonna go in the in the fire in the firebase project and i'm gonna open the cloud messaging so let's open the send first notification and let's give the title first notification and some tags testing post notification that's all you have to click next and then you have to select the app okay next next next and then you have to click on review just publish and let's see what happens so you can see we have received the notification and you can see it's in the system tray it's in the system tray right now so if i open the notification tray so you can see it's saying the first notification and it has the same body which is testing first notification so you can see how simple it is to receive uh the first notification up using firebase messaging you just have to integrate the firebase and then you can easily broadcast the message you want to uh broadcast and that's very simple uh thing to do really so now what we are going to do uh we have seen how to receive a simple notification uh in the application but now we have to gain some more control over the over the notification we are receiving we have to know what notification we are actually receiving upon receiving any notification and we also have to get the data that we may be getting in the notification in the in the data payload and we have to use that further for maybe for navigation or for some other purpose so we know we don't just have to show the notification but we have to have the control over the notification we have to exactly have the notification data and the data itself which we are getting in the notification so for it we have few callbacks that we have to use so before using those callbacks or before using the those streams because some of them are streams we have to set a few things first of all we have to initialize the firebase uh and to do so we have basically firebase and then we have initialize app and this is basically a future so we have to use a weight and since we are using a weight we have to use async and also before actually having this line we have to we have to ensure the flutter widget binding so you have to basically write this line to avoid any sort of error so that's three lines you have to add and now what we are going to do inside the inside the my home page i'm going to define the initiative state and inside the interstate i'm going to define okay inside it i'm gonna use all those call backs or all those streams uh that will give us more control over the over the notification so the first uh callback or the first stream that we get it is firebase messaging dot on message and you can see this on message is basically a stream uh of remote message the remote messages the instance of the whole notification we are receiving from the firebase messaging so they say they don't say it just a notification because it it may contain the data and some other stuff so they rather say it remote message so as the firebase can be continuously sending uh the messages so that is why it is a stream so we have to listen uh to it uh for getting each of the messages we will be receiving from the firebase so let's rename it to message and inside it you'll be receiving all the messages instance or the notification uh so for the notification we are saying now from now we are saying it message we are not saying notification because message is more generic term and it contains the notification and data also so we will receive the firebase message uh in our application so it will be automatically uh available in the system tray but uh to get the instance so that we can use and we can get the values and we can get the data from it so we need to have this on message stream so right now what we can do simply we can just print you can see inside the message we have the data we have the notification and we have content available message id message tab there a lot of different things but the thing which is important for us is the notification so so we can simply print the notification body and also the notification the notification title and since the the notification can be null so let's uh say if message but notification is not null in that case you have to show these two things okay that's fine and yeah and also this basically a stream uh will only work when the app will be in the foreground right now you can see the app is in background so this whenever we will receive the message from the firebase while the app will be in the background this on message will never get called however for for that case there we have some different stream we have some different callback this will only gets called when the app will be in the foreground if i move it to foreground and then i will send from from firebase i send some message and then if we receive a message we will get that message inside this on matches message since the app is in foreground but while the app is in background we have to do some other thing so just keep in mind that this only works while the app is in foreground so this is uh the one stream or the callback we need to have uh to configure uh and to gain more control over the over the messages we are receiving from firebase before it we have to we have to write another line to to make it work properly so we have to write firebase messaging.instance and we have to fetch the get initial uh message yes and we will use this in future uh we are using it for a purpose but the second reason for using it uh the on message works properly when you use uh this get initial message line however in the future we will we will use it for uh for a purpose and i will explain you why we are using but right now we just think that you should add it and you should add it before before on message stream so now what i'm gonna do i'm gonna run the application first of all close the application completely and i'm gonna run the application first of all let's remove the existing notification from the notification tray in order to avoid any sort of uh confusion and let's run the application again so basically we need to get the notification body and the notification title printed in on the console so that's basically what we did now so if we will be able to print or it on the console it means we are getting the node the message uh in the application we are not just showing it we are also getting the instance of the of the notification and then we can further use it for for many different cases okay that's something the cash related issue that often happen uh with the flutter so let me resolve it okay so i just fixed uh the pop the cash related issue and i fixed it using a command which is pub cash repair and you can use it all it actually re-download all the cat all the uh packages uh that's uh cached in the flutter sdk anyways we were about to test this on message stream and as i said this will be working in foreground so let's now the application is open and as i said this will be only working when the app will be in foreground so we will send the notification the message from the firebase and then what we will do uh we will see the console uh it should print uh these uh notification body and the title that we will be sending from the firebase and make sure the app will be in foreground like it is right now so let's remove all the existing stuff from the terminal and let's uh open again the uh this push notification project and i'm gonna copy and just change the title on message testing so we will be able to see this on message testing and this first testing first testing first notification these two things on the console so let's uh okay just click on review and publish let's open the console let's see if it is published yep it should be here anytime sometime it takes some time okay so you can see it is uh we have received the message if i increase the size of it and you can see that it's a broadcast receiver message this is the internal message from the firebase but the thing which we are interested in is we get these two the on message testing uh which is the title and as i printed the title after the body and this is the body so and there's one thing that you uh must know about it that firebase uh while the app is in foreground firebase never displays uh the the the this never displays the notification by default you can see we haven't received any notification on the system tray also we haven't received a heads up notification so heads up notification notification is like a notification that displays over the screen so uh the notification that comes in the system tray it's just called the uh normal notification but the one which is displayed over the uh screen while using any application so that's the heads-up notification but we are not it's not showing uh in in the case when the app is in foreground the firebase is not showing the notification either in the form of a system tray or as heads-up notification but still the thing is you are getting uh the message uh that we are sending from firebase we are getting the message in this on messages stream so that's the thing which we want to test and later on we will fix this issue also like if we want to show the notification uh despite app is in foreground we still want to show the notification then we will use uh something to make it work and we will do it shortly okay so now we have some more control over the over the messages that we are getting from firebase we are not uh we are actually getting exactly getting the instance of the message and we can use uh the properties like body title and also the data that's the this that's the key uh for basically having this on message we want the data uh that is coming along with the message so we can that basically contains a specific message like it may be saying that you have to navigate user to that specific screen or you have to show something some pop-up or something so we are basically interesting in in the data specifically so that is why we have uh over here we have configured the on messages stream so we have done with it and we will do some more things uh uh shortly but the thing which we are doing right we are going to do right now is we are going to use another stream or uh basically yeah it is a stream actually so like if say now uh because in in the foreground we are not receiving we are not having the notification displayed we are just getting it so and we will make it work also later but right now what i'm gonna do is let's say the app is in by background and now we'll be able to receive the notification like we were getting uh before what we want to do is whenever the user click on the notification it must take me to the to the relative route uh and we will send like the route information in the data of the message that we will be sending from the firebase and based on the data we'll be receiving it must include the route name and then we will take user we will take we will navigate user to a specific route that the message will contain so this is what we want to do so basically we want to have the click action on the notification that we are receiving uh in the background so for this we have firebase on message opened so it is also stream so you have to listen for it and we receive the message instance inside it similarly like we receive in the case of on message now there there are a few things to really uh understand this on message opened app is first of all it it works uh it it comes in act when the user taps on the notification that comes in the notification tray but the thing is uh your app should be in background and not terminated it should be open okay so there are two conditions the app can be in background in two cases the app is in background but the application is basically closed and it is not opened but the second case is the app in the background but still it's open and you may be you may be using some other app but it is it's still open so this on message opened app only works when the app is in background but open end user tabs on the notification these they can be sometimes confusing uh and you must know clearly in order to implement it because i i really have i really had a bad time understanding these things and that is why i'm really making it really clear for you and i'm also adding the comments so that you can have these comments when you have the code so the thing is this on message open app will get call and you will receive for the message whenever the app is in the background and it is not closed and the user taps on the notification notification you receive in the system tray then this will come into the act and over here you will receive the same message on which the user uh will do uh like the tap event on it so absent background and user tabs on the notification this is when it comes into play now what we are going to do uh um we will simply say if message because we are more interested interested over here in the data so we will say if the message isn't contains the data what it says can be null conditional is true okay so it should it always have the data so simply what we will do we will print message dot data and as it is a map so we will be sending the data and the key will be route so yeah this is so maybe i can make it more clear final route from message and then you can just have it and you can just print the route from message okay so that's uh that's it so the thing is now if i run the app again let's close the app just to make sure it is opened afresh now what will happen actually when i will send the message from the from the firebase i will also send the data and i will have inside the data uh i can send the key value pair so i will send along with the data i will send a route key and in the route i will define the value it could be red it could be green because we have two pages and whenever our application will receive the notification and the data alongside with it so what will happen it will it will display in the system tray since the firebase displays the message in the system tray while when the app is in background so we will make the app in background and then we will receive the notification in the system tray and then we will tap on that notification so tapping on the notification while app is in background but open will trigger this stream so we will receive a message event and then on the message event we will just simply fetch the route from it and we'll print on the console but later on we will also perform the navigation and we are going to do it very shortly so now the application is running so what i'm gonna do uh as i said uh million times that this open app thing works only when the app is in background because uh we can only receive the notification in the system tray when the app is in background but you can see that it is just minimized it is we i haven't closed the application so that's the key so what i'm gonna do i'm gonna clean everything and i'm gonna send a new notification now so we can duplicate and over here we can say like on message open testing that's great and what i'm gonna do in the additional settings over here it is the custom data and the key value appear i was talking about so over here what we can do simply we can say route and make sure the name is same the key name and here we can say red okay we can add that we have two uh routes that are red and green so you can either send green or you can either send red but right now we are not performing the navigation you can send anything you want but later on we will when we will like navigate user to a specific route we have to be make sure that we are sending the correct route name so let's review and it should send the notification and the notification will be soon coming in the notification tray sometime it uh it it takes some time but sometime it is really fast okay so we have received uh the notification and and one thing to uh really keep in mind that we whenever we are receiving the message in the background we are receiving we are getting this warning missing default notification channel so let's just keep in keep it in mind we will going to fix it uh very soon so let's remove everything and we have received the notification if i tap on it it should open the app and it should trigger this on message open app it should trigger a new event to come inside this uh inside this cell stream and at the end of the day it will print the red which we sent uh in the uh from the firebase so let's tap on it so you can see it is sent it is actually uh having the red thing so rather than just printing what i can do now because we are good we have tested and it's working fine so you can say navigation okay it is navigator let me get it off well i have i've been using flutter for 2.5 years and i'm still not sure what it what's the name that happens okay so navigation.off and then you can say push name and you can say simply route from message okay so simply you can run the application again and rather than just printing it will now take you to the relative path so if i will be sending red from the firebase messaging it will take me to the red screen or if i'll be sending the green so it will be sending me to the green screen or if i will be like sending something that's not to define in the app as a root so obviously it will give you error so you have to make sure that you are sending the correct name okay so the app is restarted so let's move it in the background because you know that on message open works only when the app is in black background but app needs to be open so let's uh send a new message you can duplicate this and now we can send the green in the route so if i publish it i should be receiving the notification very soon so one two three okay so i've received the message you can see still i'm getting this warning we are going to fix it very soon and if i tap on it rather than printing red on the screen or green on the screen because now we are we are sending green it should take me to the green page okay great so that's working so we have done with the couple of streams that are that are already essential this on message that only works on when the app is in foreground and then and this uh this on message open app whenever the the app is open when someone taps on the message and the app is in the background but open and that's that is when it works so we have performed the uh navigation uh based on the routes or route we are receiving from the firebase so now we are going to work on a new thing so the thing which we are now uh uh working is uh you see the app was open but it was in the background but how about when the app is closed and it's in background so what happens because in that case on message open up app never works so we have to have something else in order to handle this condition so so i'm gonna show you how to really handle the situation when your app is in background but it is terminated it is closed so you are not you are not you haven't opened the app but still how to make it work how to get the how to get how to basically navigate user when he taps on the on the notification also before before handling that particular situation uh we see that when we receive uh the message uh we get uh in this in this stream uh that particular message but uh the thing is uh this needs to be in the app needs to be in foreground uh to work uh for working uh this working of this on message stream but when we are receiving the message while the app is in foreground this on message uh never works so if i can show you again like sending a message the duplicate message so you can see the app is in background and if i publish this um this uh notification body and the title will never get printed because this on message only works when the app is in foreground however there may be the cases when we have to uh we have to get the the data and we have to get uh the things that that is being sent with the notification while the app is in uh background and you can see we are also getting this message a background message could not be handled and dart as no on background message handler has been registered so yeah we have set up the on tap click action but we are not getting uh uh the message and the and the data and all the stop uh stuff uh before actually user taps on the on the notification and there may be different cases when we have to get uh the message uh once we receive in the background because that message can that mess message can be like uh the intimation of some action to perform in the background so there may be different cases you can you can think of but the thing is we have to get the message and all the information uh we have to access all those information while app is in the background because this on message only works when the app is in foreground so for this we have we have another uh stream so rather than registering that stream over here inside the united state uh we normally we normally do it at the very at the very beginning so you can you can probably do after the initial initialization of firebase and over here we have to say firebase messaging and then we have a the on background message so inside it you have to specify the the handler which the return type should be a future and there should be uh the remote message as the parameter inside it but the thing is let's remove this the thing is the handler that you will provide inside it it should be top level function it it should be a top level future because i mean the top left by top level it i mean that it should not be inside some class it should be really outside everything outside the scope of everything because the on background message handler works uh in its own isolate it work i i it works outside the scope of the flutter application and that is why that is why it is background message because the app is it is it's not open but still it's working so it means it's working in its own isolate in its own thread so to make it work you have to have the handler outside of the scope of everything so you can just make it here so the return type should be future white and then give it a name background handler or anything you want and inside it you have you will receive a message let's use async and this is what you have to do and you can see it's top level since uh it is outside the scope of everything it is it is not uh defined inside the class and now what they can do this is similar like on message but it only works when the app is in background receive message when app is in background solution for on message okay so we can just print the message data you can just make it to a string and we can also print a notification title okay so now let's close the application completely because we have added uh something really big and yeah everything looks fine now let's run the application and also remove the existing notifications on the notification trace so that we can avoid any sort of confusion okay this starting devtools is really something absurd it's taking so much time i'm not sure why it is happening anyways the application is now in the progress of running so what we can do um because we want to test uh that we should receive uh the message instance while the app is in background and we receive some message from the firebase so what we did we receive the message and we have printed the data that we are receiving alongside with the message and also we have printed the title of the notification so that's the two thing we have printed and this will work even the app is in background uh whether it is opened or closed because this background handler works in both cases but the thing is the app should be in background and if it is in foregone obviously the on message will work so okay so everything working fine yep you can see the fire flutter firebase messaging background services started it it is basically the acknowledgement that it's we have registered successfully so i moved the app in the in the background so last time when i sent the notification we haven't received in the in the console i mean we haven't received the notification yeah it displayed on the system tray but we haven't received the notification in the app but now uh we have set up the background handler and now we'll be able to receive the notification data and also the notification title since we printed those so just to make sure we have something in the data yeah we have the route okay so let's review and publish and let's wait for it to work there should be something in the console very soon you can see the app is in background and the on message don't doesn't work in the well when the app is in background but this bank background handler works and it should work you can see now that we receive uh the broadcast message you can see the app is in background but still we are receiving this route information which is the data of the node that we are getting with the notification you can send a different key value pair but right now we are just sending the route and you can also see that we are really getting the notification title so it means you are getting the the message here and you can do several things with it so that's the one thing so we have covered another thing that how to get the message when your app is in background but now another thing we have you we have registered on message open app which works when the app is in background but opened and user taps on the notification but but we are now going to see how we are going to handle the case when the app is in background but terminated but closed and user taps on the notification how we are going to perform the navigation so that all goes inside this get initial message this get initial message actually gives you the message on which user taps and it open the app from terminated state okay so it means that you whenever this get initial message return something some non-null thing so it means that the user has pressed on the has tabbed on the notification okay let me solve it okay so it means the user has tapped on the notification and it opened the app from the terminated state of like the app was closed so in that case you will get the message over here on which the user depth so it's basically works in when the app opens from the terminated state so what you can do you can simply do the same thing you can just copy these two lines and you can paste it over here and what you are you are doing actually you are getting the you are getting the okay so the message can be null so to avoid the null thing you can just uh do one thing if message is not null because if you still use this get initial message when the uh when the app is not open from the terminated state and you don't have the initial message in that case you will have this message null and this message uh will be non-non-value whenever uh you receive some message and it's in the in the system tray and user taps on it while the app was in uh in the background and terminated the state it it was not open yet so this will work in that case so what i'm gonna do uh first of all i'm gonna close the app i'm gonna reopen it just to make sure that it refreshes everything it has the latest compilation and meanwhile i'm gonna create a notification you can duplicate it okay so let's click on review and let's wait the app to run first okay now our application is running and the background services started everything working fine what i'm gonna do i'm gonna close the application so just close the application so now the application is uh not in just background state but it is also closed completely so now what i'm gonna do i'm gonna send a message that should include the data since we are navigating user based on the data and now let's see what happens because uh the application is closed it has no connection with this terminal so you will not receive any information you'll just receive a notification in the system tray and then on tapping uh it will take it should take you to the uh to the router screen that's that's been sent with the notification so we have received a notification and if i tap on it it should take me to the green screen and you can see the app is still closed it's not open so if i tap on it you can see the app is yeah it is now it's taken uh user to the to the green screen so we have covered everything every callback or every stream we have uh in this firebase messaging and that's sometime really confusing now basically we have two issues uh that we haven't solved yet or that can be the issues i'm not saying it uh there are issues the first issue is uh yeah there's one issue actually the first issue is while the app is in background we are not receiving the heads up notification we are just receiving the notification very silently and it just comes in the notification tray however if you use firebase in flutter firebase messaging it gives you the heads-up notification by default when the app is in background you just have to do few steps that we are going to do very soon but the firebase uh doesn't gives you the doesn't give you the uh the heads-up notification while the app is in foreground or in fact it it doesn't give you the system notification that that comes in the notification tray so so in in the foreground firebase never display the notification either the normal notification that goes in the system tray or also the heads up notification but in case of a background uh that in in case when you are weld app is in background and you receive some message firebase gives you the message uh it displays the message as heads up notification but right now what's happening in in case of background if we just talk about background we are receiving the notification but we are receiving in the system tray we are not receiving in heads-up uh notification and that's actually the abnormality that we have to solve and you also remember that uh whenever we are receiving some a message uh when the app is in background like if i send the message so you can see one thing there is a warning that that i also that i told you about and that warning is uh okay sorry the app is basically is not connected with this firebase so uh you cannot see but you remember the warning of the android channel the missing android channel thing so that was the issue and for from because of that reason we are not uh receiving uh i mean we are not uh the firebase is not displaying the uh the notification uh as heads up notification while the app is in background which it does but since we have some missing things in the configuration and that is why it's not working so we are going to fix that thing and then we'll be able to see uh you can see right now we receive a notification but it just silently goes into the system tray we it it should it must show some sort of uh the heads-up notification that displays over the over the screen so it will be more obvious so for solving this we have to follow a few steps that we are going to do so the first thing is okay first of all let's uh let's move the app is in in the background and let's uh send another notification just to show you that warning again let's click on publish and let's wait for few seconds perhaps you can remove these all things okay so you can see again we receive everything we receive the message you can see it's in the system tray but still this is saying missing default notification channel metadata in android manifest so when we will specify this notification channel id then we will be able to see this notification as heads of notification which firebase normally does so so for solving this first of all we have a couple of lines to add so these are the lens that we need to add in the manifest file so let's open this and you have to paste this in the android manifest file which is in the source and then main yeah okay so we have this manifest and application then activity inside the activity we have some metadata uh already so let's paste it after that and you have to specify here the the notification channel id so we are saying it easy approach yeah we can just say it easy approach so this is the um notification channel id what happens is after the android 8 uh it is necessary to define the channel id because it is like uh the identity of your application for the notifications so basically if you don't specify this uh channel id uh then or if you don't create the channel for your for your application then you will not be able to receive the notification uh in a proper way yeah you're still receiving it but it's it's going in a system tray and it's going very silently but you have to like uh it should show some some sort of uh more obvious picture of the notification so so this is the first step you have to specify this notification channel id however that's not the only thing you have to do because if you like run the application and you again send the notification like if i try to do it let's close the application and let's rerun it and while it is running i'm creating a new notification and i will do some few different things which i haven't done yet so what i need to do in the additional options over here you can see we have android notification channel so now i should define here easy approach and you know these uh we will be sending the notification in the production in the live app we will not we're not using the uh we will not use this uh firebase console for sending a notification obviously there should be uh we will be like using uh some uh apis uh that firebase gives uh and for for sending the notification from some different from the server so but this is just for testing but you can easily send the notification channel id and the data when you are using the api for it anyways so now i am sending the easy approach channel and i have registered the channel but i haven't created the channel so when i will receive the notification with this channel i will uh again uh get some error but that will be some new error so let's see what it says so i've sent a notification and it should be in the console very soon and there should be some different some new uh warning that we need to solve okay so okay you can see now we are getting another thing it is notification channel requested easy approach has not created by the app so it mean it it should be created by the application so and that is why it's uh the default notification value will be used and all and still we are not receiving the heads-up notification because we don't have uh easy approach channel created and for creating this channel uh we have to write some code basically we have to use uh the dependency which we added which is this flutter a local notification so it also allow you to create the notification channel for the application so what i'm going to do inside the live i'm going to create a folder which is services and inside it i'm going to create the local notification service vacation service okay and let's open this and i'm going to make it a normal class and inside it i will write the code for uh basically for creating a channel for our application so for this uh what i'm doing actually i'm creating static final i'm gonna make everything aesthetic so that it can be easily used without making the claws so static final uh we need to have first of all we need to have the instance of local notification letter local notifications plugin that's come from flutter local notification package so we need to have this and and this needs to be initialized also and we have to give the name also plugin notification plugin okay that's great and then we are going to make a method inside it which will be initialized method it will be responsible for initializing uh this local notification and for creating the channel and all so so in inside the notifications plugin or inside it we have initialize and inside it we have to provide the initialization settings instance so let's first define the initialization setting instance stabilization settings and inside it we have uh to provide uh the information that the settings of uh for each of the platforms but right now we are just doing it for android so you don't have to really focus on ios and mac os you just have to specify the android initialization settings so let's just define android initialization settings and you just have to provide here the icon the default icon for the for the notification so we are just going to uh refer uh give here the the reference of the flutter logo which is our app logo so inside it we will have this reference which is the default icon so let's make some more space okay so now we have uh we have initialized this uh notifications plugin uh which is the flutter local notification and but still we haven't created uh the channel so for channel you have to at least one time display the notification uh using flutter local notification and once uh you display the notification uh you can you can give the configuration for the channel and then the channel will be created so what i'm gonna do i'm gonna create a method which is which is uh display and this display notification uh will be used uh in case uh when the app will be in foreground because you know we we the firebase automatically doesn't show the notification uh either in the system tray or as heads-up notification and in in order to fix that issue if we really want to show the notification uh while the app is in foreground and we receive some message then you have to make use of this display function so it's it has two responsibilities it will not just show the uh the notification but it will also create the notification channel uh uh when it is run first time and then it will not create a new one it will just create when it runs first time so so that's basically the display uh method uh we will be calling so inside the notification plugin we have uh show yep and over here we have to specify the notification id the notification title body and the notification details and this notification details are the details uh which will create the basically the uh the channel so first of all we have to provide the notification id title and body so for the title and body uh we will be sending uh from that we will be receiving from firebase the remote message so we'll be sending uh the remote message in this display for showing for it to show the heads-up notification so we can just get the title and the body from the message notification something like this and also for the body we can do the same thing and this show is basically a future so let's use here a weight also and since you're using a weight so let's use async okay so we have to also specify the id uh the notification id and it should be unique so what i'm gonna do for notification id i'm gonna use datetime.now and i'm gonna use the millisecond since e e ochs and what i'm gonna do i'm because this that's a really big value so i'm gonna divide it uh with thousand and it will be the integer uh division it will always give you integer value so it will be unique every time and now we have to specify here the notification details so that's the most important thing for creating the channel also so let's define this notification details okay so let's make it final notification details then say notification details inside the notification details we have to provide the details for each of the platforms but right now we are just doing it for android we have to provide the android notification details and inside it we have a few things so let's uh see what we have so first of all we have the channel id and then channel name and then channel description the channel id is a easy approach that we have given in the manifest also and then channel name is easy approach channel so it's actually channel but we are talking about notification channels and then we have to provide some description like this is our channel so these are the three things you have to specify first then you have to specify the importance so make it uh the maximum importance and we also specify have to specify the priority and the priority should also be high so these are the things you have to specify so it will whenever you will be like uh it will show first notification it will create this channel also so what i'm gonna do also let's wrap this whole thing in let's hold this let's wrap this whole thing and try and catch so that if we get any exception we can catch and we can fix the issue so how to do it easily yeah so in case if we get any exception we can just print the exception okay that seems fine uh what we can do now uh we can make use of uh we have we first have to initialize this uh notification uh local notification service and then in the on message when we receive the message uh from the firebase we can you make use of the display this will not just uh show the message on the screen uh on as a heads-up notification but it will also create the notification channel so that we can use it uh for the background notifications also because i'm again reminding you that in case of background when we receive a notification we don't have to do anything else we don't have to use any other package to show the heads-up notification you just have to create a channel and you just you just have to specify the channel id but in case of foreground notification you have to use this flutter local notification because flutter uh because firebase doesn't show uh the heads-up notification or even the notification in the system tray while the app is in foreground so that's two things you have to keep in mind so what i'm gonna do uh in the main first of all uh at the very beginning after we initialize um the yeah after this we can say local notification service dot initialize so that's the first thing you have to do you have to initialize the local notification service and in the on message so in case when we in case when we receive a notification we will simply say notification local notification service and inside it we have display we'll just simply pass this message into this and it will do a couple of thing it will create the channel for you and it will also show the notification as heads up notification because you know in on message uh while app is in foreground we firebase never display the notification so anyways let's close the application and let's rerun it so we are going to test uh once this code compiles successfully we are going to test uh that we are receiving uh the notification while the app is in foreground and not just we are receiving but uh the app should also show uh the notification as heads up notification since we have now uh the flutter local notification in play so you can see the app is in in in foreground uh what i'm gonna do i'm gonna create a new notification or rather than creating new we can just duplicate to save time and since you can see the app is in foreground uh the on message uh should get called so this on message will get called and since inside this on message we have displayed using the local notification service and this will display the notification as heads-up notification so we we should be able to see the notification uh while the app is in foreground so let's publish this and we have to wait for some time one two three four okay you can see now we are receiving the notification as heads up notification and now the channel is also created so we can also test the thing which we were testing the background thing okay so we have tested successfully that uh we are now displaying the notification as heads of notification that comes over the over the screen not just it goes in the system tray we are showing it uh in the case of uh when the app is in foreground and you know that firebase doesn't display uh in that particular case so we are using a local notification service work for this purpose now what we are doing we have now channel created also uh the easy approach channel that we are using for this app so now we are going to test uh the background uh notification also because as i said million times that for the notification to display as heads up notification uh in case when the app is in background you don't have to do anything else you don't have to use this local notification firebase automatically displays it when you have set up the channel and all that stuff so what i'm gonna i'm gonna do i'm just moving uh it to the moving app to the background and i'm also removing the notification that's in the system tray in order to avoid any confusion and since the channel is now created i'm just going to send another notification while the app is in background it must show uh the heads-up notification however we are not using local notification in case of uh inside here in the background handler but still it will show automatically since we have set up the channel id and all so let's run the application sorry the application is still running we just move it to the background and let's send another notification so now we should be able to see this notification as heads-up notification since we have created the channel and all so we have sent the notification and it should be displayed as heads up notification very soon okay so you can see that uh this this is being displayed by firebase not by flutter local notification so wow that's great so we have done very much things in this video tutorial and i think it's the longest video i have made best but i just want to make it comprehensive and that's why i'm discussing everything in detail and there is a lot of uh explanation there a lot of explanation on internet but the thing is they are not complete everyone is missing something and that is why i want i wanted to make some comprehensive video but this one thing is still uh which is uh because you know this notification uh in case of background it is showing by uh firebase so if i tap on it it should take me to the green screen yeah that's working but the thing is uh when we are using the notification when the app is in foreground so it is completely done by flutter local notification and there's no firebase involved or showing that notification so in case when we receive like uh let's go in in the let's open the app again yeah let's go on the on the main screen and now what i'm going to do i'm going to send another message while the app is in background sorry while the app is in foreground and let's send this time red and i want to uh actually test the click action event on the notification that is being showed by this letter local notification is because it's in foreground and we are using this for uh showing the uh the notification while the app is in foreground but what happens when we tap on it should it take me would it take me to the red screen so if i tap on it nothing happens it is because we are this on message open app never gets called in that case because when you are used when you are showing uh the local notification you are going out of the context of of firebase you are now uh playing with the flutter local notification so the on tap event should be us defined somewhere inside the flutter local notification only in the case when app is in foreground because in that case firebase doesn't show the notification and hence it it doesn't give you any option to really handle the on tab while the app is in foreground but the thing is you are using firebase flutter local notification uh sorry flutter local notification not the firebase for displaying the uh notification in case of uh foreground uh uh while the app is in foreground so obviously the on tap should be defined in inside the local notification service so what i'm going to do i'm going inside the local notification service and while i initialize the uh while i initialize this uh local notification there is a callback which is uh on select notification and inside it we have the we receive here the payload which is in the form of a string payload is any additional in information any additional data in terms of a string in the form of a string and while it's giving error okay so it's uh it should be async also the string can be null yep so what we are going to do this payload in in our case because that's a essential information it should be the route information so so what i'm gonna do uh rather than saying it payload we can just say route because that's additional information coming with the uh with the notification that is stepped so in that case we will perform the navigation navigator dot off and over here we have to specify the context and then we can say that push name and we can just pass route and we will do this in case when the route is not null because the route can be null okay so that's the one thing we have to do even though we don't have the context and we are going to fix it very soon another thing is uh when you will be showing the notification so you have to uh you have to have this uh the payload also uh in this notification because if you don't uh you don't specify the payload then obviously while when the user will tap on this notification you will get null route but when you will be showing well you'll be uh passing the notification payload while showing uh then obviously when the user will tap on that short notification then in that case you will be getting the um that route so you have to send it here in here before actually getting an on select uh notification so so there's a property payload which is the essential information you you want to pass with the notification and inside it we have data and then we have route so that's the payload we we want to send uh in the in the callback which is on select so that's great because we we are get this is the message that we are getting from firebase so we are getting the route information uh inside the data and we are just showing we are just passing it to the show so that when user taps on it that should be available in here but the now thing is we don't have the we don't have the context so what we can do in the initialize we can have the context okay so but the thing is uh yeah we have set up everything but the thing is uh we are we are initializing it at the very top so over here we don't have the context so we can make it uh we can make it a little below we can just do it before anything in the united state and over here we can pass the context so that all look good so we have everything now we have uh set up the on press uh in the case when the app is in foreground and receive some message because that's the case not handled by firebase so we have to handle it with the local notification service so let's close the application and let's run it again and this time okay we will uh we'll create another uh just uh see we can say foreground testing on tap and in this we can say should take to green screen it was green or red not sure sorry red yeah and that's all so we have to send the this message while the app is in foreground it's still in the compilation so once it is uh compiled and the app is running we will send this notification [Music] while the app will be in foreground we should be able to see the displayed notification by flutter local notification service and also uh when we will tap on the notification it take it it should take us to the relative route which it wasn't taking before because that was totally out of the context of firebase and it was totally handled by local notification service and the handler uh while on tab should be defined inside the local notification service which we just did so now this should work so what i'm gonna do the app is in foreground everything looks great we just we're just sending the notification and we should be able to see the notification um as a heads-up notification very soon one two three four five six sometime it takes uh yeah so now when i press on it this should take me this should take me to the green screen i think i did some mistake uh in in displaying the notification since i'm just receiving the same thing over here so maybe okay so i have given title in both of things well doesn't matter so if i tap on it it should take me to the to the red screen now and you can see it's taking me to the writer screen so this is it i think it's the longest video i've ever made so that's the most comprehensive video i i can bet because i have seen a lot of videos on uh on the notification and they have like a lot of information but uh still there are some missing information and another as i escorted uh at the very beginning of the video that i also have the video on this but it's not completed and also have the legacy code which i wanted to renew which i wanted to recreate for you so this is it that's the really something which i'm really feeling proud because i just completed this long video and there also two couple of things which i wanted to cover it's actually the token based notification and also the topic based notification so you can target the particular audience to which you want to send the notification but that's really simple thing that's uh something that you can really do and i just i'm just here to give you a little push and then you can really uh research on things and you can uh really learn by your own and that's how you become a good programmer you you become you become a good developer so this is it from this video if you like the video and you think that i really did a great job and yeah and i really did hard work so please support me by subscribing my channel and sharing my channel because i really need your support i'm not getting uh so much of subscribers the average is really below maybe i'm not making videos uh regularly but as i said i'll be like making videos regularly now so please give a big thumbs up and if you haven't subscribed the channel please subscribe the channel and share the videos with those who want to learn flutter with easy approach so thank you for watching

Channel: Easy Approach

Views: 31,828

Rating: 4.9416342 out of 5

Keywords: flutter, firebase, push notification, notification, notification in background, firebase cloud, messaging, firebase cloud messaging, notification in flutter, notification with fcm, null safety, push notification using firebase, push notification flutter, flutter tutorial, flutter app development, notification firebase flutter, flutter notification, flutter firebase, flutter local notifications, flutter local notification, firebase messaging flutter, flutter push notifications

Id: p7aIZ3aEi2w

Length: 83min 35sec (5015 seconds)

Published: Fri Jun 11 2021