Flutter : Deep link tutorial for beginners Part 1 | part 2, 3 in description | flutter coding

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
so now open your chrome again and try to open the  url and it will be opening your application here   so this is a simple way for you to open a deep  link in your application as our application   is already installed in our mobile so it is  automatically opening our application and if it   is not installed and if our application is present  in play store it will be redirecting to play store   and from there it will ask you to download it  and install it in this vlog we will try to see   the concept of deep linking in flutter application  so what is a deep linking and why do we use it so   whenever you try to open an application you will  tap on the icon and you will open the application   and you will move to the required screens based  upon your app services so what if you want to   make the app open and automatically redirect  to a particular page and you want to send this   you want to share this page with your friend and  whenever your friend tap on that particular link   the application if not installed should go to play  store and install the application and when once   the application is installed when you tap on that  particular link the exact page needs to be opened   for example in your application you are having  five screens profile settings about help so i   just want to open the help screen and the user may  not aware where the help screen is exactly so with   the help of a link you can directly open the help  screen and also a real-time example like in amazon   or flipkart whenever you are having a particular  product you have search and you want to share that   particular product with your friend so he need  not search again from all the available products   right you can just share the product there and  whenever he tries to open the link in his mobile   then there will be an option like whether you  want to open a browser or you want to open   in the particular application so whenever you tap  on the application your amazon application will   be opened up and will be directly redirected to  that particular product page instead of showing   home page and all the other options so i think you  know understood what is a deep link so follow this   tutorial till the end why because this will be the  very easier concept for you to understand when you   follow this tutorial and in this particular  tutorial we will be seeing in an easier way   how a deep link works and how we can create  it using a firebase so now let's get started the first thing is we need to open the firebase  console here i have created a project like deep   link for creating a project you can just tap on  the add project here and you can specify your   project name and after specifying your project  name here i will be showing you with the help of   my project so here i have already added an android  project so whenever you have specified a name   there then it will be asking you this particular  screen here so this particular screen will be   visible whenever you have provided the project  name and here you need to provide the package name   here in the flutter project directory here you can  close it and open it now here you can see android   and inside android there is an app directory and  inside the app that is source directory inside   the source main directory and inside which  you are having an android manifest file here   so you can just copy this package name so this is  just a display name you can provide whatever name   you require so here you need to provide sha  one for now i'm just skipping it and if your   project requires it you may provide it there and  if you want to know how we can generate sha 1 i   have done a tutorial i will be sharing the link  in the description section below and then you   need to download the json file here so whenever  you provide these details here here you can see   i have created a project already with this  particular package name which you have seen   earlier so it is not allowing me again with  the same package name so to show you now i'm   just adding one more word here and here you  need to provide some name and when you tap on   the register app button here it will take some  time and it will provide you the json file now   so download this particular json file and you  need to add it under the app directory here   here you can see this is my google services json  file and you need to add this particular file   and now follow the further steps here so when you  tap on next here it will show you the procedure   to add firebase to your project so just copy  this particular line and here it is showing you   paste this particular add this particular line  in build.gradle here so inside the app folder   you so here you are having a file build.gradle  and here you need to add the dependency here   and later on you need to go to this particular  build.gradle and you need to add google services   here just make sure you add these two particular  things here and you can also select kotlin or java   and then you need to tap on next here so i'm not  going to create a project now because i'm already   having a deep link here here we have created a  deep link and now let's try to move down here   you can see dynamic links over here  so whenever you tap on this particular   screen for the first time you will be getting a  screen where there is an option called get started   tap on that particular button get started and  you will be getting this particular screen so   as i have already created a dynamic link here you  can see it is showing me that particular link here   and you can also add your own link if you are  not having any host address you can just make   use of your project name dot page dot link here  so here you can see new dynamic link i am trying   to create start i am providing here and tap on the  next button so here i am going to provide my url   like https google.com and here i'm just trying  to name it like google and here what needs to be   done when you open this particular link in  an ios device so in the coming tutorial we   will be seeing how we can handle a dynamic link  in ios application so for now i am just trying   to open it in our browser itself so tap on the  next button and in this tutorial we are seeing   deep link behavior in android application tap on  this particular thing and select the application   so this is a deep link so previously we have added  our application right there i have specified you   can specify your own project name project name  will be appearing here select that one if your   application is not installed on the user device  for example as we have discussed whenever you have   shared an amazon link to your friend if amazon  application is not installed on their device   so it will ask you to install the application  first it will directly redirect to that google   play store and there it will open to the amazon  application and it will ask you to install or else   you can just open a custom url here as we have  specified above our google.com but we want to   open it in our application only if application  is not installed it will be going to the play   store page and it will ask you to download  the application and then only it will open   so now tap on the next button here and  here you can see this is a social media tax   for example whenever you copy a particular link  from youtube or any other website and you try   to share it with your friends on whatsapp and  whenever you paste the link in the chat box   you can see some more data is being added to  your message like what is the link about title   description and all those things will be coming  up right so here this is that particular section   and this is again completely optional you may  add or you may not add it's your wish again   so i'm just going to create a dynamic link now  our link is being now created so here this is   our link which we have created just now and  you can just copy this particular link and   this is our application currently we  don't have anything in our application   other than the details which we have entered  right into our build and manifest also we need to   add some more information so now let's try  to see what needs to be done on flutter site   so here it is asking us to add the intent filter  now so this is some information here we need to   add in our android manifest file so just copy this  particular code and get back to our manifest file   here i have already added this here you can see  the deep linking so you need to add it inside the   activity itself so this is our activity we are  having only one activity now so this is an open   tag and this is a closed stack and before to the  closed stack you need to add this particular data   such that it gets considered and again we are  having only one activity so i have specified here   so if you are having multiple activities you can  just specify but coming to the flutter application   will be having only one activity so just follow  this scenario only whenever you are dealing   with your android native application there you  might have multiple activities and based on the   activity you can specify there and one more  thing you need to consider here you need to   add your host here so flutter tape links dot page  dot link so this is our host here if you observe   so this particular host you need to make sure  you add it exactly as it is displayed here   even if there is one word difference our  application will not be opened up whenever you   try to open it through the link and here you need  to provide this schema like https and http both   we are providing here so sometimes some host may  support only http and some may support https and   coming to our flutter code here we have not  specified much coding here so it's just a basic   stateless widget and taken up a container which  is in the center of the screen and inside which we   are having only a text widget so this is what we  have seen and now let's try to copy our code here   and once you have done all these changes  just make sure you rerun the code again   such that all the changes which you have done in  the code like manifest and build.gradle all the   things and google services json all this reflect  in your application so now open your chrome again   and try to open the url and it will be opening  your application here so this is a simple way for   you to open a deep link in your application  as our application is already installed in   our mobile so it is automatically opening  our application and if it is not installed   and if our application is present in play store  it will be redirecting to play store and from   there it will ask you to download it and install  it so in our coming tutorials we will be seeing   how we can make use of the data which  we have provided into a dynamic link for   example you have provided a promo code you have  provided some coupon codes whenever your friend   install that particular application and you  might get some benefit so in that way when   we will see how we can share that particular  data and so to make sure this tutorial easily   understandable i have not provided any extra code  in our flutter application i just want to open the   app whenever you tap on the link that's all so we  have achieved that if you are having any queries   in this particular tutorial do let me know in  the comment section below and there are few more   tutorials in our channel based upon flutter  so you may go through them and if you like   this tutorial do like share and subscribe to our  channel for more interesting content on flutter
Info
Channel: amplifyabhi coding
Views: 38,168
Rating: undefined out of 5
Keywords: dynamic links firebase, dynamic links flutter, dynamic links ios, dynamic links android, dynamic links android example, adobe dynamic link download, dynamic link firebase android, dynamic links html, dynamic links in flutter, dynamic links in the firebase console, react native dynamic links, dynamic links php, dynamic link firebase flutter, firebase dynamic links unity, dynamic links vs deep links, dynamic links vs universal links, dynamic links with flutter
Id: 2St6ZpZq0NU
Channel Id: undefined
Length: 13min 50sec (830 seconds)
Published: Wed Sep 15 2021
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.