Firebase Push Notification for Flutter | Flutter Push Notification with Firebase | Explained

hello everyone welcome to my channel and in this video we are going to learn about firebase push notification for flutter so as you can see in our application in the current application it's a very simple application where i have this center text which is waiting for notifications this is the single screen and every time we receive a notification we will print data from that notification over here that's all we will do in this application so as you can see in our application we only have two files one is main. and one is home page dot dot so in the main dot dot all we are doing is we are just calling this home page dot dot in home and in home page dot dot we the scaffold widget set with the app bar as you can see over here firebase notifications which i have set over here and then we have the center text that is waiting for notification it says and it's aligned to center for the screen and for the text as well right so before getting into the coding part uh so that we can receive the notifications let's let's understand how push notification for firebase work for android applications so in this video we will be focusing on android for ios i will be creating another video because it takes up a little bit more time than android and also you need to have your apple developer account set in order to receive push notification and ios devices so let's focus on android for this video so before getting into coding part let's look into how firebase push notification work for flutter so as you can see for push notification we have three states which in which we have to handle our push notification one is when app is in foreground means you're you are using the application it is in the foreground that is what is visible on your phone screen so that is when we call it foreground when app is in background like when you were using your application but you decided to look in some other application or you just minimized your application right so the application is running but is it is in background right it's not in the foreground it's not visible on the screen the in that scenario app is in background so we will see how to handle push notifications in that scenario and then the last one is when app is in terminated state right so app is in terminated state means if your phone is in the log or you have not used this application from long time right so the the os has decided to kill the application or you manually have killed the application so in that scenario the app is in terminated state and your phone is locked or maybe something else so in that scenario how we how we handle push notification right so these are the three scenarios with which we'll be doing all the testing so when app is in foreground we handle the push notification using this on message method which is given through our firebase messaging uh dependency so to implement push notification using firebase in flutter we need to have these three dependencies added to our flutter application one is firebase core that is for any firebase application you need to have it so that you can initialize your firebase another one is firebase messaging so all these methods you see over here on message on message opened app on background message on background message on initial message all these methods are from firebase messaging which basically handles the push notification from firebase and then the last one is firebase local notification which i will explain in a bit so as as i said for when app is in foreground we will receive the notification in this method that is called on message so we will call this method using this firebase messaging uh dependency and in this method we will receive any any message any notification uh sent through firebase push notification when app is in foreground now the other state is app is in background so when app is in background we will handle push notification using two methods one is on message opened app and another one is on background message so on background message is called as soon as the message is received so as soon as the message is received this on background message will be called and you will have some message some uh some data some message payload in with you in your code right so you can do whatever you want to do in that scenario with the message another way another thing is let's say the message has come and as the app is in background state so user clicks on the message so when user clicks on the message this method gets called that is on message opened app this gets called when user clicks on the notification so in the notification tray when user sees that there is a message from this application they will click on the message and then this method will be called so any handling related to that you can handle it in this method and then app terminated app terminated is the last uh scenario which we will handle right so that is there there are two methods through which we can handle the scenario one is bank on background message which we use in when app is in background as well and the other one is get initial message method so these two methods we use when app is in terminated state so the on background message will be called as soon as we receive the message and get initial message will be called when user clicks on the notification so when user clicks on the notification user lands on our application and in the application this method gets called get initial message you will have all the notification payload and you can do whatever you want to do with your notification right so we understood that we have three scenario foreground background and terminated and these are the methods through which we can handle on message for foreground uh on background message and on message open app for background and on background message and get initial message for app dominated state right now this local notification plugin that is the last dependency we have firebase local notification this gets used because uh when app is in foreground we do not receive any message in the tray or or as a heads-up message so when i say heads-up message i'm talking about the banner type of notification you get on top of the app right so which looks something like this right so that we do not get from firebase so to to get that we use this external library that is firebase local notification to get that message to get that banner on top of our our application so this will handle that uh using this we will get that proper heads-up message for our flutter application so that's all that is what i wanted to explain you before we get into the coding so let's let's get into it uh let's go to firebase first and create our application and setup it for our android application right so this is our firebase console console.firebase.google.com click on project right add new project and enter your project name so i'll say firebase so this is my project name and you cannot use these so let's let's not use it and i will give like uh capitals okay and then continue enable google analytics if you want and you if you want google google analytics for your project and then select an account we will select the default account and then create the project so our firebase application is ready we can click on this continue button now and it will take us to the dashboard screen and you can see all these services which is available from firebase for you for your application right so as you can see we have to add our application get started by adding firebase to your application so we will click on android and we have to enter our package name so to get the package name you have to go in over here in vs code go to android section in the app in src in the main we have androidmanifest.xml file so let's just copy this package name and we will paste it over here everything else is option so we will ignore all of these and click on register app and it will give you a config file to download which is a dot json file and we have to keep it inside app folder in the android folder so let's let's click on it and download it and we will drag it to our application and let's go to this app level folder and then drop it over here and you can see there is some brackets and number also so we have to remove it so remove that so that it is only google services.json and that should be good enough okay and now let's click on next and you have firebase sdk there are some steps you have to follow to in to set up the sdk right so what we need to do is go to project level build gradle so when we say project level let's let's close this app level file and we are in project level build cradle this is the project level build gradle and repository google we already have it dependencies as you can see we have these dependencies we don't have the google services so copy it and let's paste it over here and then this is also we have it here repository google again and now this is done and we have to go to app level build gradle there is a project level built gradle which is this and then this is the app level build gradle which is inside the app folder and in this uh if we go you can see apply plugin com.android.application i think we do have it over here so we don't have to add it uh we don't have this com.google.gms so let's let's add it into a new line and then in the dependencies we have to add these two dependencies which i don't think so we have it so just go to dependency folder and add these dependencies just after oh now we have all the dependencies added for our android application let's click on next and then continue to console so our firebase application for android is added as you can see this is our application bundle id which we can see over here the package id so that's how you integrate the firebase application to your flutter application and there is one problem that is min sdk version that is set to 16 but firebase only support minimum as i believe 19 or something but let's keep it 22 so that we don't get into any problem and that should be good enough for our application as well so this should be good now as i told you we have three dependencies we need to add in our pub spec yml to uh to receive the notification one is firebase score one is firebase messaging and one is firebase local notifications so let's add those so i already got these uh packages ready for me so i will just copy it from here and paste it after this cupertino right and let the flutter puppet get do its magic and you can also go to this dart packages and over here you can search for firebase core and it will give you the package and i think i have the latest one 1.10.6 and that is what we have over here so you can see then whatever is the latest for you you can get it from pub.dev get it for all these three the latest one and then use it in our application so let's close it i think our flutter pubget is done and as you can see we have this generated file from firebase which will do its magic and communicate between firebase uh cloud and our application so we don't have to worry about this thing so let's let's just close it so let's set up our firebase let's initialize firebase from main. so what we have to do is we have to call firebase dot initialize app and this is an asynchronous call so we will write sync and we will write a weight and let's close it with the semicolon and also we will have to write a flutter widget binding so widget flutter binding dot ensure initialized so this will make sure that our firebase is initialized before our app has run right so in the home page now that we have initialized our firebase now we can go ahead and call these methods these methods we can call to receive our notification in foreground in background and in terminated state so let's let's do it for foreground first so we will call these methods inside our in state in its state and inside over here we can say firebase messaging and then you see we have these two methods so we will call this on message and on this we have something called listen so this is what we'll do and inside we will handle our notification so this event will have uh our notification title notification body any data it has then it it will have everything so what we will do we have to update this text whenever we receive a notification right so let's let's make it uh let's make a variable for it so we'll say string notification [Music] message msglc and equals this meth this message which we were hardcoding so we will use this over here now let's place it over here and we can't use const because we are using this notification message okay and now we will use this notification message over here we will set it over here and we will say we will use our dollar sign curly braces event dot notification dot and i'll say let's print the title also the time and the notification comes which comes comes back that is of optional type so we have we can either uh force and wrap it or we can you know check whether it is null and then use it so the better option is you should check whether it's null or not and when when it is not now then only use this exclamatory mark mark to unwrap it uh otherwise if it is null then you will get into problem so because it is a sample application we'll just go ahead and do it because i know that it will always it will always have some value because i will only pass it let's let's print the title as well uh sorry the body as well and also i will say i am coming from for ground okay so it will say what what the title the body of the notification and then say that hey this message is coming from foreground so we will set it to notification message and also let's not forget that we have to set it in the set state otherwise our notification will not get updated so let's set up our firebase initial message as well otherwise it might create any problems so firebase messaging not not the on message we want initial instance instance instance dot i'm not sure why it's not giving me the auto connect okay get initial message this is the matter method we want and then uh so we in we use this on message we use the get initial message let's call this on uh on message open as well this on background message you cannot call it inside your class this is a global method so you have to call it outside your class so we will do it now but let's let's let's initialize all other methods so we called on message we called the get initial message for terminated state and let's call this on message open app so let's and this uh this terminated state also i i want to print uh that as well so let's let's do that as well so what we'll do then and then in this i don't want it to call any function i want to write over here itself and then the same thing i'll do over here in set state uh we can change it to event and this should be fine let's let's do quick fix and then i'll check okay we have to do an uncheck on event as well so that is fine we can do it uh but you should always do the null check first because i'm sure that i'll be sending some data that's why i have force unwrapped it so that is fine let's use our last method so on message opened app dot and this also has a listen method and then just same thing we will just copy and paste and this is not coming from foreground that is like terminated state and this is from background so every time we get notification we go to the these methods so this will be called when in terminated state terminated state and this will be called in the foreground state foreground state and this will the last one will be called in the background state and the last thing we have to set up this uh on background message so this is this is where we will receive our messages and on message open and get initial message that will be called when we will click on those messages right so let's let's set up that as well so that we will set up in our main. so in the main.dart what you have to do right after initializing our firebase and we will say firebase messaging dot on background on background message and then it takes a method right it takes a method which will be of future type right so we will create that method over here that's why i wanted to create my method over here so that it will be visible as soon as we see because we have to initialize it in our main main itself right main method itself so let's create our future void function right and we'll call it back background handler and this will have remote message message and this would be an sync s [Music] right and yeah so in this i can i can just i'll just print my message so we won't do anything over here and then i can use this method inside over here so we can just pass it pass it over there and that is it so that is how we set up all these four all these four methods actually basically four methods so one on message on message we set up in the home screen in the init state this is the on message which will be called when the application is in foreground state and that we we are just our we are just setting up our notification message similarly the background state we when user clicks on the message in the background state this will be called this method will be called and when user is in terminator state and they click on the method uh sorry the message the notification then they will come in this method okay so let's run our let's close the application and run it again and then test it from our firebase so let's run it okay so our application is running but i can see there is an exception and there is the null check operator in this in this terminated state because this event might be a null and we are setting it in the set state so let's just check it if we will do and if condition if event is not equals to null then only we will do all these things so let's keep it over here and now we can remove this as well and you can do a nest nested check and check it for notification as well because that would be better scenario to do and then all our issues should be resolved and the application should be running properly okay now there's no issues okay and if you can see it it says that flutter firebase messaging background services started that is because we have set up this uh on background message handler over here over here so that that is why it says that it it is now looking for any message even if it is in background state and yeah and then it is like an different isolate itself so that is why we have to set it up like this like outside any other class okay so now we can go ahead and test it so let's just go to our firebase and if you can see over here we have in the engage we have this cloud messaging so let's go to cloud messaging and send your first message so we will go right here and let's create our first message so we will say hello in the title and we will say in the text we will say how are you doing what are you doing and then question one question marks you can put some image as well and it will appear at this site and in the expanded view it will look like this so that is what we will not put any image we will just keep it simple and click on next and it will ask you to select the application this is the application select it click on next we'll say send it right now click on next no need to do anything over here uh you can send more details you can set more data over here we will be setting up channel as well so as of now we can just leave it and click on review and publish so it says campaign was successfully started and it's completed so in some time we should be able to get our first firebase notification over here and then this should get get updated so it takes some time it does take some time it doesn't come immediately for me it has taken like sometimes take two minutes sometimes take five minutes and yeah it depends and depends on the server right so let's wait for it so as you can see we have received our foreground notification it says hello how you doing i am coming from foreground not foreground there should be an e over here okay so okay so our foreground notification is working but as you could see we did not receive the notification in the notification tray or we did not get it even on the banner like like the heads-up notification right like we used to get but that's that's all right we can fix it we will fix it in using local notifications but let's let's just go ahead and test our background state as well so when i move to background if i move to background and go to my cloud messaging and let's click over here and duplicate the notification because we don't want to create the notifications from start again and then just click on next click on next and over here select now because we want to test the notification now itself and then next these are all optional so we can leave it review and publish so it is completed and we should get the background notification in some time so it takes some time let's clear this and wait for our background notification so that we can see all the messages in the console for background notification so let's wait for background notification on so we have received the notification as you can see it is written over here this is message from background and these so as i told you for background notification we get a message in the on background message method like the method which we called from main over here and we call this background notification handler right and over here we printed these right so this is what we are seeing over here this is a message from background hello how are you doing this is what we printed and we can see it so that's what i told you we first get the message in on on background message and then when we click on this message when we click on this message it will go to our on message opened app this block block of code right so we should be able to see i am coming from background with title and body so let's click it and you can see hello how you doing i am coming from background so that is also working so let's test the last state that is the terminated state so we will terminate the application we will just swipe it up and the application is not running running so we won't be able to see any logs over here but it will happen in the same way so it will first go to on background message uh there it will just print the message but we won't be able to see it so that's of no use for us but in many scenario if you want to do some background tasks you can start some background task from here and then when we click on the message in the terminated state it will open this get initial message and from there we will print i am coming from terminated state so notice that in all these scenario as of now we are only getting the message only getting the notification in this notification tray we are not getting our heads up notification or what what whatever you call it like the banner notification but that is all right we will fix it so first of all let's test it for our last state that is terminated state so we will go to our cloud messaging and we will again duplicate this notification click on next click on next over here select now click on next click on next and then click on review and publish so the campaign was successful and we should be able to receive our notification over here in some time so i don't know why it's some sometimes it says scheduled but as you can see we have already received the notification over here and when we click on this notification we should be able to see that i am coming from terminated states so that is working hello how are you doing i'm coming from terminated state so okay so we have tested all the three scenarios the app is app in foreground app and background and app in terminated state and we are getting our notifications but the only problem is we are not getting the heads-up notification the banner which we get on the top over here right so for that what we have to do is we have to set the local notification so we already have the package so let's let's just set it okay so to let's let's set up the local notification and do so let's create a new folder and we can say services and i will create a new file and i'll call it local notifications dot dot okay and then uh let's create a class and call it local noti [Music] vacation service that's all and what we will do we will first create our flutter local notification plugin instance right so we will create all the variable as static so that we can access it and from anywhere easily so flutter local notification plugin see it has come and we will create our variable so let's create our notification plugin variable and then we will just set it up so flutter or not filter flutter notification plugin initialize it and this should be it and then we will we will create a initialize method and we will initialize our uh local notification so uh we will create this also aesthetic void uh we'll just call it any sheer lies okay and we will call uh we will we will create an initialization settings so for that final any shealization settings and then initialization settings variable and then create initialization settings and we will so you can set it up for multiple uh you know all these platforms android ios linux mac os we will set it up for android because we are focusing on android in this one and then we'll say android see android initialization settings it's already showing us in the options right so let's just click it let's just click the list next one where it shows what we have to do and we have to give a default icon some icon through which it can you know test right so we can give our so this is android application right so in android we have our uh we have our uh ic underscore launcher we call it so that is what we will use it so in the resources if you see we will have these ic launcher right so this is what we will call it from here so i will i will take this one so i will call it add the rate min mac and slash ic underscore launcher so when when we will see the notification it will use this use this icon to show those notification that is all that is all we are doing right over here okay so once this is set up what we have to do we use this notification plugins and then say initialize and we can give this initialization settings which we created in this we have to pass the initialization settings so that's what we passed and then uh so when you click on that notification right what happens so to handle that in this method itself we have on select notification so on select notification it will give you the notification string so whatever is the payload it will return so i'll just say payload right reload and let it be it returns it in the in the optional format so let's keep it like that and we will have our and we will just print it over here we won't do anything we will just print it if there is anything so if payload is there it will print otherwise it will say null so the payload actually it comes it from here like when we clicked uh if you click it still shows schedule so if you just refresh the page it will say so if i just duplicate it and i can show you that you can set additional options so here this is what it will come as payload right okay so this is done so this was for the initialization right so to show the notification on the foreground when when the application is in foreground and we are not seeing uh the uh heads-up notification right to do so to get that only to show it on the foreground what we will do we'll write another method to show the notification on the foreground state so let's say static void and we will call it show for show notification looty vacation on 4 ground g-r-o-u-n-d okay and we will we will receive remote message remote message and we'll call it message once we will receive the foreground notification we will call this function and we'll pass this message and then we will show it in our uh on in our application so to do so we have we will use this notification plugin dot show this method and we will need id and for this message we will use message.notification.com title right and we have to force and wrap it and the same thing over here and we will just call our body over here and for this id what we will do we will use our date time dot now because i mean it has to be a a unique number so that's what we need so we will just use datetime.now i think i have i have this capital daytime.now and we need an integer so we will just use this microseconds right so that should be fine and then this notification details has to be defined so we will say notification notification note the vacation details right and then in this uh we have we have to say which type of notification we are sending so we are sending android notification right and then android android notification details we will select this and we will pass our data so uh let's just let's just put it in outside so that we can see properly let's take it from here and create a new variable over here so we will call it final modification details right and then just call it and over here we have to pass some uh some details like uh like the notification details and we will say um so if i just use like this yeah see over here it will tell you what and all it requires it requires a channel id and channel name yeah so channel id is something we have to define so if you see over here we are getting this message also missing default notification channel metadata in android manifest default value will be used so this issue is coming because we are not specifying a channel so that has to be specified so that is what we will use over here android notification channel so this has to be some channel id so we can we can use any unique string so what i will do i will use our android uh this package name right so this is a package name so i can use this as a notification channel id or you can use any unique number so i'll just use this channel id and channel name i'll just say my application name is the channel name so that should be fine we can give some more details like what is the importance of this uh notification so something like this importance and i can say it has the max important so just say importance dot max so that it always takes it on priority and we have also priority so we can say priority dot high priority will say high priority okay and then just give it a close it i think i have extra okay now it should be fine okay and now i can use this notification details uh over here yes and close this as well so as soon as i save it and all the issues are gone the this is uh automatically formatted okay great so our local notification settings are done so i think i named it very wrong i named it location notification so let's just correct it because we don't want to call it location notification it is local notification and yeah over here also local notification i'm not sure why i wrote location notifications so that's my fault okay so this is this is ready now i can use it in my home page and i can call it over here in the init state before calling anything i'll just initialize the local notification local notification service and and we had created everything static so i can just initialize it like this and then in the foreground state after getting the notification first thing i will say is i will say once once we have the load notification i'll say local notification service dot show notification on foreground and this is our message that's it and we can do it before setting the state okay so now this should be working so we will test our foreground notification first so let's run the application okay the app is running now but it's showing us an error it says that make sure this file is available i think i did a spelling mistake again so i'll go here and it's not minimap it just make see over here it's m-i-p-m-a-p so i'm an ios developer so i'm not much aware of these things so apologies for that let's re-run the application and it should be fine you should not get any issues now okay now that's fine let's go to our cloud messaging and i don't want here let's go back and we will duplicate our notification and make sure to give our channel oh okay one more thing i forgot is we were getting one issue right that in android manifest we have to set the channel as well there was one issue right so uh like we have set over here this channel in our service local notification service this channel we have set right so for this we have to do one more thing we have this code this is this metadata so in this we have to set the channel id so go to android manifest in the metadata you see there are intent and metadata so just below this one we will add one more metadata and over here you have to give your channel id so so the channel id what we selected was our uh package name itself right so we will just use that to remove this and use this so this so the this is how it it notifies it it identifies that this is the channel id for which we have to send the notification so let's let's just rerun the application let's not just refresh it let's read on it because this is a major change in the notification so let's pre-run it okay so the app is running now we don't have any more issues and now we can go ahead and send the notification so click on next and scheduling is now just wanted to make sure okay additional option we have to specify our channel now so whatever channel you have given over here so let's go and copy this package name give it give a channel okay and key value you can just give like message and value something right something will be coming okay i want to enable the sound and review and publish so now our app is in foreground and we have sent the notification now we can see the notification in as the like the heads-up notification or as the banner right so let's clear this and wait for the notification to come okay now you can see that hello how you doing that is coming as the banner right and we have this text updated as well so now our heads up notification is also coming and we can see it see that in our tray as well right so when we click it it it does the same thing so our foreground notification is working now we can go to background go to background and let's do this again duplicate notification click on next next say now next next uh this is fine we can just send publish and we should be able to get the notification [Music] get some data over here as well so clear it and wait for the notification okay so our hello how are you doing in the background state it is coming and you can see it say this is message from background and we are able to see this what we printed in the main dot dot this message right so close it okay and then when we click on it it should go as it was working earlier it should go to background state message this one and we should be able to say it so let's click on it and i'm i'm coming from background so this is also working now let's terminate the application and we should be able to see the heads-up notification as we were able to see for foreground and background state so let's test it for terminate state as well so duplicate notification click on next next say now next next and then yeah this is set so this message which we are sending right this also you can get from your remote message the event which you are getting right so from that you can get this also so i'll show you how to do that so let's just first test it in the terminated state and because the application is terminated we won't be able to see any any uh locks but we should be able to see the notification over here in our emulator okay so we got the notification uh and our app is in terminator state as you can see and we got the uh heads-up uh notification and when we click on it we should be able to see that i'm coming from terminated state okay so i'm coming from terminated states so it is working because we have tested all the cases all the scenarios i just wanted to show you one more thing is in the notifications right in the any notification as you could see i we were adding a payload so this is this is called payload message something so you can send many many payload many key value over here and how we access it over here is uh let's say over here when you get this remote message so in this remote message you will like that you you are accessing notification dot body you can access something called even dot data so in this data you can just say your payload name your key value right so this is message so with this you will get the message right so this is what you have to do and we we did not do one thing in our local notification right the message the payload over here which we are printing it won't be able to print it because we are not passing it over here so in this we have to pass the payload as well so you can say payload and then over here i can say uh this message right message dot data and then i can enter my key value so this is my key value right something uh sorry this message is my key value so i will put it over here and then when you run the application and when when the application is in foreground so this show method we are only calling it when the application isn't foreground if you remember this so when application is in foreground state then only we are calling it so this is when uh this is when it will send the payload and on click of this payload we are just printing it right you can you can go to new screen and you can do many other things over here but we are just printing it so we can test it let's run our application and test it in the foreground right so let's run it okay so our app is running now and what we can do we will leave it in the foreground and go over here and let's not send the same notification let's duplicate it duplicate the notification and click on next i will do now next next and over here message i will say i am the payload okay so we can see it and click on review and publish and if you go here yeah so as soon as the notification comes we have we will have to click on it then only we will be able to get this print so let's wait for the notification and be attentive and as soon as the notification comes i will click on it so this is only for the foreground case because in the background and in the terminated state we already have the uh when we get the notification when we click on it we already have the message methods to handle it right so let's wait for it okay so the notification has come let's click on it click okay i am the payload see so this is what we received uh when we when we were showing we send the payload we received it so basically we received it from here from home page from foreground and then we send the payload to our show notification method which we have only created in our notification local dart notification.file right and then when on click of it while the initializing the notification local notification we had set up over here so we could see this message so instead of showing it in the you know console you can do so many things you can go to new screen or whatever whatever is the requirement of your project so this is it for this video i think we have covered all the things which are required to run push notification in android phone if you run into any issue because while doing this i ran into many issues so if you run into any issue just let me know in the comment section and i'll try to help you out and do let me know how you like the video and let me know if you have any topic any suggestion for my next video thank you so much for watching bye

Channel: Harsivo Edu

Views: 16,246

Keywords: flutter, firebase, firebase push notification flutter, Firebase Push Notification for Flutter, Flutter Push Notification with Firebase, firebase push notification android, push notifications android, push notification flutter, push notifications in flutter, fcm in flutter, FCM, flutter cloud messaging, firebase cloud messaging

Id: m2zuJw5c7bw

Length: 52min 11sec (3131 seconds)

Published: Thu Dec 23 2021