Flutter Tutorial for Beginners #30 - Passing Route Data

Key Takeaways

southern gang our loading screen now is the first widget that loads when we start the app and what we're doing is getting the data we need the time and then at the minute we're just outputting the time right here but once we actually successfully get the time and it finishes loading that would be a good time then to actually redirect to the home screen so instead of playing around with this time in this widget and setting the state and then output in here let's now instead redirect to the home page so I'm gonna get rid of that I'll get rid of this print statement as well and also get rid of this string time because we now no longer want to output the time over here we'll just say something like loading again and now once this is finished then we want to redirect to the home page now we've seen how to push to a new route in the past and that is by using the Navigator object and using a method called push named and then we could redirect to another route now it passing the context object first of all as the first argument and then the name of the route we want to go to which would be forward slash home now this would work right and I'll demo this if I save it and then go to run and Hawtree starts then it's going to load and eventually it's going to go to the home page over here but what we did right here is actually push this home routes on top of the loading routes and we don't really want to do that we don't want to keep the loading routes underneath so instead if we wanted to we could use a method instead called push replacements named and this does pretty much the same thing it's going to push to this route but it's actually going to replace the routes underneath this one so this now no longer will be sitting on the stack of screens underneath the new one that we go to all right so then we can do this now let me save it this is still going to work let me just demo that hot restart and once we've loaded it goes to the Edit location route but we don't have this route underneath it now the loading screen cool so that's the first step however now inside this screen we want to output the data and unfortunately inside this screen we don't have access to that data we have the data in this widget right here but not inside the whole one now fortunately there is a way to send the data that we get from this widget into this new route of this widget and that is by using a third parameter over here inside this method and that third parameter is going to be arguments and it's going to be a map so right here this is basically a named parameter and this map is going to be a set of key value pairs that we can pass through into the widget or the screen that we route to which is the home screen so these key value pairs are going to be basically what we want to send to that next route so we want to send a few different properties we want to send the location if we open up this class over here we want to send a bit of data the location the time the flag and we don't need the URL because we're not making any more requests just these three bits of data because we're going to show automatically all of those on the screen so let me now define a property name called location first of all and this is going to be equal to the instance which is what we create up here when we create a new instance of the class and then we want the location property so that's the first thing we want to pass to the new screen the next one is going to be the flag and that is going to be the instance dots flag property and then finally we want the time and that is going to be equal to the instance dot time property so now we're passing all of these different properties through to this next route and we can actually access those now from this widget so how do we do that well the first thing I'm going to do inside this state object is declare some kind of variable the ultimate loan we're going to store all the data rent and we'll make that a map because at the end of the day we're passing a map of data here and we'll call it data and we're just going to set it equal to an empty map at the minute so initially when we start up this state object it's gonna be an empty map of data now then inside the build method this is where we receive the actual arguments that we send over here and the way we do that is by using modal route and then docked off then we pass in the context and this is why we need to do it in the build method right here because we need this context and then we say dot settings dots arguments so this is going to be the arguments that we receive over here so it's going to return a map of data so what we could do is just update now this data to be whatever comes back here so I'm going to say data is now equal to this now you might be looking at this and thinking why did you not use set state but think about it we don't have to use set state yet because this is the first time the build function runs and we're declaring this data and overriding this before we even return anything so we're doing this first and then we're building up the widget tree so now I can access all of this down here inside this widget tree but we'll do that in the next video what I'm going to do for now is just show you that this is worked I'm going to print out the data right here so now let me save this and go to run and then hot restart and hopefully it will see all of this data printed out down here or like this so now inside this widget we can access any one of these properties the location the flag all the time and output it inside this widget tree and we're going to start doing that in the next video