 Hey everybody, this is Brian. Welcome to the 25th Flutter tutorial. In the last tutorial, Flutter 24, we showed a couple key concepts, but one thing that we really kind of drilled in on was how to change a widget in the body of a scaffold. Now that's actually not the correct way to navigate around an application. It's just a very simple way of switching that widget out. So one thing I want to cover today is how to navigate through an application. Now when I say navigate, what am I talking about? If you go to the Flutter website, and I have to apologize, I still have a cold so if my voice cracks or I cough, it might get a little nasty, but go to the Flutter website, routing and navigation, and read up on core concepts. You'll need to understand two main concepts, a route and a navigator. A route is exactly what it sounds like, a route going from point A to point B. You're going to go from your house to your friend's house. How are you getting there? And let's say you want to go back from your friend's house back to your house. How are you getting there? That's really what a route does. Navigator actually takes those routes and makes them do things. Makes your application move from point A to point B. And you can see kind of a simple example here. And we're going to build something as always. So we've got our little application up and it does absolutely nothing. It's magnificent, isn't it? So what we're going to do here is we are going to make a new material app. In that material app, we're just going to say the title. Whoops. I don't want to call it router. Let's call it navigation. Bell. Couple things you should note right off the bat. We need to put our routes here, but our routes don't exist yet. So if you type routes, it's going to want to know some things. So we're going to say we need a comments that have a period. That's why that's freaking out on us there. And in there is where we will put our routes, but as I said, they don't exist yet. We're getting to that point. Now we need our home and for now we're just going to say no. Build this out here. So first thing we want to do is create a new and I like putting a directory and I like saying screens. But you can kind of do this just really however you want. We're going to import the material dot dart. All I know is I have had this cold for about a week. My girlfriend gave it to me and I am so, so over this cold right now. It's just like it's one of those that started like in your nose and then started working its way down. I like didn't even have a voice yesterday. It was ridiculous. So if I sound horrible today, I mean yesterday was just really bad. All right. So we've got our build method. Remember whenever I say build means render. So we're going to actually render something onto the screen here. We're going to return a new scaffold. All right. Now in our scaffold, we're going to say at bar now we want a body. And this is what we're swapping out in our previous tutorial here. But this is the what we're doing today. Routing and navigation is the actual correct way to do it. Does it mean you can't swap out? I mean it works as designed. It just means this is probably the most efficient way, especially when you start getting into a lot of different things. And you'll see why here in just a bit. So we're going to say edge insets all. Let's say 32.0. Just because I really like 32. And then child, new center. And this is a pretty typical design pattern here where you'll have a container for your padding and then you're going to center something and then you'll have a column. And in the column you'll have a series of widgets. And in this case, our widgets are going to be a text field. Not text field, just a text and a raised button. All right. So we have our on pressed. And what we need to do here is we need to fill this in a little bit. Now this is the actual route and we're going to be working with the navigator. So what we're going to say here is make our anonymous function navigator.of because we want the context that we're currently in. Think of the context of, it's like a context of a conversation. If I say I'm going out, but the context is I'm talking to my wife. Well, that might not be too well. But if I say I'm going out the context is to my friends, then hey, that might be a good thing. So really the context is what context is the application currently looking at. And it gets really deep. But basically what it means is how is the application currently running? What is currently on the screen? It gets really deep. We're not there yet. So just kind of drink the Kool-Aid and just agree for a moment. So what we're doing here is we're saying when the raised button is pressed, the navigator of the current context is going to pushed named. Now what that means is there's push and pop. Push means like you're going to push something onto a table. You're going to push a new screen out there. Pop means you're going to pull it away. Why is it called push and pop? Well, those are actually, you know, legacy terms from the old CC plus plus days that have just kind of carried over into every language out there in existence. So we also need our little semicolon there. Now push named. This is the actual route. The route does not exist yet. And we will build that here in a second. But we're going to have this on every single screen here. So that is kind of the basic design pattern. And I'm going to actually start my virtual device here. I'm going to start a different device. I'm going to use the pixel XL shiny and new. Let that thing boot up. All right. So while that is booting up, we are going to just copy that, make a new file, call this second dot dart. And we'll make yet another file third dot dart. My phone made the weirdest noise. I don't know what is up with this. I need a whole new phone. All right. So second and we'll call this second. This is the second screen. And we want this to go to the third screen. Pretty simple. I mean, it's exactly the same. Now the third screen, we're going to do something a little bit different here. We're going to paste that in. Spell third correctly is what we're going to do. And let's say on this one, we're going to actually just copy and paste this. All right. So on the third screen, what we want to do is show how to go backwards. So let's say we want to go backwards in time. And we actually didn't put any text in these, did we? Well, boogie here. Let's fix these real quick while I'm in here thinking about it. And there's our raise button. Let's fix that in our second one too. All right. Now let's actually just wipe both of these out and redo them. All right. So back to where we were. We want this button to be the back button, not the back button. Geez. Back button. And instead of push named, we want to pop. Pop's just going to go backwards. Now this one, we want to go back to the home screen. And this one gets a little bit different. And you'll see why here in just a second. Actually, let's just fix this up and run it real quick. And then I'll show you exactly what's going on here. All right. So we're going to actually import a few things here. Import package. All right. So we're going to import those screens. Now in our routes, we need to actually flush these routes out. And we do that using this syntax right here. Meaning we're going to give it the route, say home, build context. And we're going to give it the context. So basically what this is saying is when the home route is called slash home. And you can name this pretty much whatever you want. I just like using the slash slash home. Then it's going to create a new home under the current build context. That may not be a thousand percent accurate. But I think you get the gist of it. And we're going to make our third. All right. So we've got that. We've got our little emulator up and running with a whole ton of apps on there. Let's save this, give it a good build, push it out to the emulator and see what happens. Now the concept of a route is actually a little more involved, especially in other frameworks. Routes can get really kind of messy. And you end up tracking a lot of the stuff under the hood yourself. Some frameworks don't even have the concept of a navigator. And you actually have to kind of build your own navigator class, which is a royal pain. This actually is pretty, pretty seamless. And I like it. What is this? Oh, yeah, we didn't set the home. That's why. All right. So hot reload should pick that up. There we go. So this is our home screen. If we hit next, you can see how it takes us to this is the second screen. And we have this little back arrow here and we can click back and it goes to the home. That's called intrinsic. I think that's called intrinsic. Intrinsic or internal navigation. I don't remember, but in part, that's the navigator class helping us out here. I think I could be dead wrong. That might be part of the app bar, but let's just go with it. So anyways, you can click next. It goes to second. You can click next again. It goes to third. Now, if I click back, it goes back to second. So I can go second, third, back and forth, back and forth. Now, this time, if I want to go home, you see how there's home, but it has this little arrow up here, which takes us back to third. Let's say we want to get rid of that arrow. Then we need to do something a little bit different here. So what we need to do is let's go back into third. And instead of push named, what we're going to do is we're going to dot. And this is a little bit of a long one. It's called push named and remove until. Wow, that's a long one. So what this bad boy does, I just hit my funny bone and that was not funny. Gosh, and here I'm all worried about coughing and I'm like jacking up my elbow. So here what we need to do is actually just say route. And we want a dynamic. Let me see if I can push this over here a little bit. You can actually see what's going on. So what we're doing here is we're saying the route of a type dynamic, which is actually a route varical is false. So basically we're just going to keep going until we get to the home screen. So what this thing really does is going to push through that whole route list. It's going to say bang, bang, bang until it gets to home. And then it's just going to remove everything else. Hence the removed until. All right. So let's hot reload this. Actually, let's push it back out. Next. Next. Back works as expected. Home. Bang. There's suddenly no arrow. So that is what the push named and removed until does. In case you ever need that functionality. And then it just works as expected. So that is routing. And that is how you would get around from. I should say routing and navigation. That is how you would get around from one screen to the next. Now some things to kind of pay attention to for design patterns. Is you'll notice that each screen is building an entire new app bar in itself. That's kind of just the way I've done it. And then what I do is I take the app bar and I put it into its own special class. That way every single one of these uses the exact same app bar. And then the app bar is rebuilt every single time. If you don't do that one thing that I've noticed is you'll get double app bars. Like you'll have home here and you'll have another blue bar underneath it. So you kind of got to be careful about that. This is just one of many ways to navigate around your application. But it's probably one of the simpler ones. And I wanted to cover it first. So I have not coughed or sneezed the whole time. I'm proud of that fact. Give me some feedback in the video once I post it. Let me know if you guys like these or if you don't like them. I'm really liking Flutter. It's just very fluid. I worked with a couple other mobile frameworks. And I've got to just say it just it once you get over the dart learning curve. It actually kind of thinks the way I want it to. And I'm really impressed with even an alpha just how easy this is to work with. I'm kind of can't wait to get into some more complex topics here. So that's it for this tutorial for the source code for this and all other tutorials. Go out to my website void realms.com. Click on GitHub and it will take you right out to the tutorials. There's the Flutter tutorials. You just clone all those down to your hard drive. And feel free to join the void realms Facebook group. There is 1700 and counting programmers out there all walks of life. And the site is funded 100% by your donations. If you've got an extra couple bucks laying around, please feel free to donate. Help keep the site up and running. That's it. Thank you for watching.