Flutter Tutorial for Beginners #23 - Maps & Routing

Key Takeaways

okay they're my friends so we've got to the point now where we have three different screens on our flutter app and we need a way to navigate between those different screens right now to do that we're gonna have to tackle routing our routing should I say because I am British after all in a flutter and by the way you are going to notice we say routing or out rather than routes or routing and British and I should say the latter but because I've seen or rather heard some of the Americans talk about routes and routing over the years it's second nature to me now I just say routes so I apologise if that offends you if you are British and you're watching this it's not my intention but anyway let's cover these maps first of all because we need these maps to understand routing in flutter ups so then maps in darts are a bit like object literals in JavaScript or dictionaries in Python they're basically just a set of key and value pairs so what we're going to do is create a simple map here to see how we set them up and use them and then we're going to take what we learn and apply them to create some routes inside our flutter app so then let's create this map we do that first of all by saying map that is the data type then it would give this variable a name which I'm going to call student so we're going to describe a student here with the different properties they might have and we start a map by using curly braces like this which looks a lot like we would in JavaScript right to create an object literal so inside we give this different properties and then values to those properties so the property is going to be a string and the first one in this case is going to be a name then we have a colon then the value which is also going to be a string in this case Sean Lee okay so then we can add a second property by adding a comma and then the name of that property which could be the H and then a colon and the value which is this time going to be an integer 25 so now we have this map set up which describes this student it has two properties and values to those properties as well a string and an integer now if we wanted to at some point we could extract one of these values by using square bracket notation and by that I mean we can do something like this I'm going to say print and then inside this print statement I'm going to say I want the student which is the name the map itself the variable and then using square brackets I pass in the key that I want the value to so if I want to grab the name and just pass in name like so and it's going to print the name over here we can see chun-li and if I want the age I could grab the age if I run that we can see now the age hopefully okay so this is pretty much how a routing is going to work we're going to have some kind of route and then whatever widget we want to load up for that route using a map so let's put what we've learnt here to use and create those routes in our flutter up okay then going so now we know a little bit more about maps let's try putting that knowledge to good use by creating some routes for this app now we can create all of the routes on this material app widget directly and we do that by creating a route property and this is going to be a map so this map remember expects key value pairs now the keys in this routes map are going to be the actual routes themselves for example something like forward slash about a forward slash contact and if we went to forward slash contact for example we don't expect to see a contact widget on the screen right so that's how this all works now what I'm going to do is just start with the base ramp which is just forward slash so the first widget I want to show up when we first open the app this is the base routes now the value to these different routes are going to be functions and these functions take in the context object as an argument now this context object basically keeps track of where in the widget tree that we are so we're passing this current context which describes wearing the tree this currently is into these functions and you're going to see this quite a lot in flutter just so that widgets know where they are in the tree in the whole grand scheme of things so anyway this function right here it returns a widget that we want to load up when we go to this base route when we first open the app now I want to load up the loading widget now you might be thinking I've gone crazy because I've said over here that the homescreen should be the home widget and right here I'm saying well the first screen the hope should be the loading widget now ultimately when we finish the app this will be correct this loading screen because when we first open the app we have to load the data first of all so we're going to show that loading screen I'm just specifying this for now so that we can test this out easily the home page okay so we're going to change this in a minute anyway that's the first route the second one is going to be forward slash home and that is going to load up the home screen so we'll say function take the context object and then return the home widget okay and then finally we need a screen for the choose location right here I'm going to call this forward slash location and then this will be a function that takes in the context object and we return the choose location widget okay now currently we have errors on this and this and that's because we need to import them at the top so I'm going to copy this dude well be in Port Hope and paste it twice I'll change this one to loading and I'm going to change this one to choose underscore location so now we've imported all three files and we can use these things okay then so at the minute if we tried to run this then we're going to get some kind of error because this right here is conflicting with this right here we're saying the home screen the first screen should be the home widget and right here we're saying the default base route should be the loading widget so they're conflicting with each other and if I save this now and come to run and hot restart then we're going to see over here that we get an error and that's because of these two things conflicts in so I'm going to delete this right now and then save it and then what I'm going to do is come to run again and hot restart and we should now see the loading screen behind there okay so this is the first thing that's loading up now for testing purposes I want this to be the first screen that loads up so instead of using the home property right here to do that because that conflicts instead what I'm going to do is use a property called initial routes and right here we can say which of these is going to be the first route to load up when we open the app by default it's this one but we can override that right here so I'm gonna choose this whole route to load up first of all and if I save this now and then hot restart then we should see the homescreen now load up first later on when we're done the initial route is going to be this but for now what I would create in the homescreen will go with this one so now we have all of our different route setup we now need a way for a user to navigate between these routes on the screen so for example we could have a button which when a user clicks it pushes us to a different route and that's what we're gonna do we're gonna go to the home screen and a button inside this so when we click on that it pushes us to the choose location routes so let's now insert the safe area remove the text as the child and this time the child is going to be a column widget because ultimately on this page we're going to have a column of different widgets so we need a children property which is a list of widgets and the first one and only one for now is going to be a flat button dot icon now inside here we need a few different properties first of all we need the on pressed property which is a function and ultimately inside this function is where we're going to be navigating them to a different screen we'll come back to that in a second for now let's do the icon and this is going to be an icon widget and the icon we're going to use is on the icons object and it's called edit location okay now we also need a label property which is the text on this button and that is going to be a text widget which will say edit location all right so if we preview this it looks something like this on the screen but at the minute if we click on it nothing happens this is where we want to push to another route and we do that inside this on pressed function so in here we can push to another out by saying navigator and then dots push named so this is a function right here and it's named because we're going to supply a named round we're going to use the name of one of the routes to to that router and then it's called push because essentially what we do is push another screen on top of this screen this screen is still going to exist underneath it's just that we're pushing another one on top of it so this function takes two arguments the first one is the context object the second one is the named route and we want to go to location okay so now if I save this and click on this it's going to push the location screen on top now the home screen is still sitting underneath and we need a way to get back to that home screen once we've come to this page so let's go to the choose location and do this so now inside the scaffold all I want to do is add first of all a background color and that is going to be colors gray and it's going to be 200 and then I also want to add in an app bar which is going to be an app bar widget now the reason I'm doing this is because in flutter when we have an app bar automatically it places a little back arrow inside the app bar when we've come from a different screen and we're going to see that in a second so inside this up bar first of all I want to give this a background color which is going to be colors blue and then 900 so quite a deep blue and then we need a title which is going to be a text widget and that is going to say choose a location and then we also want a censor title property and that is going to be set to true to put the title in the middle and then finally elevation I'm going to take the elevation away remove the drop shadow by saying zero and that makes it flat on the page so if I save this now we can see this thing this arrow automatically appears to take us back to the home page so when we click on this it pushes the new screen on top of the old screen but the home screen is still there underneath this and then when we click this arrow it pops this screen back off and shows what's underneath again which is the home screen so this all works now and this is how we can transition between routes or screens okay so I'd like to talk about one more thing before we finish up with this video and that is this whole concept of pushing and popping routes or screens because it's a really important one to understand especially when you start to make ups with multiple different ramps so you can think of our app as like a stack of screens that show and initially we just have one screen that shows the initial route when the app first opens up then when we use that method to push on a new route what we did is push on a new screen on top of the old screen and the old screen still sits here underneath now in the app bar we had that back button and when we press that what happens is it pops this route back off the stack so we're left with the old route underneath which we then see again so this is all ok but imagine if we're going from one route to another and we're using that method to push new routes on all the time eventually we're going to end up with a tall stack of routes sitting on top of each other and this can become quite tricky at one point to manage your routes when you have all of these different routes on the stack because imagine we want to go back to the home page then it probably wouldn't be a good idea just to push on the home page again because we already have that home screen sitting at the bottom so it is an important concept to understand and we are going to be doing more routing as we go through the rest of this course so that we can see different ways to push and pop routes on and off this kind of stack and manage our routes in an efficient way so I just wanted you to understand that this concept of pushing routes and popping routes on and off the stack