Flutter Firebase Push Notification : Redirect user on notification click

hi there how you all doing so today we'll be looking at redirecting user to a specific url or redirecting them to a specific page in our flutter app using by using the floater push notification so it's going to be it's going to work in a way that let me show you my app it's going to work in a way that when a user clicks on the flutter push notification is going to redirect them to either play store or a specific url or is going to direct them to a specific page in our flutter application okay so this was the where we stopped at the previous video so you can see it still has the flutter firebase messaging and it's still the same thing i didn't make any changes i didn't modify anything everything still works out so what i'm going to do now i'm going to create a page so i'm going to create another page that's going to be launched whenever we click on the the push notification from the notification drawer which is this side okay so this is going to be ditches page so just make the details that that and just import the material app material package so i'll just return a stateful widget here so this is just going to be details and it's going to have a scaffold as so i'll return a scaffold widget with an app bar the app is required so i'll just put the upper and hereby just have a title with a test widget so this is second page so i also return a body now i have a center widgets so this will have a child of tests okay this is the second page so right now this page you can see it because we haven't navigated it so what i'm going to do i'll replace this increment counter stuff okay so instead of implement counter it's just going to launch the next screen using navigator. push so make sure you remove that zero remove this i'll use the navigator class so this will be navigator dot push okay correct contest and the route is going to be material page routes material page routes and it's going to return a contest you're gonna have a contest sorry and then here i return the details page okay the detail page and make sure you close this close this awesome okay why is it showing and we're going to import it okay import this library the page all right so i need this to be properly formatted so i'll add the trailing comma and format this okay so let me do a hot restart so this button is not going to function as an increment button it's going to be a button that launches the nest route okay so i'll have to click on it and now we have the second page okay so this i'm not going to be doing this manually so the push notification is actually going to handle this whenever we click on it it's going to open the second page this same method i'm going to show you now is still going to work if you have more than one page in your floater app okay so you just have to follow my method and everything is going to work out as planned so first thing first i'm going to launch i'm going to show you how to open the next page and after that i will show you how to launch a url okay so this uh the firebase plugin which we added in our prospect of the ml5 already comes with some made classes and properties that we haven't even implemented yet so what i'm going to do so i'm not using this callback so i think it should be good if i get rid of it okay so i still leave this counter so it doesn't change anything when i remove it or i still leave it so what i'm going to do i will create a variable which is firebase messaging and it's gonna have the name of firebase messaging so i will need to extend uh initialize it here you can decide to initialize it inside a mid meter or whichever way it's still going to work so right now i'm going to create a function okay sorry i'm going to rerun that again so while it's running i'm still going to continue what i'm doing so here right is running i'll create a meter firebase firebase trigger okay i'll just give you the name firebase firebase trigger okay so it's going to be an asynchronous um function because you are receiving something from the internet so i need to make it a sink and using a await inside so now we have this stuff so i'm going to make use of this firebase messaging and also assess each object and properties that this firebase messaging plugin has to offer so i'll use something like firebase messaging which is a variable name dot it has a configure so you can see this config gonna have so many function callback functions it has a message which will be called whenever the user received a message on background message we also have on launch that will be called let's say the user has not opened our app so once they click on the notification the unlaunched property will be called the unlaunched callback will be called like it should be triggered then we also have the resume so let's say the user just minimize the app like you minimize the app and once you click on it once you click on the notification you're just going to call unlaunched you're starting the app from the beginning so i'll configure so the first thing is a message okay this is a message i don't think anything needs to be yes so what i'm just going to do is just print out the message callback okay so just just just print okay so i'm not going to be working with that okay this keeps closing because of the error okay so i'll run it again so here i'm going to call on launch see on launch callback will be called as i explained when the user just starts the app from the beginning by clicking on the notification so this one will record so i'll just print out message and then finally inside this callback is going to be a resume so this is what i'm going to be working on i will be working with a launch or a message but it's still good to run the same method the same function the same callback function already on launch so that it's going to still give you what you want so i'll just call this as a message okay so now we have the on message we have the unlaunched we have the resume okay so i need to cover this method inside a need so once our app just once our app is reviewed i'm seeing an error somewhere where is it coming from oops this keeps closing my app so i'll remove that and we launch the app again okay so now let's see we have this function firebase trigger i think on launch method on resume message so now i'm going to call this message inside in its callback uh the unit method so this is the first method that gets called that gets called whenever our app is being launched okay so it is one of the flutter life cycle if you want to check that out seems flutter have more than one life cycle how they needs on deed so i'll call this method here it has did update widget did update dependency it also has the the dispose method which is also a life cycle of water so i'll call this firebase trigger here and everything is okay all right all good all good but since i'll be launching a url since i'll be launching a page a route so i need to put a viewed contest here that will be used so cts and then here i'm going to provide that contest okay and by default in this stage already has its own contest so i'm going to provide it there and okay that's okay that's good everything is nice so i'm just gonna wait for the app to launch and now it's building so just give it a little bit of time so okay so the app is up and running let's see how to start here so what i'm going to do i'll go over to my firebase console and then send another notification so minimize this because we'll be working with the original callback okay so go over to firebase so this was the last message we sent on the previous tutorial so instead of creating a new notification i'm just going to duplicate this okay so still leave the message the title and the subtitle are the same click next so our target app is still the same thing so click next nest so here this is where we are going to do what is going to trigger the configure your message and all that so here we have the click action as a call back a key and we have the floater notification click as a value so now let's say we want to launch a specific page on our app in our app sorry i can just do something like a page and the value can just be hello hello launch page okay so whenever we identify this page it's going to launch the page that has been specified in our app so let's say we want to launch a url let's say play store or whatever so i'll just call this as a link and first i can just launch google for the start so just put a google address https okay so this is going to identify it as the value link so this is what we're going to be this is the only thing that we'll be looking at from our floater application i'll be looking at the link and the page key so whenever we identify this we should get the value and also this one has a value so i'm just going to send this notification so review and then publish so from the message that we printed you should see the page and also the link as a stream that will be printed as a json file survey okay so let's go back to my my app so you can see we have the floater icon that means the notification has been received so what i need to do now bring this down and click on this is my first nade so i'm going to click on this notification once i click on it it's going to call this callback on resume and we should see the json file it's going to return everything as a json so now we have the app okay it actually didn't show you then print out maybe because i was supposed to do a roswell starts i didn't want to start now okay i'll restart this let's actually see the the json string that will be printed out for us okay we got nothing nothing okay this is avoid actually moving that's void let's see sorry watch reload so maybe i'm going to send the notification again because you don't receive any any json file any json string sorry so what i do i will minimize this again and go back okay it seems it started printing okay sorry it has been printed now so we have the the json string look at it it took some time maybe because i put it it's an asynchronous function so it took it took some time to to actually show so we have the data and you can see from the resume i printed it message has the you can see the click action value and the floater nutrition click which are specified on the floater console the firebase console sorry so i have the link and you can see the link is http.google.com and i think i also have the page so hello launch page dot blah blah blah so first thing first i'm gonna do something here so first i need to access this data and then access this page which is going to be unique so whenever we have a page it's just going to launch the details page for us so what i'm going to do is instead of this printing nowadays i remove it and say final data equals a message so i'm going to access this very data here message and then assess the data so if you don't know what i'm doing here i have a video on pacing json data using flutter so you might want to check it out and also i'm going to put a link in the description below okay so now i've finally assessed the data inside this json object so now i need to do use an if statement so i will say if data okay the data and then from the data i can access the page so this is the page which is the key i gave it so just copy that and put here so now i'll access the page successfully so if the page is not known so launch your routes here launch routes okay so we can just instead of retyping that i will go down and copy the routes so just copy this stuff here okay and go back to the route and paste it here okay so you might want to do the same thing here also as well on the um i want to do the same thing inside on launch okay all right so now what i do i'm going to do i'm going to send another notification and you'll see this in action it's not just going to show the main page for us it's going to launch the second page for us which is the details page so i will go back make sure you do a hot restart before you do anything so i need to show my app first so just resume this and do a hot restart okay so how to start is there so just close minimize this okay it's showing no i don't need this for now so minimize this it's working based on the previous notification we sent so what i'm going to do i will go so you can see now the route is not actually on the details page it's currently on the main page okay so minimize it go to your cloud messaging so i will duplicate this and send another one so duplicate notification and just go down next this just the target make sure you stay the same nest nest nest and so i still have my page here if i change this it's not going to work so i want to make sure that i see the same thing as page because that's what we are using to identify there but you can still change the value if you want you can change the value to whatever thing you want but just make sure the key is the same thing so that you can use it to identify it so i'll receive this review and then publish wait for the notification okay it has been sent let's go back to our app and here i have the notification okay you can see the floater showing so just bring this down and click on it you notice that it's going to open the next page for us okay you can see directly to the second page awesome so this is how you navigate a user to the next page using push notification so once you then click on it you just take them directly to the second page because this page is not known but assuming this page is null it will just remain on the main page it's not navigate to the second page okay so guys so far i've showed you how to navigate to another page using flutter push notification so now i'm going to show you how to launch a specific url okay so take user to that very page you want them to go to that very website you wanted to go so for this tutorial i believe i'll be using uh i don't know i'll be using the url launcher plugin for flutter so this just helps us to launch a url so you can see cons url you put the url of the user then if i wait can launch earlier they already launched url and all that but before i can use it i need to install the plugin inside my the realm of file so click on installing copy this dependency so we need to depend on it so go over to your project go to prospect.jml file then under here i'm going to paste this and don't forget to run float up objects to make sure the dependency has been installed correctly okay so i like running this twice to actually be sure that everything is good okay you can decide to run it as much as you can let's say three okay all right so right now i will go back to my main dot dots because this way i'm going to run the function so still inside this firebase trigger i'm going to create another function okay at the end of this so just create another function so this is going to be launch url function okay for faster implementation i'm just going to copy this that they're already giving us here so just scroll down so i'll copy this okay and go back to my app and paste it here so it will access the log to import this or let me just start from beginning so that you will understand okay i've just removed this stuff from beginning so that you'll be able to understand what i'm actually doing so first i'm going to create a function that's going to launch the url launcher unreal so since i'll be calling this function inside this firebase trigger function i need to actually specify a string okay so i'm going to pass the url based on the value that the user passed put inside the firebase you know we have the key and the value so based on the value that has been passed inside why sending the push notification so go down launch so this link this trend is just going to be the link and it's going to be a centralized function so i'll do something like so i don't need to like use the final you i don't need to create any url so the url will be passed as a parameter inside this function so i will do something like if a weight so is in a synchronous function so we need to wait for it if awaits can launch urls so this is coming from the url launcher plugin because it can launch and it is a import it automatically launched it to automatically import the url launcher for us so just click on that so it needs to you the url string so i'm just going to pass in this link that i specified there so if i wait can launch link so you can just launch the link so i can see we launch it's also coming from the url launcher so just launch url fights should be launched your package awaits launch okay await launch then the url swing i will still pass in the link but if you cannot i can only be like that so that means it's going to remain on the main page okay so launch swing url i'm having so many red lines where they're coming from i'm having so many red lines here let's see and it shouldn't be like that nope i don't think this should be there okay that was the the error costing uh square brackets coil brackets okay so launch your rear string link sync all right so now i will do on resume message final data and all that so if data page is not now it's going to launch this or maybe let's say it's not you can just call the launch url launch url and then i'm required to pass the string so the string will be gotten from data so remember the data i have a property a key of link to actually use to identify it so i pass link as the key there all right i pass link as the key okay so we'll be using this link is going to be unique but if you change the key from the firebase console this is not going to work because it will assume that the launcher cannot launch the key because it cannot find anything so you should just see it as a null no value no key nothing like link so it will it will launch which it will remain on the main page so this is everything we need i guess so launch url blah blah blah data launcher blah blah blah arrange a sync okay so i will do a hot restart so first thing uh first let me bring up my my device so do a hot restart uh he's still launching the second so what i'm going to do i'm going to comment this navigator.push so that we won't it won't open the second page every time we do horse restarts so i'll do a hot restart i believe it will launch again oh it's still going to launch because i call i only commented the unlaunched callback i didn't comment the the one for okay he didn't call he didn't go back there but it's still good i just commented the one for on regime okay and then do a hot restart but if you're pushing your heart for production no worries just you can still put it on no worries it's not going to give you any issue so i will go back to my firebase console and then first i need to minimize these okay to be on the recenter then go back to the cloud messaging and duplicate this message so for now we are going to launch the google.com because that is what i put as a value inside the link so nesd is just nest so for now we are going to launch google.com because is the this is the key link and you want to make sure that the link is the same thing as this one so it's the same thing data link and okay so let's send another notification so review and publish wait for it okay it seems the message has been sent let's go back to our app uh go back to this so i'm going to click on it so we have the notification click on it and i believe this should launch google.com so click on it and wait for the callback okay missing plugin exception missing plugin assertion implementation found and we started again so just kill the app and we started again so this should work just wait to give it a little bit of time okay the app is up and running so i will close it i'll minimize it and then send another notification okay so we still have the link and the google you just click on review and publish wait for it all right it has been sent let's go check it out so we have it here so i'm going to click on it to see google in action so just click and re we have the google launched so we have google.com google.com so this is the website so the next thing i'm going to show you now is how to launch play store url using the same method it's still the same thing no two different so i will go back to my app so just click on back to actually return back to my app okay so i will minimize this go to console and publish it it's still the same thing so without me thought i'll show you we can actually launch any value it doesn't matter the url but as long as the url is valid it's just gonna launch so i will show you how to launch play store so actually i'll be using a an app from play store to replace this so the app name is teamion.com so i've already opened it team unit actually is a time market and online shopping app this video is not sponsored by timion but i just decided to use simeon for it so feel free to download the app sign up and start shopping for free okay so the app actually seems the app actually works with a cryptocurrency called opposite coin so you can use it to shop at 99 percent of the market price so that is a huge one so what i'm going to do i'll copy this the address of the app so that's what i'll be using so copy this and go back to my console so i'll replace this google with the app url so make sure you still have this as the key as the link so what i want i'm going to do i'll review this and publish so wait for it okay the campaign was successfully saved and notification sent so i will go back to my app so now bring this down and click on it you should see it's going to launch that url so you have seen me open with play store or open with chrome so you can decide to open a recruit but the user does not have play store to open it with chrome by default but since i already have play store already so i'll just click on play store and this will launch my play store and also take me directly to the app you can see how awesome see me on time market and online shopping so this method is always good if you want to set first user to like update your application so whenever they click on the notification to just take them directly to your app where they can just launch their application okay so don't mind my name here this is just a review i gave to the app because i was some app that i downloaded okay so awesome so guys so far you have learned how to i've showed you how to redirect user to a specific route in your floater app and i've also showed you how to redirect user to play store or any other url using the the firebase push notification okay thank you guys for watching so i so much appreciate your time do where to subscribe like and also share if you have any awesome contribution or anything you notice while watching the video putting down in the comment section and i'll do well to reply to your comments thank you so much to have a nice day

Channel: Destiny Ed

Views: 7,957

Keywords: #flutter, #firebase, #dart, #pushnotification, #cloudmessaging, #appdevelopment, #playstore, #redirect

Id: BLBWAA14hf4

Length: 34min 16sec (2056 seconds)

Published: Thu Dec 17 2020