Learn how to implement deep linking in your Flutter app | amplifyabhi

foreign using which you can enhance the Deep linking  much more easier so in our previous tutorials I   have clearly discussed how to integrate deep  linking in your flutter application you can   go through these particular tutorials and try to  implement deep linking in your flutter application   and this current tutorial will help you to  enhance the Deep linking experience in your   flutter application so I am going to consider  a dependency go router here and I am going to   explain you step by step in detail how to make  use of go router and try to add rooting in your   flutter application so I am going to start with  the basics here and if you are very much familiar   with this particular basic implementation  you can just directly skip to the tutorial   so the first thing we are going to do is like  import the material.dot here and specify void   main which is the starting point of program  here and inside which let us try to specify   run app and my app is the class which we are  going to make use so here I am going to specify   a stateless widget my app and till here it's  a basic configuration which I have done and   almost every one of you know this particular  configuration and now here comes the actual   implementation of the routing mechanism so now let  us try to specify the routes in our application so   what are the different screens we do have in  our application and how we want to navigate   them that is we need to specify the path using  which we want to navigate them so before getting   started with this particular implementation I  would like to add few screens over here so the   screens are like home dot dot here and I'm going  to add some basic configuration again over here and here instead of container  I'm going to return a scaffold   over here and inside which I'm going  to specify body with the center tag   and here for the child I am going to specify  a text stating home screen that's all nothing   more in terms of functionality here so  let's try to make it a constant here and   yeah that's it likewise I'm going to Define  few more screens here and I'm just going to   quickly copy and paste these other screens and  I'm going to quickly design those screens here and here let us try to specify profile and  one more last screen here which I am going to   specify and let's try to replace it with help so  yes all the three screens have been added and now   let's try to make use of go router here so let us  try to specify go router and I am going to specify   all the routes in our application so here you can  see we have got the parameter to specify routes   over here and now let us try to specify routes  here so I am going to make use of a roadbase   an abstract class here and try to specify the  array of screens here through which we need   to route and the first thing here I am going to  specify is like home screen and for home screen   I just like to specify the path with the forward  slash that's all so whenever you try to visit any   website there for example like google.com slash  will be there but mostly it will be not appearing   in the latest browsers but there will be a slash  after.com which specifies that index page will   be loaded and for index page we need not specify  any name specifically just a forward slash will   work so in the same way when you specify forward  slash here that will move to the home screen and   and it's not any mandatory thing you can just  specify home also here so I'm just trying to   specify forward slash itself and the next thing  here we are going to specify is a builder and   here let us try to specify the context first and  then we need to specify the router State here and later we need to return the  specific screen which we want   so now here I am going to return home screen so  here we have added a home screen right so I'm   just making use of it over here and yes we have  missed some bracket over here and now let us try   to specify one more screen over here so this  is our first root here and you can just try to   copy the same thing and try to add one more root  here and this will be like profile screen so we   have added profile screen as well over here so FF  profile here let us try to specify this as profile   and again one more route here and this will  be like health and here we'll be specifying   help screen as well and let us try to import the  help.dart file such that our health screen is pin   routed when we tap on the button appropriately so  the first thing is we need to link this particular   routes to our application here and here instead  of returning a container we generally return   material app right and inside which we specify  home and now we can just specify home screen here   and this is the way we generally do but with the  help of core router this is not the scenario so   instead of material app you need to specify  material app dot router here and inside which   we are going to specify the router configuration  and what is the router configuration so just now   we have specified The Roots here right so let  us try to make use of it inside the router   configuration and what will this do is like  it will go to the rotor configuration and our   first screen that is Slash home screen we have  specified right so this particular screen will   be loaded over here and now let us try to run  this particular code and see the output once so here you can see our home screen  is now loaded here why because we   have specified forward slash Here  and Now let us try to make it like   home and this one just like to  specify just forward slash here and here you can see we are now navigated to  the profile screen here why because we have   specified just the forward slash and we have  specified profile for that particular Road and   whenever you are trying to test this particular  scenario what you need to do is like just you   need to remove the help over here for example  if you want to test this on a help screen and   instead of reloading here let's tap on let's  try to run the code again and try to check   the functionality and here you can see now this  time our help screen was loaded by default when   the application is launched because it is been  represented by forward slash here so here instead   of a text field here let us try to have a button  here so let's make use of a text button here and   now let us try to add the functionality  to move to the next screen and here let us   try to specify it's like move to profile  screen and this is our button over here   and now here let us try to specify context  dot Co so previously in our main dot dot we   have made use of material app. router so what  this router does is like instead of a navigator   we are making use of a router here and the  same way here you can just get go option here   and now here let us try to specify profile so  whenever we tap on this particular button we need   to move to the profile screen and yes that's it  we have specified the routing mechanism over here   so yes that's it we have specified the profile  and now we need to remove the constant over here   because it's not it's no more any constant now  so let us specify a comma and and now that's it   let's try to run this particular code and see the  output once and here you can see we have got Moto   profile screen button here and when I tap on this  particular button we are now able to move to the   profile screen and this is how we can make use of  go rotor dependency and make the routing much more   easier here and these are the list of tutorials  where we have discussed the Deep linking concept   and I suggest you to make use of this particular  tutorial with these tutorials and try to enhance   the Deep linking experience in your flutter  application so the code for this tutorial is   provided in the description section below yes this  is it for this particular tutorial and if you like   this tutorial do like share and subscribe to our  channel for more interesting content on flutter

Channel: amplifyabhi coding

Views: 7,170

Keywords: Flutter, Deep Linking, URL Launcher, Firebase Dynamic Links, Navigation, Mobile Development, App Development, Mobile Apps, Flutter Framework, URL Scheme, Mobile Navigation, Cross Platform, Mobile Deep Linking, Mobile Links, Flutter Community, Debugging

Id: e8u1JWHdUQs

Length: 9min 54sec (594 seconds)

Published: Sat Mar 11 2023