DeepLinking in Flutter Android || Referral System in Flutter Apps

hello guys so in this video we'll be looking at how to implement the DI linking inut applications as we already know that Firebase Dynamic link is ending its support on this dat so we'll be using the other method the flutter way of doing these things okay so all these steps are included right here in the article U but in this video we'll be looking at each step carefully okay so let's create a flut project new trop project first [Music] so okay so open up the project on vs code Okay cool so we're going to close this up and follow the the steps from this article okay so here are the steps so we going to be first uh creating a digital asset session file so it is actually the app link station file that we'll be creating which will be located in this folder which should be placed in this folder okay so let's create this folder in the root of your flter project okay so public folder and do wellknown folder and inside that we'll be creating this file okay so in the fter root directory we're going to be creating a folder called public and inside it well known folder and inside it now we're going to be creating a set link s file okay so for now we'll be uh creating an empty session and also we'll be opening up the terminal because we'll need to host this file okay onto the web so so in this file we can copy this out actually and paste it okay so here we need to replace some of the parameters okay so like here we have the package name okay that we'll have to put our apps package name and on S 256 key okay so we'll have to replace these two things okay so just uh remove it up and put your apps package name here where do we we find the app's package name build grle on your Android app so here we can see this okay name space Android name space that is our package name for now and on this s 256 key if you have already published your app on the Play store so you can find it on the play console as well so like where you can find it under the app signing and this entire file you can see okay if not you can find it by running the other command okay like in this case we going to go to the Android folder and we [Music] can uh get it from the grad Li signing reput right so what it does is it it will give us the S 256 s28 okay all the information of the project so here we can see okay this is our s 256 key okay we can copy it okay we can also find S one and other information okay just paste it right here [Music] fine okay so our asset links. JSM file is ready okay so we have created it and replace some of the parameter on our own now we need to host Host this file okay so for the hosting okay we are we we want some free hosting for now so we'll be using the Firebase okay the Firebase hosting we'll be using fireb just for the hting we are not going to use it Dynamic link option okay so let me create one new fireb project here okay so to link test let's see and yeah you can put anything it is available no 2024 let's say okay so continue okay okay we download the analytics and create the project so we'll be starting up with the new fires project if you have already one you can use that okay so it's finishing up okay now we can continue and we going to be using um just the fire hosting feature okay and uh for this okay we will not be doing anything from here we'll be running the fire C command Okay so we have done this step step one okay so we'll be now hosting it on this project okay such that okay we have this file accessible at this remote URL okay so for this U you need to have fire CLI installed at first if you haven't okay you can uh look into it that fireb CLI reference you can find it how to set it up on Windows Mac Linux okay so there are some steps few simple steps okay and after that you can try running this command Okay cutter sorry Firebase login okay so it will login into your fire account okay so I am already logged in as this uh account so I can proceed further okay so run Firebase init um hosting okay so it will initialize the hosting onor project so here we can see uh you are about to initialize a Firebase project in this directory okay no actually I'm in this Android folder okay sorry so I'm going to go back actually I can also start it on this path but that's fine so now we going to be yes saying yes on this project and here is couple of option you can uh press Arrow up down key to navigate and enter to select okay so we're going to be using an existing project so here it will fetch all the list of the project so we have created the de link test okay 2024 this one okay and I'm going to select it and here it says for the public directory which one should we consider so we already have created a public folder so yeah here so it's going to be considering that so I'm going to just uh tap on enter press enter because it's the default it will we select the public and configure a single page no and okay and set up automatic up now okay so the Firebase initialization for hosting is completed now we will start the actual process of deploying that is simple this command Firebase deploy what it does is now uh based upon this configuration it will um deploy our file okay on the uh on it server so here we get so hosting URL it is provided you can see so it is deep link tast dot sorry DLI T 2024 we. app okay so fire hting is complete so we can now check on that folder okay so wellknown SL asset links. Json file so if it is uh set up perfectly you can see this output okay so we can access this from this URL so our hosting is completed now moving on to third project okay so now okay we'll be uh adding something on our flutter project okay so I'm going to close it let's open window dot actually in here I will remove all those uh commands actually okay so using this uh regular expression replace it with the uh space okay so flutter deink test okay and this homage I'll remove all this and here I'm going to just put the size box let's say okay for now okay so we what we going to be doing is adding uh this intent filter okay I'm just going to copy it adding this inter intent filter on the activity tag okay inside of the activity tag so open up the Android manifest file and inside of this activity tag okay so here you can find one of the intent filter and below that I will paste it another intent filter okay so here we can see Android auto verify is true okay and this is where we should replace these things okay so Android host first we change this host okay so we have already the scheme as https and Android host is nothing but this wave app okay this is our URL so on the Android host I'm going to paste it and this much only okay s DPS is our scheme Android host is d link this. wave. apppp okay that's it and here we can see Android path prefix okay we can actually do uh it as uh refer for now like here we have we'll be finally generating this URL with this link okay so like CL refer SL like it will be SL refer SL code equals to referral code okay RM 2024 let's say okay so finally this URL will look like this okay and uh we can assume this as a referral system as well so when we send this link to other user and that user Taps on this link our app will open and our app will be able to access this referral code so that our app knows that it was referred by this user right so it is currently not accessible so we'll make it work so we going to be assuming this URL okay for now so path prefix is nothing but um that our URL right this URL will start from this path so it is our path prefix that is SL refer and after that we have the square parameter okay so we can specify this path parameter if we want okay let's see first without uh specifying it okay okay so we'll just we have just cut it out and and just we're going to be simply running that first so our app is installing okay and here is our app okay so we do not have anything so it's the empty sized box so it is not displaying anything so for now uh we have this as our um link okay as our host here for this deep linking okay so we going to be uh tapping on this URL okay so now I will um open that link from WhatsApp let's say this link right so I will send it there and now I will tap on this link okay so when I tap on this link you can see it is redirecting to our application itself right so let's try again when I tap on this link it will will open up our app okay so it detects from here and why it doesn't ask like open with option like we can see the open withth uh dialog here because it's Auto verify is true that's why okay so if we remove this option and we rerun this app and tap on this link we will see that open with option like open with chrome and open with our app okay so okay that's fine and now what we'll do is we going to be incorporating this uh rest of the URL right so to incorporate this okay so let's uh put it on our mobile phone first like this uh we make it work like we are making assume that we are making the referral system okay so what code equals to Let's Mr 2024 ra or whatever right so it is our referral code and if we send it and when we tap on this now it is opening our app why because this um link is set up here okay now we'll also be handling this refer okay and we're going to be extracting this code okay refer code here what is the issue is that uh if we type anything after this uh URL okay our main URL it will open our app okay when we tap on it but we want to prevent them okay so we just want to allow the refer SL refer path okay for that we'll be using this okay so here we'll be using this Android path prefix as SL refer SL now if we close this and uh rerun our app and try tapping on that URL okay so we'll see what's the difference so let's try tapping on those URL again okay so now if I tap on this URL okay you can see the option open with okay other things right like Chrome or other things but we cannot see open with our app and when we tap on refer okay it will directly open our app okay so it will prevent other uh random URLs right after this main path okay so I hope you understood that okay so let's move further okay so we have set up uh to handle such links now we going to be reading this referral code okay this code query parameter inside our application and for that we going to be using this mini links and one thing that we can also test it from this command without uh typing it on the WhatsApp like this okay so we can easily test it so we can just copy that and paste this Command right here and just replace here without domain right like de linking test24 w. app and if I enter here you can see on my mobile okay Enter and on my mobile here you can see my um app will open from here okay okay sorry what is the issue is that um I think that string that quote was the issue here you can see you just should replace this code with this and also your double code okay and let's enter okay and also sorry I forgot to add ADB okay so it is actually from the ad command and here we can see the option right now it only a text that refer refer URL okay so when I enter on that and here we can see it is redirected so we can also run this command okay we can also test it from this command so it is given to you by ADB Okay cool so un links let's try this what is this is it's uh simply a package you should add first this uni links package okay you can read uh a lot about uni links on the pub okay so it's for this accepting the incoming links okay app links for Android and Universal link for iOS and how it works is given here what the configuration needs to be done and and what is the uses of it how we can use it to get the link okay so I have mentioned it briefly in the article as well like basically app can receive Link in two ways when the app is in termined state and when it is in the background state so we can handle these both these cases uh background State means when our app is like in the background right so this is our app and we are in the background State okay and when the user Taps on certain link from here okay from this state what we can do and when our app is in terminate State means when our app is closed okay so we going to handle both these cases okay so okay so first add this dependency uni links okay so I have already added it so you can see uni links and now okay so from this we going to be uh creating one page like refer page okay so let's make this state full visit right here for refer base okay and in here let's make a simple UI nothing just a text in the center the text is actually referral code from that link okay from that URL we going to be uh putting some referral link okay here referral code okay we we going to be displaying that and here we going to be adding some style front size 32 Okay cool so this referral code how we going to be getting we going to be getting it from this link okay so this code so for that we're going to be using this uni links package and it what it does basically is it can listen to that URI okay so get the initial URI or it can listen to the stream of this uh link okay okay and from that link what we basically do is get the query parameter out of it okay so let's do it with the code so let's make a variable referral refer code uh ref code okay let's make it empty at first and if you see at the unil links documentation it also provides that stream okay the link Stream So for that we're going to need a stream controller okay sorry stream subscrib um sub let's say okay and in the init State we going to be handling okay handle uh the URI okay let's say this method in this method we going to be writing all the code required code okay so first we're going to be handle when the app is in terminated State okay so terminated state so how we going to do we going to we going to uh call this function get initial URI okay so it is provided from this unil links package okay so it going to return the future of URI so we going to be handling it so wait we going to store that URI on the U okay so it's a nullable URI okay it can be null so we can check it out if it is not null okay then then only we going to be handling it right here and also on the background State we going to we going to handle that okay so from the background State we going to be handling it with background State how we going to be handling it so we going to get this URI link stream basically okay so to get out the URI link okay we have U link stream and we're going to listen to that stream and what it provides is the URI okay so U URI and again here also we going to be checking if the URI is not nor then we're going to be getting the URI and doing some operation out of it what the basic what URI is basically the UR is nothing but this URL okay this path this complete path so we have this complete path now in this URI okay so we we are getting this complete path now we're going to be extracting this query parameter code okay so in this uh get or we can say set referral code from URI okay we going to make this method and pass the URI to this method so let's make it first here it's going to take in URI okay also call this function from here okay from this URI from this URI okay it can to take out this referral code and set the referral code to this variable okay so do this set a state our ref code equals to URI do query parameters and in which query parameter we are getting it's nothing but the code and we going to that it cannot be null for now or we can put default value if it is not okay cool so that's the code and now we're going to be using that ref code to display it right here okay and remove the cost cool so let's restart our application again reild our application basically so here we can see that the referral code is empty for uh in the first load okay now open the application from that link okay so first let's test another link as well uh like uh if we have that refer only and not that code W part so let's open that up sorry refer slash okay and it's okay sorry I opened that up so it's going to get that referral code and displayed here okay but I want to test another link here mean that okay that only and when I tap on it it opens our app but the refer code is empty because there is no query parameter if we open that link with the referal code here we can grab this referal code so from this code now we can send it to the back end or do some operation okay so in this way we can listen to the URI okay so I hope you understood the process of handling it okay also you can do the other operation like navigating to different screen based upon that URI or URI parameters okay so I hope you like this video okay thank you guys for watching this video thank you

Channel: Tech With Dinesh

Views: 63

Keywords:

Id: sj42EFSM3wc

Length: 23min 54sec (1434 seconds)

Published: Sun Dec 10 2023