Firebase Dynamic Links || DeepLinking in Flutter using Firebase || Auto Navigate Users to any Page

you can see that i have this app installed and when i go and create this share link now i have saved this link and if if i click on this link it will open that particular story and what would happen if i uninstall it let's uninstall it all right now if i click on this link what would happen that it would go to the play store page to that app package [Music] hello guys welcome back to careless coders today we are going to be doing firebase dynamic links now firebase dynamic links generates deep links this is also called deep linking and what it does is with the help of this you can go directly to a website or any page inside your app depending upon the devices and all of this will be done based upon the data that comes from that link now about deep linking in flutter i have also made another video in detail but that was in branch io and in that video i have done it from scratch and gave you great examples so if firebase if doing dynamic linking with firebase is not your concern and you just want to dynamic linking i would suggest you go to that video but other than that if you want to do it by firebase because it is easier in uh if you have already have firebase cloud firestore in your application then it would be easier to do by just using firebase now in this we are not going to be creating the project from scratch but what we have here is a completed project and i was tasked to make dynamic linking happening in this so i thought that maybe i should help other people as well so the first step is setting up the firebase and that step is already done in this application i am not going to waste time by telling you the setup part in this video however i will point you to a video that is in the description and that video you can see the step one and that is all about the setting up part and then come back to this video now after the setup first let me make you understand about the structure of this application and then tell you what we what is our goal here what we are trying to achieve and then we can start with the steps of implementing it now when we first open our app you will first see the splash screen followed by our home page at this home page you will see a lot of stories divided into categories and when you click on these stories you go to a story page where you can read these stories now our goal what we are trying to achieve here with dynamic links is that this share button when we click the share button a link will be generated that link will be sent to let's say a friend and that friend when clicks on that link then one of these three things will happen first if he is on a pc he will go uh to the website page or the webpage second part if he is on a mobile device and he hasn't installed the app then he will be redirected to google play store page of our application or app store if it is ios and the third if he has it installed then he will go to that application and in that application you will read directly to that story page so now let's look at the code structure of our app now in our story page it is receiving story data which contains various data such as title content image url etc and that is being received by the story page and then rendered as what is shown to us right now so if i sum it up this story data is all we need to show all of the all of the things in our story page so if we were to get all of this data in hidden inside a link we will be able to reach any story you don't need to be confused about all of this story data and this data and that data the reason i'm showing you this and making you understand this is just to understand the logic behind it and if you understand it carefully this will really help you in implementing it in your application because when you are implementing deep links it's not going to be a very small application uh it's going to be application filled with various classes and all so this logic will help you in building your deep linking now first let's go and import this package flutter dynamic links all right so now let's go to the firebase console and then select our app and then inside our application we need to go to the dynamic links and set up that then here we need to set our domain and inside this domain you if you have the website also uh then you can set your domain but if other than that you can also use your custom google provided link and so i will just type tell me and this will a google this will be a google provided domain but i can also write my own domain like terminated.com which will look more professional but for now we are going to go with default one so now with this google provided domain we are finally here now we need to go to our app and write some code one more thing to note is that if you are doing this in [Music] android then at this step it is enough however if you are doing it in ios then you need to complete a few more things in for this step and these are that so you can easily do this in your application my i am doing in android so i don't need to do this step one more thing worth mentioning is that this step that if you want to open your app without going to chrome then you will have to add these files in your intent folder so this is like you you may have seen when you so in some applications when you open the link you reach the chrome and then you are redirected to that app however in other some applications like uh in instagram i guess your directly reached the application so if you want that then you will have to add these lines in your intent folder otherwise you will be redirected from the chrome this part is uh if you are using a custom domain then you need to add something else but now the first part that we are going to be coding in our application is that uh we are going to be creating the link when we when we click on this search then our link of this of a link that is containing the metadata about all of this story is going to be generated so inside our code this is the place where our send buttons on click is present and this is where we need to implement that functionality generate deep link and share it from here now what we need to do first what we are going to do is we are going to be making another class so first make another file and we will call it now now we are going to making a class that will be called firebase dynamic link service and inside this class we are going to be making another function which will be a static function that will be our future and it will return a link in the form of a string and we call it create dynamic link and inside it we will provide our story data and this link message is going to be our url that we are going to be returning then we need to go to our page and package and we need to copy this line let's import the libraries and now we will understand in detail what this is so this is the parameters and they are going to be used first we need to fill the uri prefix when we created earlier this one so we write here https tell me a story all right then in our uri.box it is going to be the url that we are going to be providing so like we have our website so i'm going to call it we can call it anything but if you have a website then it should be your domain name and then after this we are going to say that story data and in store after story data we are going to be making a query parameter and that will be id because we are going to be using the id to get the other document our that id is going to be the firebase under id so we can do it like this and then inside this we will pass our actual id which is going to be story dot dot id and this way we will get the id from our link and if you want multiple then you can do and here and then add another query parameter now here inside the package name we are going to be needing to add our our package name now in i want to show you something that in android parameters there is one more thing that is called a fallback url and this fallback url is used to open when there is will determine what to happen when the app is in present by default it will go to google play store but like if you if your app is not installed at play store or some or or you if you are in ios then you can do anything else you can direct them to a web page or anything so for android my app is in place store but for ios i will do that i will redirect them to the web url so this is a this is a uri so we will just we can just do uri.parse and then we can pass that url inside it and inside ios then it will open the browser instead of the app store but since we don't need the ios or google analytics or itunes or social media text for now so i'll just get rid of them now what we need to do is we make a uri url and we are going to pass a boolean this will basically determine if you want a short url or not so if you want a short url then it will you will you will pass the build short url link method and otherwise you will just pass the normal one our link message is going to be equal to url dot to string and then we are going to return our link message which is basically going to be our url now we need to now we go to this send functions on click and inside this we will what we will do is and we call our function inside short we will pass files for now and the story data is going to be the story data that we will be passing which is coming in this page and switching dot stored all right after this this will return a url a string which will be generated deep link and that generated deep link we will just print here oh and we since it is a future we need to make it async and make it innovate all right so hopefully that should generate the link now let's run it and see if this works so now let's click on the story here and as you can see our link is generated however this will blink will will not be functional for now since we have not done the handling part that will be done as the our final step okay guys so now that we have done the create dynamic link and the sharing part now what we need to do is handle it so whenever application first opens it recognizes the link where it is coming from it and handles the data that is coming and based on the data it navigates to a certain position so how we are going to do it now before we do that we have to go to our uh our page package page from dynamic links and then here we need to do this step this is actually optional but it works more fluently in my experience if we do this so we will do intent filter and we need to copy this code in our androidmanifest.xml so we go to our androidmanifest.xml and in we add this code in our enter and now in our android host we add our own uri prefix which will be which will be found here this is so always tell me a story dot page dot link and after this it will be good to go however i always do flutter clean and then flutter pop get so that it works fluently so now that we have done this now what will happen is that it will ask us permission to open whether whether or not to open in app or you know open in chrome just like it works in links of instagram or other big apps now first we will create our function and this is also going to be a static function so that we use we get to use it directly and will be a future wide init dynamic link and inside this we will call dot instance now inside this function on link instance dot on link it is inside this is actually what will be happening if you're if your how app opens with link while your app is also in the active state so if you are happy in the active state it's not yet closed or run out of memory then this function will be triggered so let's handle this on success and by the way the code for this will be in the description for this page so you can use it however when you are using it you need to change the package names and the parts all of you accordingly okay otherwise you can use the rest of it as yours without any problem so now you final now we need to create the uri url now that we have gotten the link what we are going to do is first we are going to check whether or not our story is a type of whether or not our link is redirecting us to a story story is equals to deep link dot path segments if story data is inside our link then we will get to know that this is generating that and the reason we do this is that uh if you have a big application and you don't need to just be redirected to a story from a link but you also need to go to like profile or a coupon code or anything else so you can just pass that keyword and it will recognize that keyword and run according to that only so if it is is story then what we are going to do is we will get the id of our story document and how we do that is deep link dot query parameters very parameters we get id because that is what we did uh in our uh like like see this like you know in our parameters we pass this query parameters id and there is story.id [Music] so now that we have gotten that now we need to check if our deep link is not equal to null we'll do something else what we'll do is we just return null so that nothing will happen then i am going to do is i am going to query something from firebase so for that i'm going to then do this inside try and catch you don't need to do try and catch or query you might just go directly but in my structure of my app i need to go to that and find fetch that document before i redirect so i'm going to do that now we have gotten our story data now what we will do is we will be going to our story page and inside that story page we will be passing our uh story data so that is it and that is all required now the context however is going to be coming from this so we need to make a build context that we will pass from our first init state now inside cache we will print our app now after this on message is done we need to do a on error now that this part is done we can end this line so with that our firebase dynamic links instant dot on link is done and what it will do is it will handle only that which is if your application is still running or in the background then this function will be triggered so now let's run it and before we check that we still need to go to our home and actually actually do the part where we call our function fire fire space dynamic links service dot create any dynamic links and in that we will possible context now let's run this so our application has run properly now we will check to see if this is working so we will do this and this generates our link now we will go to our google and we will paste this link let's see what happens so it talks us whether where should i open the app link open this link in the chrome or in the absolute choose app and as you can see it opens it now but this was in the stack so let's do another let's do this story and we copy this link and now and as you can see we are redirected to that particular page now let's see if we can achieve this without generating the link from the app but from firebase dynamic links itself so let's go to your firebase dynamic links and there you generate a new dynamic link so now link that we wrote in our dot parse that the same link that we need to pass here now it was story data and then there was id and then id will be equal to any id so let's say i go to my my storage and i find any story id any random and let's see if it opens that copy this one and the title of this is peacock so we write this id and title is and the next and then define link behavior for apple so i can since i don't have apple application i can check this then link behavior then i can choose to open that link in my android app which is this and if not installed then i can go to google play page right now it's actually one more interesting thing and this is open google play for version slower so suppose if your app is advanced and you don't want your app to uh only to work in minimum sdks 23 or 24 so for those versions you can redirect them to the web instead of that so you can choose to check this according to your then after that these are the utm parameters and meta tags these will actually be important when you want to know where your analytics is coming from where people are link clicking your link more you know for all that purpose copy this and go to our application and we paste it now it asks us whether where to open this and as you can see that story we reach to that story without even generating it from the app now let's see one thing let's see if i turn this off or make this out of memory and then i then if i copy a link and paste it here it will not work and the reason for that is that this function this function firebase or instance.link only works when your app is running or active so how do we manage it when the app is not running not active or not in the background and this is going to be the final step of our of our dynamic links and now we do the same thing final pending dynamic link data data is going to be await firebase dynamic links firebase dynamic links dot instance dot and then we will get initial link and this will give us that initial link then we will convert it final uri deep link is equals to data dot link and after that then we will check if our deep link is not equal to null then we will do something otherwise we will just return null now if our d playing is not equal to null what do we need to do it's the same thing that we did in this function if d blink is not equal to null so we can just copy this and paste it here so now that this is done and this should successfully work now we will run this now let's generate the link now we will make it out of memory and then we will see what happens so it opens and our app is opening and as you can see we are right redirected to that story even when our app was out of memory now what i want to show you is what will happen if our app is uninstalled and what really if you have the app on play store what it should do it will take you to your package in your play store however if you don't have install then it will just run this to your fallback url or your internet web browser link so i tried working this however in my emulator for some reason it is not working so i built the apk installed in my mobile device and i will show you the video of it working there you can see that i have this app installed and when i create this share link now i have saved this link if i click on this link it will open that particular story and what would happen if i uninstall it let's uninstall it all right now if i click on this link what would happen that it would go to the play store page to that app package so we have successfully done it now the deep link is done i will give you a quick brief summary of what we did what we did we first went into our we first imported the package then what did we did we uh created the share link how we did this we made this class inside this class we made two static functions the first one was create dynamic link inside we created the parameters we made our uri prefix we made our link we gave query parameters with that query parameters we will use the data to reach another page and after creating this we put this inside our send on click after that we need to handle our dynamic link uh this will also be aesthetic how we handled our dynamic link first we created one there are two functions that are the first one that this will be off for the when your app is running or in the background and inside this you do you first get your leap link then you get whether or not it contains your that particular thing you want to if you are suppose you want to go to profile page or we want to then you can pass here different segments and and make them do make them do act differently now we get id and in this in this structure of my app what i did is i used that id and then fetched the document from my snapshot you can also pass all of the information in the link itself however it will be a big link so what i did is uh just passed the id and with that id i used it to fetch however if you don't fetch it will be a faster process uh no doubt but um but there would be a lot of a lot big link even after you shorten the url so then we pass this uh we we fetched it and we and we navigated to that based upon the data that we fetched here and then we then after our active background activity part is done this is the part where our link was out of memory and here is the same things it's the same thing is happening we've basically copied the same code and it will work here also now when these two functions are created what we did is in our home page in our init state we added this uh so that now it handles the link and other than that one thing we also did is set up our dynamic links and then i also showed you how you can send the dynamic link without even generating it from the app itself we also added these intent filters the for our app to work fluently which i do recommend you to do even though it's optional so that's all at last the code for this therefore firebase dynamically dot dot will be in the description and you can use it accordingly [Music] you

Channel: Careless Coders

Views: 23,319

Keywords: flutter, deeplink, flutter deeplink, deeplinking, flutter links, flutter dynamic links, flutter navigation link, navigation link, android deeplink, deeplinks, firebase dynamic link, firebase deeplink, firebase dynamic links, flutter firebase dynamic links

Id: UJ6IQGkoEgA

Length: 35min 54sec (2154 seconds)

Published: Sat Dec 04 2021