Flutter Go Router Pass Parameters and Arguments | Flutter 2.0 Navigation

hello everyone assalamualaikum so here we'll take  a look how to pass parameters and arguments to go   router and this is what we built last time we can  click on them and go to a new page we can you can   push them come back the model pop-up things like  that okay so here i had this go router initial   path and these are the kind of sub-routes we had  now we'll see how to pass parameters and arguments   to it so first we'll take this one this route  over here subroute and over here we want to pass   as we go to a new page we want to pass a parameter  to it okay now to be able to do that you can name   the parameter anything you want but you have to  start with slash and then this colon and the name   id okay this one you have to put now at the same  pass this to the screen or page where you want to   go so over here we would do id and then we  have to now inside this we have to use the   object which is called state now state is this one  this object over here and it has a property called   params okay now inside this you have to grab the  name okay so this is the name that you want to   grab and then over here you are saying that okay  this is not going to be null okay now we have this   error over here because in the details screen  in the constructor we also need to have   a related id or variable so here we'll declare  variable final string id and now here we say   that this is required this dot id now the  error should be gone let's come over here   so this is in the route itself but how about  actually passing the value because over here we   are saying that hey i'm going to pass it to you  and grab this whatever is this is over here and   then we will pass it down to the screen but from  where to pass okay now we'll pass it from place   from the place where we trigger this event like  going to a new page so we have to find this place   over here like we click on this button and as we  click we have to pass the value let's go ahead and   do that so now over here this is the place that  i think we can pass so over here what we'll do   definitely we can call context dot go  and then we just simply do like this detail okay so it will take to take us to  digital page but whatever actually passing   the value so you have to pass the value from here  so over here first we can generate a random value   and we'll save it in a variable called id and for  this reason over here we are going to use random   function of dart and then it has uh another  helper function which is called next end so   we'll generate value 0 to 100 and as we generate  the value actually we'll pass it over here okay   that's as simple as that one so we generate the  value and we pass it to this route over here so   as we click on this detail will carry this value  and as it carries it'll reflect over here and as   well as over here okay so now let's go ahead and  restart it now let's click on this one first one uh while we do have a bit of issues i do have a  bit of issue the reason is over here i forgot a   slash actually so we should have a slash like  this and then let's restart and it would work   let's go ahead and check on this okay here we see  that we have this value 41 which has been randomly   generated okay of course you can go back and you  come and see that this is the value okay so the   every time we get a new value so that's the first  part of the puzzle so all you need to do so as you   click on the button the place where you click  over there you have to generate certain value   it could be dynamic value coming from your server  and just pass it down to context.go context.push   it doesn't really matter and as well as other two  places you have to make change the route itself   and inside the builder inside the inside the  builder using the state object you can actually   grab them inside your page okay great okay next  we'll see how to pass argument so that means that   we are not going to do it from here actually  we were going to directly do it in our screen   constructor so model is a screen okay so over  here we want to pass arguments you can pass any   kind of argument over here i call the argument  name is block you can call it anything and then   once again we can grab this state object and  then it has another parameter another property   that's called extra okay now you would pass it  like this now it could be any kind of string value   integer or object now in this case we are going to  convert it to string okay yeah but we will still   have error because we need to come to this modal  screen over here and we need to grab it over here all right great now of course it's still not going  to work it's where we are pushing it this gomo   the place where we are pushing it this model path  this route over here we also need to make changes   that means this button over here now the button  i think it's uh right over here okay so we also   need to make changes in this place but before we  make changes let's uh remove this arrow function   and put it like this and then we'll do  like this okay now here is the actual   uh argument that you need to create and pass it  to it so we'll just simply call it blog and then   we'll call it cutie and that's all it's a little  different so over here we'll take this one which   is called extra and then we pass this blog okay  and that's how it works so if you want to pass   arguments you have to use this special property  which is called extra if you hover over on it   and you'll see that you have this object which  is called extra okay now we are passing it and   we are grabbing it inside this model screen okay  and let's go ahead and restart our app and we'll   see okay so here is this but of course we don't  see any changes uh the change is persistent over   here but for this one it's still not yet but as  you see we pass it down right so we can actually   use it right now so we'll just simply go ahead  and remove this and use it let's remove the const   one okay now let's restart our app now as we see  that it it took the value and we passed it to this   uh next screen as an argument so the  idea is if you want to pass arguments   and you go.contact context.gov or context.push  you have to use the property called extra and the   related value whatever it is you just pass it and  at the same time in your go route in your route   you have to also use or get it as a state object  over here okay using the state value anyway so if   you learn something don't forget to subscribe  and smash that like button thank you so much

Channel: dbestech

Views: 12,879

Keywords: Flutter Go Router Pass Parameters and Arguments, flutter navigation, flutter tutorial, flutter pass parameters to route, flutter pass arguments to routes

Id: _l6z9Qp5g5U

Length: 7min 37sec (457 seconds)

Published: Fri Sep 16 2022