Intro to Flutter Navigation & Routes | Navigator 1.0 and 2.0

[Music] hello everyone today we're going to talk about navigation and flutter there are two versions of navigation built into flutter we have flutter's original navigation and routing mechanism which is version 1.0 that's when it was originally built into flutter and then they've come up with a version 2.0 which uses a declarative approach now when you hear 1.0 and 2.0 you might actually think that you're supposed to use 2.0 you usually use the newer versions of things but actually version 1.0 is fully supported and you might want to use 1.0 if you're doing like a simpler application so we're going to go through both versions today so the first thing we're going to do is just a very simple example just to get us started i'm going to type in void main run app we'll call it nav app then i'll do a stateless widget here we're going to go ahead and create another stateless widget down here we're going to call it first screen and then we'll create one more down here and call it second screen back up here in navap we're going to take this container and we're going to create a material app [Music] and then in the home we're just going to call this first screen down here inside first screen we're now going to do a scaffold and we'll do an app bar here [Music] and then we're going to put an elevated button in the body [Music] so running that we now see that we have our app bar that says first screen and our button to go to the second screen but obviously the button doesn't work at the moment so now let's go down here in the second screen and set it up as well we're going to do a scaffold in it as well with an app bar [Music] we'll say second screen okay so we have the scaffold set up in the second screen now now we can wire up the elevated button in the first screen to navigate to the second screen we'll go into this on pressed here [Music] and we're just going to type in navigator.push [Music] we'll set a context and then we're going to do a material page route so this will push the user to the second screen we'll come over here to our example and i'll click on go to screen 2 and it worked we're now on the second screen and then you can press this button right here to return back to the first screen at the moment but we're going to also wire this up here in a second so down here in the second screen on pressed we're going to type in navigator dot pop now we should be able to go to screen 2 and then return to screen 1. [Music] and we can also easily remove this back button here we'll go into the app bar here and we will type in automatically imply leading we'll set that to false so now first screen go to second screen we don't have the back button anymore but we can return using this button right here so that's the absolute simplest version of navigator i can show you you push to a screen and you pop to return to a screen but in the 1.0 version of navigation you can also use named routes so i'll show you that now so the first thing we'll do is go into navap here and we'll make some modifications the material app we're going to first set an initial route and then we will set up our routes right here the first one we'll do is the forward slash which we will set to the first screen and then we'll set up one we'll just name second and we'll point that to the second screen down here into the button to go to screen two we're going to remove this navigator.push here and we're going to do a navigator.push named so now as you see we have navigator.pushnamed with context and we're going to push to the second screen we're going to restart the app and we should still now be able to go to screen 2 and return to screen 1 should work as well so now let's take a look at version 2.0 of flutter's navigation we're just going to convert our existing code to work using the 2.0 version for now so we can do this a handful of ways let's start by converting nav app from a stateless widget to a stateful widget we'll right mouse click on it and do refactor and convert to stateful widget then inside navap state inside the material app we're going to remove all of this and we're going to do a home and we're going to say navigator [Music] we're going to set up some pages [Music] we'll set up a material page with a child of first screen so if we restart the app now still looks the same but nothing's going to work at the moment so up here at the top of navap state we're going to set a variable we're going to have a boolean that is um is first screen and we will set it to true and then we're going to create a function right here we're going to call set first screen we'll do a set state and we'll set is first screen equal to screen value so since we have two screens in the tutorial we only need to know if it's the first screen or not what might be a more practical use here is maybe setting this to active screen and then active screen could be one and then when you want to go to the second screen you set the active screen to two there are a number of ways you can do this this is just a very simple version to give you an introduction to the 2.0 version of navigation so down here in the navigator now we're going to set a condition here if is first screen equals false we're going to do another material page and we're going to set it to second screen so you'll notice we don't have a condition on this first one the reason we don't have a condition on this first one is because we want it to load in memory even if we're going to the second screen so we can pop back to that first screen if we want to so now we need to pass this set first screen function down into the stateless widget right here on first screen we're going to remove this and i'm going to type in final function set first screen then we'll look to receive set first screen and then we will clear out this on pressed here and we can now just say set first screen equal to false now we need to tell it to send set first screen down so what's going to happen now is material apps going to load the navigator is going to load and we have this material page here that's going to load first screen and send the function set first screen down so we receive it here set it into here and then when somebody presses this button to go to screen two it calls that function and sets first screen to false so if set first screen is false then we know that we need to be on the second screen so when it reloads is first screen is going to be false and it's going to show the second screen instead let's restart the app i'm going to click on go to screen 2 and there we go i went to the second screen but you'll notice the back button doesn't work so one way that we can get the back button to work is we can comment out or delete this line that says automatically imply leading that's going to bring back the back button and then up here in the navigator under pages we need to add an on pop page and then we will just return route did pop result we'll restart that we'll click on go to screen 2 and then we'll click the back button and it returns and also because we added this on pop page here now this return to screen 1 button is going to work as well as you'll see but we're going to go ahead and wire up screen 2 to work like screen 1 so you can have the full example of how that works so once again up here at the top of second screen we'll do final function set first screen will receive that down here in the on pressed we're now going to do set first screen to true and then up here in the navigator we'll have to add set first screen to the call so we'll restart the app and then i'm going to click to go to screen 2 and then i'm going to go return to screen 1 and it looks like it's working correctly almost if i go to screen 2 and then i hit this back button and then i hit hot reload it still goes to the second screen so in this on pop page we need to also reset this is for screen value so we'll first take this and we'll set up pop status and then we'll do if pops status equals true we're going to set the first screen to true and then we'll return pop status like it was doing originally so now if we restart the app and we click go to screen 2 and we click the back button and then we hot reload it stays on the first screen like it's supposed to so that should give you a good introduction to flutter navigation in future videos we're going to look at the get or get x routing and we're also going to look deeper at flutter's 2.0 version of navigation so you might also like this video right here and if you're enjoying my videos and would like to see more please consider subscribing thanks and i hope to see you in the next one [Music]

Channel: Learn Flutter with Me

Views: 1,311

Keywords: flutter navigation, flutter navigator, flutter navigator 2.0, flutter navigation tutorial, flutter navigation 2.0, flutter route, flutter, flutter tutorial

Id: b17bmcRpSuU

Length: 12min 36sec (756 seconds)

Published: Wed Sep 08 2021