How to show push notification in flutter web | Flutter web | Firebase Push notification

hello everyone welcome back to this channel once again I have brought another video of flutter web series in this video I'll be talking about how to implement push notifications in flutter web in the upcoming videos I'll create content for post notifications in mobile apps as well so we will start this post notification implementation in flutter wave fast followed by the mobile app we will follow these steps to implement post notification in flutter web before that if you are new to my YouTube channel then you can consider subscribing you can share this content with your friends and colleagues and also don't forget to press the Bell icon so that you should not miss any of my flutter web series or flutter app tutorial so let's begin these are the steps that we have to follow so let's start our coding without further delay first of all you have to do a Firebase process setup I have already done it and this has been used in my last videos as well so you you'll not have any problem if you have been following my videos if you haven't then you can check out my other videos Link in the description available so that you can come to this step later let me show you what I have done already in this flutter tutorial you have to click on this add and you have to add a project with web and if you add this project as a web you will get one this information which will be required later stage like this is the require this is the information will be needing on the letter stage while creating the file called 5S messaging SW dot JS file these contents are required I'll just type flutter push notifications and come back to the second uh link here you can see set up a 5S Cloud messaging why I am showing you is that if you go and read the official documents you can trust other video content creator or other tutor who is following or who is reading the official Doc and trying to help you in video content format so that you should not have any doubt that you are not getting the wrong information from anywhere else so if you come down if you click on this receive message and if you come down you'll get section where the web implementation will be available here if you read all the things like it says that we have we have to create a file called Firebase messaging SW dot JS and put this content in the file first of all we will go to our web directory and we'll create a Firebase messaging this file you can just copy it and let me go to my directory and web expand it and create a file the same name that we just saw on the Firebase documentation and let's go back and copy this content copy as it is and I'll show you how to get this value from our virus project setting uh then I'll go to our 5S project setting and I'll copy these things the same thing we have copied from there and I'll just create a constant here already constant is available right if you compare this properties like API keys there or dominance their project ID storage pocket message message engine sender ID app ID measurement ID all the properties are same right so what we will do will just give this Json constant to our Firebase initialization of we'll remove this one because the same property we have created on the above line so we'll just pass it like this and here it is one method has already been implemented on background message it will print the message on our concern we'll check it later now I am going to save this file as of now two steps we have covered so far one is 5X process setup which you might have already done I assume that and the second step is creating this Firebase messaging SW dot JS file and the third step is to add a dependency in our obstacle.yml file with that dependency we will get few methods to implement in our manual dot file and the dependency is just visit this pop dot Tab and type 5S messaging this one and go to this first one go to installation section just scroll down copy this one Firebase messaging 14.0.3 and I'll go to my prospect.yml file and below this or anywhere you can just test it and save it now it is getting my package 5S messaging with the help of command flutter pop get now it completed successfully with the exit code 0 code 0 is the success message and once you do that first you close this app with the best Ctrl C and type Y and reason because sometimes the 5S package dependencies are not loaded properly to get the methods available inside those packages you need to restart your upper you just close the app and reopen it and just relearning the app once again so that we should get our package dependencies method let me go to my main method here this section is that we have already covered in my previous videos we are just initializing our app to read or to do some operations related to 5 storage and 5s now what we are going to do is that in our main method instead we'll we'll create a method or will override a method of the state of a wizard we have another method called init state this is the init State inside this instead we will try to show the push notification if we get or if you send from our 5S console or any kind of operations that we do in our mobile apps generally push notifications are used to to make the user notify that some operations has been done in your applications or some activity is going on on your application so that they should not miss the or miss their applications uses as you can see there is a error verify extends right how to avoid those errors what we can do we can directly let me just upgrade my all the packages related to our new only added packages pop upgrade sorry it is not Firebase it is flutter what we can do we can just run this flutter pop upgrade command to upgrade all the dependencies available inside the pubspect.4 ml so that we should not get the message which you just got let me come back to this site pop.dev and if you go to our readme section here not there actually if you come to this example section we have lot of methods available right let me just scroll down little bit to the bottom if you come to this section you can see Firebase messaging all message listen method is there right let's copy it because how fast you can Implement I am just showing you and it should saw error because of flutter notification is not available so in our this example we will have another method called so flutter notification let me scroll down this is the method That's So Soft flutter notification right I am going to copy it and let me copy it let me paste it here and put all the required class names like file messaging 5S message and uh we'll what we will do will remove all this code inside here okay and we will try to show a dialog box or something else [Music] uh this question mark are not needed because these are not nullable response so we are going to call this one instead of calling this method inside of this newly created method we'll directly call that inside from our init State okay and we'll try to print our message that will be sending from our fibers console so the title will be notification title right title notification title and it will be two string it'll it'll uh it will be string by default I am just trying to show you whether it's string or not now let's go back and run our application to see the flutter notification title one through is send it from our application of Firebase console I'll do that after application is run successfully foreign this you have to come to this section and you can save messaging if you don't find this messaging then what you can do you can go to our section called engage inside this engage you'll see this messaging section and if you click then you will come to this page and it says a greater fast campaign click on this section and for as of now you will go with this session Firebase and not this one the first one Firebase notification messages scroll down and click on create here you can do any kind of title you can do I'm just trying to give flutter tutorial message flutter tutorial push notification and inside this body I'll be giving something like uh we are awesome flutter Developers and we'll try to click on the send test messages here it says no test devices configured add an fcm registration token what we will have to do that we will have to get a device token with the help of this Firebase messaging class what we'll do we'll create a method of get token and it will be of async and with the help of Firebase messaging class you can get an instance and with the help of instance we'll get a token what will be the value I just saw you now okay it is a device token means that it will understand that this notifications will go to this particular device only because in real time examples you will have to send the notification to a desired device or desired system that has been registered with this Firebase messaging now if I try to print here device token will get a long string which will be considered as our device token that will be again recognized by our 5S concern if I go here and open up my console okay let's rerun this application once again okay sorry I haven't called this method inside our init state so if I rerun our application once again what kind of error we got okay let's go back to our fibers it says there is no message messaging center ID okay so what is the problem we can know here in our last example we didn't give our message messaging center ID now we'll have to come back to our file base or we need to just go to our fibers messaging here there is a messaging sender ID this has to be present in our Firebase option like during your initialization of your uh now if I return our application it should work fine okay let me just save it and if it is not running properly then just close the up once and real start your application once again now let's rerun this application once again and go to our web browser console to see whether this device token is printed or not let's come back here application is Reloaded let's here you can say there is a device token printer right this device token is required while sending any kind of push notification test message from the Firebase console let's copy it and go to our 5S console and click on the send test message click here R and click plus symbol and once you click test it should show any message let me just clear this console once again and if you click this test button it should print something like title we have trying to create right like title notification title we are trying to be print here let me click here test now the notification has already been sent but whether it will actually come to this section or not so flutter notification it should call this method and it should come to this block okay let's see whether it has reached or not it hasn't reached to our Firebase console or it hasn't called this method right so what will be the problem Firebase we have made the initialization and if I go to index.html whether we have the 5S messaging or not okay we have missed one thing in this index.html file is that we have added this import script in our Firebase messaging sw.js file the same import has to be there in our index.html file now the application is reloaded and let's go back to our web console browser console and you can see here device token is printed we need this device token in order to send notifications to this device only to my laptop only and to send notifications we will have to go to our fiber sponsor click on the send test message and add the device token that we just copied click on plus click on test before clicking on the test let me clear the console and go back to this one and click on test now if I come back to this console it has printed notification title flutter tutorial push notification it means it is working fine what we need to do we need to show the message or the title in in terms of any kind of widget like dialog box or any container header display and that kind of implementation we can do as per our business logic what we will do is that once you receive a notification we will try to show some kind of dialog box in this example we will try to shop bottom shift model to print or to sort our notification message or body content let me try to show button set model bottom set and inside our Builder we can pass context context and written any kind of wizard from this context I am going to create a container widget inside this container I'll have a column to just show our text a title and our notification body notification title title now let's save this and redone our application I guess the application is Reloaded let's come to our fibers con and check this one and click on test it's let's go back to our application and wait now you can see a floater has opened a bottom ship model and as we received our notification like we created a model bottom set wizard to show our notification content now you can see we have received a flutter notification and our model buttons it has opened as you can see we have added a code to show our model bottom sheet when we receive a flutter notification or push notification into our application and we just got the notification and we are trying to show in our model bottom City this is the way we can receive the flutter push notification let me just go and add the content or the body here as well the text notification dot body just give some space and let me just reformat this one so that it should look better which I always do and I love formatting my code to read it better let me okay let me read on the application once again I just save it our application is reloaded come back to this Firebase console and try to send another message like this is the same notification title and body because here product tutorial push notification is the title and this is the body we are awesome flutter developers and I'll just change this message to we are creating awesome flutter community and you also can add any kind of examples like any image or something that you want to receive on your flutter notification this will be shown in our mobile apps as a notification as you might have seen our mobile apps how you get notifications right let's test this message click on test and come back to our application you can see we have received flutter tutorial and post notification and we are creating awesome flutter tutorial Community right this is good this is the way that we can receive flutter push notification into our application background notifications will be displayed once you are not on your application or once the user is not on your application but he is using another Windows message application or any other kind of applications if I go back and send another message and if I stay on this page only instead of our application if so we got in we are creating awesome flutter community and the website is local host 51 5000. so and in our tutorial if you close this app it will not show messages to you because the application is not running if you want to get bigger messages and it should show notifications then your app must be deployed into your webs server or any kind of server that you choose to deploy your applications so this is the way that we can Implement flutter push notifications with the help of Firebase in flutter web applications I hope this video was interesting for you and it helped you to solve your problem or to implement these features in your web applications I appreciate you to consider subscribing my YouTube channel and share this video with your friends and colleagues so that they can also learn this concept thank you so much for watching this video till the end and keep fluttering keep developing awesome apps and share with me as well so that you can learn from each other thank you so much once again

Channel: Lima Tech

Views: 8,770

Keywords: flutterweb, fluttertutorial, pushnotification, flutter, flutterdeveloper

Id: FQ61dZ9435s

Length: 22min 54sec (1374 seconds)

Published: Tue Nov 01 2022