Flutter Routes & Navigation – Parameters, Named Routes, onGenerateRoute

routing is one of the most basic things your ad must have to do anything meaningful however navigating between pages can quickly turn into a huge mess it doesn't have to be so there are multiple options for routing and some create a lot of clutter others cannot facilitate passing data between routes which is really necessary once you get into some more complex apps and yet others require that you setup a third-party library the option that you are going to learn about in this tutorial is the best of both worlds first party and yet clean to use [Music] hello welcome to resew color M before we get into doing this routing the right way let's first showcase the most basic way of navigation in flutter we're going to have two screens two pages first page and second page so let's set them up right now we're going to delete everything in here which is not needed so we can basically delete the whole my app so just hit page down delete all of the code where it is going to leave main function and this import statement so let's set up our main that dart file also there is a fully written tutorial available on reso cooler comm where you can get by clicking on the link in the video description so in addition to watching this video tutorial you can definitely go through the written tutorial as well so let's first add back the my app stateless widget which is the root of our whole app so the title stays the same and the theme stays the same what we want to change is that the home widget will be said to be the first page which we are just going to create right now first page will be simply a stateless widget because we don't want to do anything fancy in this average is going to learn about all of the different ways to navigate between multiple pages so stateless widgets will do just fine for us and inside a build function in the first page we want to have a scaffold with an app bar and a center widget which will have a column with you'll contain text so that we can know that we are in fact on the first page and then also we want to have a raised button this is the button which can be pressed so there we can go to the second page and then from the second page we'll be able to get back to the first page obviously so this is the button which allows us to go to the second page and in unpressed right now remember that we are showcasing the most basic way of navigation in flutter we are gonna have the Navigator of Porsche so we are pushing around directly without using a named route as you can see here we are specifying directly that we wanna put here a second page which we are going to create in just a bit and we are passing data directly to the second pages constructor so this can be really confusing once you get into having multiple pages in your app once you don't have just some example a but a real world app doing it like this the navigation directly with material page routes set up everywhere can become quite messy really quickly but let's continue with this example this is the most basic one so we also want to have second page which will have a string called data this is the data that we want to pass over to the next page and while in this example app this is only a string you can use anytime you want you can use any kind of a class even your own class it doesn't really matter the data can be of any type if then we want to set up this data in the second page constructor so that we can actually pass it over to the second page from the first page and then in the build function for the second page we are simply gonna have some text widgets inside a scaffold just so that we know that we are on the second page and then we also want to display the data which was passed into the second page from the first page so it will look something like this so here we go we have the most basic way of navigation but what we have done here is not all that good for more complex apps as I've already said that's because it adds code duplication because just imagine if you wanna have some route guards by route guards I mean that you want to protect certain routes from being accessed by non authorized user what does that mean well for example maybe in your app you don't want to allow not signed in users to access some sensitive data you want only the signed in users to be able to access certain routes or for example you have a subscription inside your app and you only want the paying users to be able to access certain page so you need to add some checking code which will check whether or not that current user is signed in and if you were to navigate just by doing simply this and therefore you would have the navigation logic all over your codebase you would add a lot of code duplication which you definitely don't want to do so there must be a better way to navigate by creating an object by also using named routes so that you don't have to instantiate the pages directly in your other pages you just wanna call some abstract code which will do the hard stuff for you it will get rid of any kind of code duplication and overall it's going to make your widgets code much cleaner so let's take a look at how to navigate with named routes you have two options for that the first one is the simplest and that is to just specify a map of routes inside your material app so if we were to specify routes which as you can see is a map of string and then we'll complex widget functions and then we would specify a map we would name the first route to which we want to navigate second page and then the second page as you can see routes is a map of string and build count widget returning functions so we would return second page and here comes the problem how are you going to pass data over to the second page if you use this routes map approach directly in the material app the thing is that you cannot dynamically change the data which is passed into the second page when you are using this simpler first approach of specifying a map of routes because you cannot pass dynamic additional data into a map literal it's just not possible this data would need to be constant ABC what we want to do is the second option which is to specify a function returning a route by doing this you still get the benefits of using named routes but you now have the option to pass data to pages this is possible because unlike with the routes map you can actually add a custom logic and custom passing of data into a function but just so that you can see that this approach works too let's go to race button here in the first page and instead of navigator of this we're going to delete whatever is inside this push function and we're instead going to call push named and the name which we want to put here is simply the name which we have specified above which is second page but actually usually you would just specify it with a slash so let's rename our route to say second not second page without the slash this is just customary thing in routing and routes so let's rename this route to second and now we would simply navigate to the second page by using a named route so let's try it out and as you can see we can go to the second page but we are always going to just pass ABC without any kind of an option for dynamic data to be passed into the second page because we are using a constant map basically which is specified inside the material app for the second approach we are going to get rid of this routes map and we are instead going to specify on generate route and you could specify the function and generate route even directly inside the material app so you could say settings because this pass is in route settings and do it directly in here inside this function but generally it's a good idea to separate your code into multiple classes and stand-alone functions so let's create a route generator class to encapsulate the routing logic which would be otherwise specified directly inside on generate route anonymous function also again you can get the code from the link in the video description and also check out the whole written tutorial from there on reso coder calm we're going to create this new class under the lip folder and let's call it route generator that dart inside the route generator let's first import the packages which we need to have here so material the dart from the flutter package and also our main dot dart because we want to have access to the pages which we have defined in the main dart file we want to create a class route generator which will have a static function which returns route dynamic it's called generate route and it can accept route settings arguments this is so so that it matches the description of on generate route which also takes in route settings and returns dynamic routes our January route function will get the arguments passed in while calling navigator dot push named because yes you can pass in some arguments in to push named we are going to get to that in just a bit and you can extract those best in arguments by calling settings the arguments settings is just an object which you receive in the ungenerous route callback so flutter handles everything for you here you just need get those arguments from the settings object and then we want to have a switch statement we want to switch on settings that names which is basically an if statement if you're not familiar with that so in case the name of the route which we get from the settings object is slash which means our home route our first route which we are going to specify in the main dart file we want to return our first page but if the route specified is the second route we are getting to the interesting core stuff here we want to do some kind of validation on the data which is passed in because the arguments is simply an object so it doesn't have any type and we need to make sure that the arguments is actually of type string because if we take a look at the second page we can see that the second page is data is of type string so we want to make sure that the second page will receive the proper type of data and after validating that the arguments are in fact of type string we want to return material page route so we are still going to work with material page routes but what we are effectively doing is that we will be dealing with these material page routes only inside the route generator class and nowhere else in our code so we will nicely Center the routing logic in this class and we will not need to go searching for some errors happening with routing anywhere else we can sleep well at night knowing that the whole routing logic is encapsulated inside a single class which is what you want to do whenever you are building some more complex apps and the material page routes builder will simply return second page and pass in the data by passing in arguments which are of type string because we have now validated them and otherwise if data or the arguments actually are not of type string we want to return some kind of an error route and also if we have tried navigate to some aroud than a simply / or / second so for example / third or some gibberish basically if there is no such named route we also want a return error out and the error out will be simply a function which returns a route which contains a simple scaffold and some Center text widget displaying that we are doing something bad because it displays an error text you can obviously create a full-blown page inside its separate class here but I've just inline the scaffold widget and not created custom stateless widget here because I think it's good enough for a tutorial so what we have done here is that we have effectively moved the whole logic of routing into a single class and now the only code for navigation which will be inside other classes than this route generator will be simply navigator that push named and that's it there will be no material page routes no nothing anywhere else except for this route generator so let's get back to main dad art and let's do some refactoring here so that we can use our code with the route generator we first want to get rid of home and we instead want to specify initial route which will be simply a slash and if we take a look at the route generator we can see that slash simply gets us to the first page so we have not changed anything in regards to functionality it's just that we are not specifying home but instead initial route and now our generator will not be set to a function here which is specified directly in my app class but instead we are going to specify it to be from route generator so we want to import route generator and we want to pass in generate route and finally we want to go down to the first page and inside unpressed we are currently pushing named but we are not passing in any kind of data that's because with the previous approach of using the routes map there was no point in passing in data because we could not fetch it either way but now since we can access that data which is passed into the push named function we want to specify the data and the data can be specified as arguments for the push named and we simply want to specify hello there from the first page so once we have that and we save the code we can now get to our app and actually we will need to rebuild it so hit ctrl shift f5 and now once the app is fully rebuilt because you just sometimes need to rebuild your app when you do some drastic changes as we have done right now but we can now go to the second page it will display hello there from the first page we can go back we can also change so hello there err aaaa from the first page so let's try it out and we can see that the text has changed so everything works properly and we can even navigate to a non-existent page so for example some gibberish here and we should end up on the error page yep error definitely not the second page but even when we navigate to the second page but instead of a string we pass in an argument of a wrong type so for example an integer 123 we will also end up on the error page because argument is of our own type you have just learned how to navigate around your flower apps in a way suitable for complex apps you've created a route generator which can encapsulate all of the routing logic which will spare you from code duplication especially as you add some route guards which will protect you from unauthorized access in your app creating many smaller classes with a certain purpose is always a good way to simplify your code and when it comes to routing this principle still holds true in the way of route generator don't forget that you can get the written tutorial from the link in the video description if you don't wanna miss in more tutorials like this subscribe to this channel and also hit the bell button so that you join the notification squad and not miss any of my new videos if this tutorial helps you to understand routing in flutter give it a like and also share it with our developers leave a comment if you have anything to say follow me on Instagram Facebook and Twitter and see you in the next video [Music]

Channel: Reso Coder

Views: 122,645

Rating: 4.9551516 out of 5

Keywords: resocoder, tutorial, programming, code, programming tutorial, flutter, flutter routes, flutter routing, flutter route navigation, flutter navigation, flutter navigation tutorial, flutter named routes, flutter named routes parameters, flutter named routes pass data, flutter routes with parameters, flutter ongenerateroute

Id: nyvwx7o277U

Length: 18min 38sec (1118 seconds)

Published: Sat Apr 27 2019