Complete Guide Flutter Push Notifications with Firebase Cloud Messaging

hello everyone assalamualaikum here we'll see  how to use Firebase messaging and flutter local   notification together and at the same time we'll  see how to send messages to a specific device   specific user and we'll see how to redirect them  to a new route at the same time we'll also work   with notification sound and icon and a lot of  things but now what we'll do we'll go ahead and   click on this button over here and we see that  we have a new body new title message I will click   on them and we redirect over here so this is user  one and over here we'll also see how to work with   another user so click on this and it redirects us  to another page where it says that this is a title   and of course this is the messages that  I've tried earlier and they're now coming   back so it doesn't really matter  so let's go ahead and get started   so before we get started let's go ahead and  install this plugins one by one Firebase   messaging and for fire is local notifications  and we also need HTTP package because we are   going to post we are going to create a post  method to submit our user token to the server   and after that you should also make sure that  you have created a Firebase project which I'm   not going to cover over here I'll have other  tutorials you can check with all right so after   that we have this main method and now we'll go  ahead and create my app so these are my app class now we need to go ahead and create this  main screen class so we'll create a new   fold file over so we'll create a  new file over here we'll call it so here we'll go ahead and create a stateful class and we'll call it main screen now we'll go ahead and create three text  controllers variable because in our app we   want to type in and post message to the Cloud  Server now here is our updated build function   where we have this careful inside that we have  the center column and as you can see we have   this three text field for grabbing username title  body and then we have this gesture detector and we   trim the username and we keep text and body and  title and then we keep title and body and after   that we have a simple container and over here we  have a button that we created a custom button to   now we'll go ahead and run the app and  we'll see how it looks like let's import it let's run our app so here is our app ready and  this is the basic UI and the theme we want to   do is that we want to be able to click on this  and submit username body and the title but to   be able to do that first we need to connect our  app with the Firebase now for this reason we'll   come inside this section inside this Main and  then we'll initialize Firebase and that's how   we are going to initialize Firebase calling  the method initialize app and at the same   time there's Firebase messaging file now  over here we need to import it as a sync   all right now with this our app would be connected  and if we have any messages background messages   we'll get through because of this one and  with this our app would be connected and   initialized with Firebase now how do we verify  that our app is connected with Firebase now   to be able to do that first over here inside  this main.dart main screen dot Dart over here   we'll create a method which is called init state  so inside this init State method will have three   sections one is request permission this is for  notification and then we'll connect with the   Firebase and then we'll load other information as  we need so first we'll go ahead and create this   method and this method would request permission  from user device right over here we'll create   the method and this is our method let's go  ahead and import some of the dependencies so now with this we get first a Firebase messaging  object and then we request permission for alert   announcement badge and lots of other things  including the sound and over here if we get   different kind of authorization from the  user then we just go ahead and print them   so now this is the time we go ahead and launch  our app one more time and if we do get permission   from user we'll see that this has been printed  before we go ahead and restart our app we need to   uncomment this here and then we'll restart our app  one more time and we'll see what has been printed   there and let's see over here it says that user  permission has been granted now on Android device   with flutter sometimes it's cranky it doesn't  always show up the permission but as we see that   it did so if you want to get device permission  or permission from your device from the user then   you need to go ahead and implement this method  and then you can print the related information   so with this our first step has been done now what  is the second step now second step as we connect   with our app with the Firebase we want to get a  token for our device so we are talking about token   for our device so that's why we need a method  that is called get token so now we'll go ahead and   Implement here we have this method which is called  get token so what it will do it will connect with   the Firebase messaging so it will connect with  Firebase and get token for this certain device   for this Android device it could be for your iOS  device as well and of course over here if we get   the token we wait for the token and if we get it  we save it to a variable and then we trigger a set   State function which means that we can redraw or  update our UI but of course this variable is not   defined so go ahead and Define it at the top over  here so for now we initialize it to empty string   and we see that our error has been gone now this  is the time if we have a token which means that   actually our device has been connected with  the Firebase backend or Firebase console now   we can verify that if we get a message if we  get a token okay so if we get connected to the   Firebase backend then we'll be able to get token  for this device and if we can do that then we'll   be able to print it okay so before we even get  notification our device gets connected with the   Firebase console so let's go ahead and run it  and we'll check what happens over here now we   see that it says that user permission has been  granted but of course we didn't uncomment it   so let's go ahead and run it one more time and  over here we see that we have a token and this   is the device token not any kind of user token  you have to know this is the hardware device   the device we are talking about but of course  in this case this is an emulator so if you want   to get message from Firebase and do fancy stuff  you have to get your device token after getting   the token now we need to save it so to be able  to save it let's go ahead and create a method   so now here we are going to have this method  and of course we need to include this Library   firestore Firebase firestore and this is a simple  method so what it does it takes the token while   now we have to send it from here so this is the  method save token so what happens over here first   we send the token and then we create a collection  if the collection doesn't exist then we'll create   it the same for documents if the document  user one it's a username if it doesn't exist   it will create one if it exists it'll ignore so  whether there exists or not it will go ahead and   save the token in a field called token so you  can name it anything of course all these things   you can name anything you want the idea is if  they don't exist they'll go ahead and create   and then we'll set it now let's how to go ahead  and verify it so over here we will still arrive   but of course we see we should see that this is  a token all right now let's go to the backend   Firebase console and see whether this collection  exist or not there's a user exit let's go ahead   and check it over here all right but one thing  though before we go ahead and do that you need   to create files to database okay I have already  created one okay otherwise you won't be able to   have this thing and at the same time uh you  need to set up the rules the rules should be   set up as a true in default first time  everything is created this section over   here the rules is false so you just set it to  true and everything else keep the same and then   save it anyway so now come to this file store  database now as you see we have this user tokens   there's a collection name and user and this is the  token that has been created and saved later on now   definitely we can go ahead and create a different  user if you want let's go ahead and do that all right and now we'll see that uh   on our back end if we refresh the data we  have two users user two user one of course   in this case we are saving the same token  now this is device token right because we   are using the same emulator now for user 2 if  you used a different emulator you'll find that um in this case they have a different user  token uh sorry device token now to be able   to do that what it will do we'll come over  here and I'm going to launch a new emulator   and we'll see how it works okay all right so right  now we have two emulators and later one and two   all right so this is emulator for one  or two the second one some of the data   from earlier one but we'll restart we'll  choose our second one and restart everything   and we'll see how it goes and we'll see  that for that device we have different   token for the device itself now of course this has  been restarted over here and let's see if we get a   token or not over here yes we did get a token now  of course this token is different than the first   one let's go ahead and check it on our back end  and let's check on this user token collection and   then this one you see it starts with Co but user 2  over here eky so definitely we got different user   token based on sorry different device token based  on different devices pitiful so in future if you   have a user and they want to of course the users  each of them will have different devices and you   want to save them in a different document or in in  the database column in a different row but you get   the idea all right so now what you want to do so  we are successfully get the permission and then   we get the device token and saved it and after  that actually we want to do some initializations   for flutter local plugins which we haven't  started yet now we'll go ahead and do that   now to be able to do that uh  what I'm going to do I'm going to   create a new method over here and I'll call it  init info all right and inside this we are going   to initialize our flutter local notification  plugin so inside this init info method we have   this one where we initialize our Android settings  and iOS settings so this is for Android settings   and this is for iOS settings those two settings go  together combine we create a new settings object   and then we call this inside this initialize  method of flutter local notification plugin so   it takes the overall object the total object and  then we also have a callback function its name is   on select notification and this is the function  now this one actually is for sending payload or   information and what does it mean it means that  if you want to click on a notification and you   want it to take you to a different page then you  should have this one and of course this is special   works when your app is on the foreground for  background we'll have a different method but this   works especially when app is on the foreground  and you click on the notification and you take   it to a different page I mean the notification  information which also means that you redirect   to a different page okay direct user to a new  screen based on your information on click event   now at the same time this object has been  initialized at the top which is this one over here   okay so you need to go ahead and initialize and  make sure that everything gets imported now one   thing you might ask what is this well now this one  is actually inside this folder now this has been   done to show the icon as the notification arrives  on your device and it should be inside this folder   now Min map IC launcher PNG okay now if you want  to have your Custom Image you can just put inside   this and write to the image name but that should  be only PNG image with transparent background and   over here you can see the size and channel number  or code as well so it should be a good reference   so you should have transparent image inside  this and you are good to go and I think you   can pretty much put actually any folder then  in that case you Dimension the folder name   so this is for your custom notification icon  so let's so that's for your custom notification   icon but anyway now with this uh the basic  initialization has been done but of course this is   still not help us to get any kind of notification  yet now we'll go ahead and Implement our   next method inside this init info method okay now  this is Firebase dot on message Dot listen now   this is very important so with this you'd be able  to listen to any kind of messages that's coming   from Firebase so that's why you just have to go  ahead and implement the body of this one because   for now it's pretty empty once again if you want  to listen to messages from Firebase you need to   go ahead and implement this one and this gives  you an object of remote message which is called   message actually you can call it anything you want  it doesn't really matter we print a statement at   the same time while if we do have uh title and  body we try to print them okay and at the same   time we are going to go ahead and call this one  now this is coming from notification notification   plugin itself so you don't need to worry about it  just over here you do some settings like what can   the message to show what kind of tax information  and the title things like that okay so it's basic   settings go ahead and call it and then we need to  do some then we need to do some platform specific   settings now in this case our settings is for  Android this is very important you have to do   it and over here this is your channel ID and this  is your channel name and this is also important   set it to Max or high most probably actually  we want to set it to high and which is better   and I think that for Android it should be  high as well and for now our play sound is   false and we are going to use uh actually we  can go ahead and do it like this anyway so now   it will play sound on our device as notification  arrives and after that we are going to send this   object to another function which is called  notification details but of course over here   we can also send for iOS okay we are good to go  just like this and lets you put a const over here   and so to be able to really show the message  on device we need to call this show method   now this show method is coming from notification  plugins itself and over here we show the message   and then we also over here we show the title  then the body now these are all coming from   this message object and at the same time we send  platform specific objects which is needed okay now   over here if we want to navigate to a different  page then we need to go ahead and mention the   payload time okay so instead of title actually we  could do it with body all right so now with this   let's see how things are working so so let's go  ahead and restart everything and see how things   are going and we still get our device token  now this is what we have and let's see if we   can listen to messages from Firebase or not okay  uh we'll try about that one now to be able to do   that first we'll check and go to Firebase message  first we'll go to fire is console so now we'll see   if we can send messages from Firebase console or  not and from App itself we'll check it later now   to be able to send messages from Firebase itself  I think we need to select our project settings   and then first you need to come to this Cloud  messaging option over here and you should have   Cloud messaging API enabled and over here you  get a server token a server key so to be able   to send messages from Firebase console you need  server key and a device key actually both of them and then let's click on this one here  it says Cloud messaging or messaging then click on this create your first   campaign and let's go ahead and create it now  over here as you see that we do have title   and a text okay so now we'll go ahead and take  this one title but before that actually we need to   so go ahead and do this one title now what  is the title you can say this is a test   this is a test body now here now you can select  this one now here it is asking your device token   now we already have the device token  so we'll go ahead and copy it from here   and then we'll put it here and then we'll  click on this one and then we'll select test   then we'll go ahead and do next  and over here we will select our   app bundle name or package name because this  is Android device if you're doing it on iOS   you should select iOS bundle name and then do this  one and then click on this and review and publish   okay and now let's see how  things are working over here   well it did say that it's successfully sent now  we don't have any messages yet over here okay I   think uh we are missing one thing here we are not  calling this init info so that's why nothing is   being triggered actually and sorry about that one  okay no let's go ahead and check it one more time   okay and we'll send a new message from here  we'll select this and this time we'll just select   like this test info and okay we'll select this  test and go ahead and select our app over here   and next review publish okay and we'll come over  here and check we do see that it has been received   congratulations okay because this is the method  that's coming from here okay as you see our print   method on message and this is test and test info  okay which is our title and body the one we just   tried okay now one more thing we would see and  over here we also see that this is what we just   tried and beautiful so it means it's already  working so we are able to get the notification   from the Firebase and we are also able to show it  okay now do remember here two things are happening   we are listening to the messages from Firebase and  after that uh well based on this we are listening   to the messages from the Firebase and we did all  this thing now all of them just because we want   to show the notification on the phone itself  okay so yeah so this is actually pretty much   all about local notification plugin now flutter  Firebase itself ends over here okay after that   it has nothing to do with Firebase itself and all  these things we do just to show the information   over here okay so there are more messages  that's being arrived because from console   it is sometimes a little slow okay and you  say it updated over here that's beautiful now   that was about when your app is on foreground  okay now what about your app is on background   now if your app is on background we have  to use a different method now for that one   we need to come to our main.dart over here  and at the top we have to declare a Handler   or a callback function which is called Firebase  messaging background Handler actually you can   call it anything it doesn't really matter and we  have to pass the remote object and then we need   to call it from here right after this actually we  are okay we don't need this one we already have it   so right after this we are calling this on  background message Handler and we are passing the   Callback function that we created so it listens  for background message and if there is one then it   pops up okay with message ID or whatever you want  any kind of object even our title and body you can   print over here okay now uh what we'll do we'll  go ahead and put the app like this okay so this   is pretty much in background right now okay and  uh let's clear all of that okay and we'll see that   whether we see any notification over here or not  so let's come over here and try a new campaign   new test and over here we'll call it new body  and so this is very device specific so this is   how you are able to send to a certain device  because this is how you choose your because   because here we are choosing our device token so  this becomes very user specific because each user   has one device and that device has a unique  token so when you select this one it takes   this to it takes this to that device it sends the  messages to the device okay all right so now we'll   click here next this one and let's preview  and let's publish okay and it says it was   saved successfully and we do see that over here  we have an icon and at the same time all right   so now this time we are going to close this  app like this and let's remove everything okay and we'll try it one more  time let's do it new test one   test 41 select it let's click on this  click on the select your app next next publish all right let's see what do we have here and we do see that it's already working so yeah but even though I was hoping to see this  but yeah I'm gonna shoot whites not printing   but yeah but our app is on the background we see  that our messages arrived so just go ahead and   do that let me restarting could work but anyway  so you get the idea that how to work with this   background message so to be able to work with this  background messages you have to have this one as   well as this one available in your app okay  now so far everything has been going smoothly   now what about sending the information  from the device itself and notification   okay because everything was great so far now  to be able to do that we need to come over here   and let's collapse this method which we don't  need anymore uh let's uh collapse over here   and we are great and now inside this over here  inside the gesture detector we want to be able   to click on something and trigger an event and  that event will get device token and then send   notification to this or send actually post  information to virus console and a Firebase   console will send message to our device so  now here we have added a conditional statement   we check the username okay now username we need  to type in over here and if it is not empty   uh then we'll go ahead and based on that user  device based on that username we get information   so from the document because each document is  a username so whatever the name we are going   to type in over here so that name would be sent  to Firebase console and based on that actually   this is also like a query and you get information  and as you do that if it exists it will give you   information our information it will give you  a token field the field that we created early   so this is a token field okay that means  based on filled we get this token our device   token then we save it to a variable okay now of  course this is inside this gesture detector we   have seen inside on tap event now if we get this  device token actually we can go ahead and send   a message so to be able to send the message  we need the token title text and body text   these are coming from here and the exactly same  as Firebase console because remember in Firebase   console each time when we create a new campaign  over here we are doing our title text and body   text as well as as we click on this it pops up a  new uh the dialog box where we have to type in our   type in our or where we have to type in our  device token so now the exact same thing we are   going to do over here okay now let's go ahead  and create a new method which is called send   push message you know we'll come at the top over  here and the method will be created inside this and make sure we import the  HTTP packages at the top okay and we also need this one and we  should be good to go and what else let's see now here this is the method  that we want to talk about now over here actually we are since we want  to post to the console Firebase console on the   click button so that's why we have this HTTP post  method over here as you can see so we are sending   this to the URI so this is very important make  sure you type it right and header types over here   content type and authorization now what is this  authorization actually this is your server key the   server key we have seen early okay so this is what  we need to send just go ahead and copy that and   it's pretty long I guess and at the same time make  sure that you write it right after key equal once   again where to get the server key to be able to  get the server key you need to come over here and okay well you do click on  your device over here and   Cloud messaging so this would be your server key and then we need to send a body okay now body  should have a few sections over here now body   inside body is wrapped as Json as you can  see we have this two curly brackets over here   and we have this data and notification   so you may wonder why because in general a lot of  time you'll just see it works with notification   you don't need to have data now if you don't  have data it will not work as you click on the   notification and go to a new page if you just want  to Simply view a notification at the top then you   don't need this one but if you want to click  on that you want to go to a new page you need   to implement this data section otherwise it just  won't work okay at least that was my experience   so go ahead and do that and yeah that's all  and we have uh we try to catch error if we have   error or not so the idea is we are trying to post  information to Firebase console using this URI we   mentioned the header type with this authorization  key which is server key and then we have this body   section over here and now inside this body WE Post  information as Json so we have two sections which   is data for clicking on the notification and  go to a new page at the same time we carry this   information which is also called payload actually  and over here we have this channel name Channel ID   things like that but this name is actually random  it doesn't really matter you can pick anything   but before we go ahead and work more I want to  tell you one thing uh let's go ahead and check   our Android manifest because if this setting  is wrong a lot of time it won't work as well   okay so a few things are important uh  over here you should have your metadata   inside this activity tag so this is the metadata  which talks about virus default Channel ID   and then if you want to click on a notification  you also have this intent filter and as well as   this intent filter okay so it should  work now this again ID should be same   across everywhere but you can change it if  you change it here I would suggest change   here in other places where you made this name  otherwise you might get error or it won't work all right so now this is the method that we want  to call and where do you want to call it from we   want to call it inside this gesture detector over  here and as we click on this it'll send title text   in body text along with our token and this is how  actually you send notification to a specific user   okay so to be able to do that we are getting all  this user information actually we get user device   token and then we save it and we pass it down  so we pass it down to this method okay great now   we'll restart our app and uh now over here we'll  take a look so first we know that we have a user   okay user one close the username and then we'll  say title and then we'll say body now let's see   if we work well or not okay sorry it was still  being built okay so we'll try it one more time so there's a user one uh the title and this is  a body let's click on this and we see it arrived   beautiful so it means that now we are able to  send notification to a specific user to our device   now to be able to do that what we were doing  over here we are getting the user device token   from Firebase okay using this one we are passing  this as a variable now to a specific user the user   token we are getting it as a variable we now to be  able to do that what we are doing here inside this   gesture detector we have the username and  based on that user we get information and   we check for a token the token we have created  in the back end and then we send the message   we call the send push message which is this one  and inside this we create a city post method and   we have this URI and at the same time we have  this headers and inside the headers we have this   content type and as well as the authorization  and then we have this body over here now inside   this body we have information as a Json and we  have priority high and data and notification   okay and based on this we can get we can send  message to a specific user right now how about   the second user remember we had a second  user so we'll launch our emulator and that   emulator will have a different user token or  device token and then now we'll try to send to   message to that particular device or particular  user let's go ahead and wait for this   and it's being installed we are over here  okay and I think this username was user two   okay title two here we'll say body two  now this will help us to prove that we   are sending specific message to specific  user okay let's go ahead and click on okay we need to allow this now  we'll click on this user two total two body two let's click on  this and beautiful it just works okay   and over here at the same time we'll  make a little change user one body one   you see the messages are so specific  so that's how it works and it's awesome   okay great so what is the next thing you want to  do the next thing we want to be able to click on   there's a message and go to a new page well not  that product actually is pretty easy not that   difficult not to be able to work with this we  need to come over here uh this method get info   and inside this we remember we have this  select notification okay now over here   actually if payload is not empty we want  to redirect the user to a new page and now   to be able to do that over here inside  this we're going to create a new screen so we'll say new screen so this is a new screen or new page   and all we need to do we want to send this string  or payload over here as you can see and we'll just   simply show it over here now we need to go ahead  and call it where to call it we call it from here   now to be able to do that we need to use material  route so here we are trying to push a new page to   the stack and here we are using navigator.push  and then material page route and over here   we get this payload and convert it to string  foreign now once again one thing to be able to   really work with this payload on click method you  definitely work on this send push message this one this is quite important that's why you will  see body title body title they're exactly the   same but for payload you want to go to a new  page you have to have data if you don't have   this data section it will not redirect you to a  new page at the same time you see that here it   says flutter notification click okay so you you  need all combined together then it would work   with this we just see notification with this  we were able to redirect user to a new page   all right so anyway we'll go ahead and restart  our one of the simulators so let's restart our   emulator which is this one and now let's  go ahead and select the user user one   Title One and body one so let's click  on this and we see we have this let's   tap on this and it takes us to a new page  beautiful it's awesome it's just awesome   now let's try it one more time I would say this  is a title and over here we'll do this is body   let's click on this let's click on this here  we are so we are just passing the title for   now you can also pass the body or the whole  information but it makes sense all right now   what about the sound I was talking about the  notification sound now unfortunately on some   emulator the sound doesn't work but it works on  real device which I have tested and let's see   a few things you need to definitely  take care as you work on the sound and let me show you where to take here the  channel name is quite important okay so first   time you create a channel name sound didn't  work go ahead and change the channel name or   sorry the channel ID you should you have to have  unique Channel ID okay all right and if you want   to have this custom sound so you can go ahead  and have this one okay uh well this is called   raw resource Android notification sound now  inside this you need to pass your notification   sound notification uh media like for example  an MP3 now in general it should be inside this main press okay now what is here  happening that in general there   should be a new folder that's called raw  so let's go ahead and create a new folder and inside this new folder actually you should  keep your mp3 and which I have done before I'm   not going to do it now and if you do that it'll  just work okay so create a new folder raw and   inside this whatever your mp3 name is the media  name is just grab that name and put it over here   this should be exact name and it should work the  only thing if it didn't work maybe your mp3 has a   problem or the channel ID was not unique okay now  this everything works pretty much well on Android   device so that the problem happens really with  iOS because iOS to get notification you have to   have a real device simulator it doesn't work in  that case with along with this code you have to   combine some of the settings which I have created  before another tutorial go ahead and check that   and it should work if it doesn't work uh comment  in the section comment section and I'll try to   reply thank you so much so now what we'll do  we'll go ahead and click on this button over here   and we see that we have a new body new title  message I will click on them and we redirect   over here so this is user one and over here  we'll also see how to work with another user   so click on this and it redirects us to  another page where it says that this is a title   and of course this is the message that  I've tried earlier and they're now coming   back so it doesn't really matter  so let's go ahead and get started

Channel: dbestech

Views: 51,190

Keywords: firebase messaging and local notification, firebase cloud messaging, flutter fcm, flutter fcm ios, flutter fcm push notification, flutter get device token, flutter android and ios firebase notification, push notification, flutter local notifications, flutter push notifications firebase, flutter tutorials 2022, flutter push notifications with firebase cloud messaging, Flutter notification when app is open

Id: AUU6gbDni4Q

Length: 43min 51sec (2631 seconds)

Published: Sat Sep 17 2022