Flutter Go Router: A Revolutionary Way to Navigate Your Device

hello everyone assalamualaikum here we'll use  go router package to do routing in our app so   here is our main screen and from main screen  we can click on a button and we can go to a   new page and we can click button to go back to  our home screen and if we click other buttons   it will take us to new page and from that new  page we can go to another particular page we   want and we also see the page routes and from  that page we can go back to our home page now   this is true on the browser go router is amazing  you can also run it on browser so we see the same   result as we click on this it will take us to  page two as you can see from here and if you   want you can directly access page 3 from here  so this is Page Three remember this is Page   Three and Page Three from page three we can  go to page four let's click on this so this   is Page four and we go to page four like  this so go router is a beautiful package   to navigate in your app get started come to our  pop spec.yml file and over here we are going to   install these two packages first one is the go  router for routing and this is for removing the   hash on web URL and here I'm in my main.dart  file and I'll create a main function so this   is the main function which takes app and we'll  come down here and create a stateless app class   and since we are going to use go router now over  here instead of returning turning a container or   material app we are going to return materialapp.  router so here is our Metro app.router and over   here at the top we have declared a title which  we are going to show it at the app bar here it   takes a chord argument which is called router  delegate and this is what we are going to put now   and of course we need to supply value to it this  value would be coming from go router now right   below it will create a go router object and to be  able to create go router object you have to use   the Constructor which is called go router it takes  list of properties one of them is routes now route   takes a list of routes now all the routes over  here are wrapped around go route now as you can   see over here now at the same time this one also  has a record argument which is called a path so   we'll go ahead and implement it so here is our  path argument for now we'll keep it empty now   since we have this go router and based on this we  are creating an object which is called router now   this router will be available over here so we  can access it and over here we could do router dot router delegate now with this our error  should be gone but now now after that we have   another record argument which is called a route  information parser so just like earlier one over   here we do the same we do a router dot route  information parser and now the error is gone now   what is this material app now Metro app actually  is another Constructor of material app now this   is our material class over here as you can see at  the top material app extends stateful class it has   a few Constructor one is Metro app and the other  one is metroapp.router so based on our needs we   can use any of the Constructor and we are using  metro app.router because we are we are using go   router and injecting it inside this Constructor  using the object the object over here we created   this router object now this Path property is very  interesting because it takes the first screen or   the initial screen or any screen that you want to  show you can show it over here now in this case we   have this slash that slash means initial screen or  the first screen now we'll go ahead and create a   stateless cloud and we created a stateless class  which is called page screen one now if we put up   our app what will happen this material this Metro  update route would get called and then it will get   this object over here and initialize the routing  for us and then this first page or initial page   would get invoked let's go ahead and run our  app so now over here we have an error as we run   it and it says that we have to set up go route  information provider let's go ahead and do that   and now let's run it and the error is gone and  this is our first page which is where it says   go router routes and where is this coming  from this is coming from here because this   is the title that we set and the title object  is being accessed from here now it's time to   do some interesting thing over here we'll  create some buttons and we will click on   this button and go to new pages so that would  be our new route and come back to home page   first we'll go ahead and create a new screen  so this is our screen 2 and we'll go ahead   and copy them and create another screen we'll  call it page threes we'll call it screen 3.   foreign now these two screens page three and page  two we want to be able to show it here and be   able to click them now to be able to do that those  pages the screens we have to register and where do   you register we register them inside this go route  inside this routes list so here we have registered   this two routes over here as you can see the  first one page two it's the path name or the route   and this is the page where we want to go the same  is over here page three and over here we want to   go to page 3 Skin So over here path refers to  the routes and these are the related Pages now   the related Pages we have to go through a builder  so it takes every go route more like a getex get   pages but it takes additional argument where it  is called Builder and builder takes a constant   end State the state itself is coming from go  router which is in more in depth we'll cover   in next tutorial so the idea is if you want to  use go router first you have to create create   an object using go router and inside this it takes  a list of routes so routes is the list and inside   that we have to use go router Constructor one  more time and that one takes the actual routes   or the pages now inside the go route over here we  also have to mention the initial page since the   routes are registered over here we need to come  to our page 1 screen which is this one and inside   this we want to be able to click we're going to be  able to create two buttons so inside the list we   have created this two elevated button let's go  ahead and save them now we should go ahead and   click on them so that we can navigate to a new  page so this is over here so we are on page two   and this is over here we are on page three so  our routing is already working and now over   here we want to create another button that will  take us to home page and this is our home page   now to be able to do that for each of the  screen or Pages we need to set up the go   back button or go back to previous page  button to be able to do that now we need   to come to our page two and inside this we  can create another elevator button so here   inside this page 2 screen I have created  this elevated button let's restart our app click on this now here we are on page two and  we click over here which would be clicked based   on this one on pressed button it should and  it will take us to the initial page remember   this initial page once again we have registered  inside this go route inside this path properly   so let's click on that and takes us to home  page and we're going to do for page three   you want to do it a little differently as  we click on this actually we want to go to   page four so let's go ahead and create page  four now as we created page four we have to   register this as a route and to be able to  do that we have to come at the top over here and right inside this go routes inside  this list over here we can copy this one and put it here and this route name would  be page four and it would refer to page four   let's save it now let's click on this now over  here nothing is here so on page three we need   to create a new elevated button so inside  this we'll create the new elevated button   and we have to remove the const keyword so  now let's save it and here we see that it   says go to page four let's click on this well  it says it's not found let's restart our app   let's click on this now this is Page four click on  this and over here we are now how do you know that   we are actually page four or not because there  is nothing new over here now go router provides   a convenient way to know your current route  so to be able to do that we can simply come   to our page four over here now inside this bold  method actually we can get the go router context   and create a new variable which is called a router  now there from this router object we can actually   access a property which is called location now of  course this location is coming from go router so   we use this object over here and access a  property which is called location and then   we'll convert it to string of course we  need to remove the const object over here and over here let's fix it   now let's restart our app now let's click on page  three and it will take us to page four and as we   see over here come over here we see that this is  Page four it's amazing so that tells us that our   routing is correct well here we want to create a  button from page four we're gonna go back to page   one or home page okay let's save this click on  this and we can go to home page isn't it beautiful   page two go back to home page page three it takes  us to page four and we are on page four and then   from here we can go to we can go back to home  page so it's working now it also provides error   handling if your routes are wrong or if the routes  are not found you can handle the error and how to   do that now to be able to do that so inside this  go route over here we can set up another property   which is called error Builder over here first we  need to create a screen and inside the screen we   have to send the state object State object carries  that error property if we have error so this error   Builder would get called automatically so let's go  ahead and create this error screen below it inside   the right below it will create this error screen  so this is our error screen let's restart our app   make sure everything is running correctly now how  to simulate this error so how to simulate this   error now do remember that from page one we go to  page three so here we can just simply do like any   kind of routing name for example six and let's  run it so as I click on this it will try to find   page route it will try to find this route which is  called page six but page six doesn't exist in our   routes over here so it will throw an error so and  it would handle the error beautifully for us let's   click on this and here it says that exception no  routes for location page four so it didn't exist   so if you have problem or error in your routes  you can handle that using this error Builder so error Builder is a convenient beautiful way to  handle the route's error now we want to run the   same on the browser and we'll see how it works  so here is our browser app and over here we can   go to page two and we can go back by clicking  the button we can go to page three we can go   back by clicking this button we can go to page  four from here and then you can also go back click on this it takes us to page four now over  here we can go to page 2 directly from the URL   so this is our page two okay and then from here  we can go to home page beautiful now how about   this hash so you can remove the hash now this  is coming from the plugin that we have installed   earlier so let's restart everything now let's  go ahead and click on this and we do see that   the hash has been gone now let's click on this and  from here actually we can click on we can type in   directly page four and we'll see that it takes us  to page four and we know that on mobile phone this   title changes as page four we can verify  it from here okay so let's go over here   and see so this is Page four beautiful  so you can jump from here to page two   wonderful so it's working so this  is a beautiful way of navigating

Channel: dbestech

Views: 34,599

Keywords: flutter go router tutorial, flutter go route example, flutter go_route, flutter navigator 2.0, flutter go_route tutorial, flutter tutorial 2022, flutter routing 2.0, flutter routing and navigation, flutter navigation, flutter tutorial

Id: _05zUd5Kdrw

Length: 13min 8sec (788 seconds)

Published: Tue Aug 30 2022