Flutter ZERO Boilerplate Router with Auto Route – Flutter Navigation Tutorial

navigation and routing things just too much code and effort to implement no matter if you implement a router yourself or you use a library like fluro or Saylor there is still a lot of boilerplate all of this changes with the auto route package which works elegantly by code generation this way you can reduce repetitive and error-prone code to a minimum while still having the ability to customize the routes to your heart's content hello welcome to resew code Roo where you are getting prepared for real app development so that you will get freelance clients or a job and be confident about the apps you built so subscribe and hit the bell to join us on our quest for becoming in demand flutter developers by the end of this tutorial we will have built this simple app which can navigate to the second route as the fullscreen dialog which we can see by this X cross symbol in the corner instead of the usual back arrow and we will also have a third route which will be just a usual non fullscreen dialog route but as you can see it will also have custom transition of zooming in and zooming out respectively all of these routes will be implemented with the auto route package and they will have custom arguments also to make sure that we can focus solely on the author out package I have prepared a starter project for you which you can get from the link in the video description in addition to the starter project the link in the video description contains the written tutorial and also over there you can find all of the code written in this video links to the libraries and overall go through this lesson at your own pace the first thing we are going to do is open up up spec dot mo file and add all of the needed dependencies because order out works by cogeneration in addition to just regular dependencies we'll also need to populate dev dependencies firstly with build runner and then of course we are gonna add author out and author out generator and be sure to use the same versions as I am using now if you want to follow along with this tutorial because I cannot guarantee that in the future there will not be some breaking changes so the current versions are all point to point one and point two point one plus three for the generator respectively and you can find all of these dependencies also in the written tutorial from the link in the description all of the magic happens inside a class annotated with Auto router and we're going to dedicate a separate folder to it named routes this folder will hold a new file called router dart and this will be a simple class it needs to be prefixed with a dollar sign and the name is up to you I am just going to call it router and we mustn't forget to annotate it with an order router from other code generation libraries you may be used to specifying part statements saying something like router that G dot dart but here we are now going to specify any part of the file that's because the generated class which is going to be created in just a bit doesn't use any members or anything inside this our defined class so the generated file will actually not be a part of the manually defined file it will be completely a separate class separate file there won't be anything in common in between them basically what we are gonna do here inside this manually written router file is that we just define all of the pages which should be available to navigate to so we have three pages which are also in the starter project initial page which we should navigate to the second and also to the third page and as you can see the second page holds a single constructor parameter of type string called user ID and the third page accepts two arguments username and also points so let's add all of these three pages to our router class so initial page let's call it initial page second page second page and finally third page third page this is really it and now once we kick off code generation a new class called router without the dollar sign will be generated inside a new file so let's kick off code generation here flutter pub run build run watch and I always include the read conflicting outputs just to be safe and after some time we can see that we have a new file called router dot g r dot dart and you can immediately see why we didn't define a part statement in our manually written file that's because this router is a completely separate class without any dependency on the router with dollar sign class it really just took whatever pages we have defined there and it just generated one long switch statement with all of the proper parameters populated and we can pass in arguments and all of that good stuff we're going to get to that later for now let's focus on this router with dollar sign definition for a little while more there is a convention that initial pages such as our initial page here should be named just forward slash but if we take a look at the generated file we can see that initial page it's name is slash initial page while this behavior of code general religious taking the name of the page and then including it after a slash is perfect for all of the other pages it's not really correct for the initial page it won't hurt anything but really the convention is that initial page should be named something like this so how can we do it with order out well there is a special annotation which we can use and that is called initial and when we annotate it with at initial and rerun code generation because I have said watch in the command as you can see it rebuilt all of the code currently we can take a look and indeed initial page is now only forward slash so now that we have defined all of our pages which are available for dammit gation let's go ahead in domain the dart and connect the custom router to the default navigation flow of flutter we can do it by adding some properties to material app or to Cupertino app or to widgets app no matter which kind of a design you are using there is always this core app widget and this currently takes in home and the home parameter takes in a widget but because we are gonna be using named routes and their names are specified inside this router class we don't want to specify the widget but we want to specify the widgets or the pages name so we're gonna say initial route will be equal to router that and of course let's import router and it's going to be the initial page so in other words this will specify here the forward slash and notice that we are not using our own router with dollar sign that's because router with dollar sign doesn't actually hold anything meaningful for us we only want the router which is generated not the manually written one so after we have the initial route specify we of course do tell flutter the mechanism by which it should determine which route it should navigate to and for that there is on generate route and also if you wanna learn how to create this and generate route function yourself check out the separate tutorial from the cart in the corner but now we have this on generate route defined by the generated router so we can use that so router that on generate route and just specify the function itself without calling it with anything and lastly we're also going to specify the navigator key which is also present on router that navigator key this is pretty cool because with navigator key you do not have to pass around the build context whenever you are navigating and you will see how to do that in just a bit so now we have all of the routes defined and of course you can customize them further you can add your own transitions and all of that stuff we are going to get to that later on in this tutorial but we have the most basic routes define we also have connected the order out library to the default flutter navigation flow so now comes the time to actually navigate to a different page firstly let's take a look how we can navigate to the second page which takes in a user ID as its single parameter into the constructor we want to navigate from within the initial page and we actually have already set up buttons and their respective navigation methods so let's hop into navigate to second function and from here to navigate we wanna say router which is the generated router so let's import it again and we are going to say simply navigator dot push named and as you can see we are not using the built context anywhere we actually don't even need it as a function parameter but let's just leave it in here and this is again possible because we have specified the navigator key to the material app and actually if we take a look and the navigator key definition inside the generated router we can see that it's a global key holding a navigator state and then when we call navigator from the initial page when we want to actually navigate this will grant us the Navigator state so of course we do not need build context because we are accessing the navigator widget directly we do not need to look it up in the widget tree but let's go back to initial taejun let's actually navigate so we are simply pushing named routes as usual and the route name to which we want to get is located inside router that second page this is the constant string which simply says for slash second page and also we mustn't forget to put in the arguments that's because the second page takes in a user ID and it's required but let's just for the fun of it take a look at what happens when you forget to push a required parameter so here we go we can navigate to the second route and we are not adding any arguments to it so let's see what happens well we get arguments miss type expected string the user ID but it has gotten a null argument so it's absolutely perfect that the library has caught the error that we have not passed in a required argument and it will really let us know about our mistake which is always a nice thing to see let's also take a look and what happens when we do pass in an argument but it will be off a wrong type we should pass in a string but let's pass in for example an integer one two three so now after we navigate we are again going to arguments mister but this time the expected string and the found argument is of type int so that's also correct and lastly if we specify proper argument for example unique user ID and let's navigate now again we'll be presented with the second page and user ID will be displayed on the screen so that's absolutely perfect but the problem is that currently we've been just passing a single argument into the route but what's going to happen when a route has multiple arguments for example the third page the third page should take in two arguments username and points thankfully your route is smart enough and it doesn't force us to use map of string dynamic instead it sees that the third page is constructor takes in two parameters and it will automatically generate third page arguments class so let's actually take a look at it inside the generated a router file we can see that all the way down there is the third page arguments and as you can see this class respects all of the required annotations so we are now going to lose on the intellisense goodness that is present inside dart whenever you forget to pass in a required parameter and also if we take a look at the third page is generated switch case we can see that it still checks if the argument passed in is third page arguments so basically you are still not going to be able to pass in anything else except for the third page arguments class or actually it's object so let's hop into initial page and similarly to how we navigate to the second page we are also going to navigate to the third page so let's just copy the code we're gonna say router that third page and arguments will now be the beautiful third page arguments and let's specify points for example one two three and username will be Bob all right once we have that we can now navigate even to the third page so let's open up the emulator navigating to the third page works and also the second page still works and also there is one thing you should know about these arguments for a route as soon as the pages constructor contains at least one required parameter the author out package will require that you always pass in the pages arguments what do I mean by that well let's take a look currently if we do not pass in any arguments while we're gonna get an error directly from author route so let's take look we have arguments mistype expected third page arguments but found no and that's correct that's because at least one of the constructor parameters is marked required but if we delete these required annotations completely so none of this is required the router just got regenerated and you can see that whereas the second pages parameters are required we don't have anything required for the third page that's because we have removed all of the required annotations so now when we navigate to the third page without passing in any arguments it's going to be possible but of course we are going to get an error but this error is coming from fluttered because we want to populate the text widget with a null value but now the author out itself doesn't give us any errors because there are no required parameters but let's just revert back to required parameters as we had before and now you know how to navigate the pages which have just one argument or multiple arguments and I think that order out handles it pretty nicely but let's now go ahead and customize their routes let's go to the router which we have defined manually and currently the only annotation is the initial adaptation but of course our route supports many more annotations than just this one which allow you to customize your routes even further by default non annotated routes will simply perform the default material page transition which we are all used to but you can also annotate the routes with add material route or add Cupertino route so if you are using Cupertino this is very much possible and you can specify here fullscreen dialog or whatever title initial but we are going to use material route and customize it to our liking in the beginning of this tutorial I told you that we are gonna use fullscreen dialog so let's just say it true and basically these annotations are just extensions so to say on the default material page route so if there is some sort of a parameter present on the material page route you can also pass it into the material route annotation to see the changes which we have just added here we need to hot restart the app by hitting either this button or hitting ctrl shift f5 that's because we need to rebuild the whole material app but once we have completely rebuilt the app from scratch when we now go to the second page we should see that this will now be a back arrow but instead a cross icon and I'm not sure why it happens sometimes but if something like this happens that you don't see your code reflected in the running app then the last resort is to always completely stop the app and rebuild the app completely and here we go now we can finally navigate to the second page and we will see that it has this cross icon and not the back arrow that's because we have marked it to be a full-screen dialogue but what if you want to have that nice zoom transition when you navigate to the third page well for that you cannot use neither the material route nor the cupertino route because those follow their respective design languages if you want to have custom transitions you need to annotate your pages or routes with add custom route and this custom route takes in many things and in the written tutorial there is a link to the official documentation for auto route which is by the way amazing so if you want to read up more on order out package just go to the link but we just want to focus on the transitions builder and this takes in a function and there are a bunch of already predefined functions by the package itself and those predefined ones are available inside transitions builders dot and now we wanna check out how soon in looks like and we'll also need to specify the transition duration or actually just duration in milliseconds so let's say 200 milliseconds so one fifth of a second and once we save that I'm not sure if it's going to work immediately even after heart restart or if we will again need to completely stop and start the app but let's see go into the third page of course does not work immediately we need to stop and again restart the app fully and it still doesn't work but this is more of a problem with flutter itself than with this package that's because if we check out the router which is generated we can see that it now instead of material page route the third route uses page route builder and it has indeed the transitions builder zoom in and also its duration best in so I'm not sure why it's not working even after restarting the app completely because the code is here it's not like the library is erroneous it does generate the code just flutter doesn't pick it up for some reason if that happens you must completely restart close the app all of the apps which you have in your emulator or on your phone and now hit run but now we can navigate to the third route and it's going to show us the nice zoom in animation and of course you can also create a different transitions builder yourself and you can use the pre-built ones as a template there are really just simple functions and usually you would use some predefined transition inside of them and if you want to learn more about animation in flutter you can check out a tutorial from the cart in the corner it's really amazing to see the whole flutter package ecosystem become more mature and this oral tech it surely contributes a ton to the overall wealth and health of that flutter package ecosystem that because writing the navigation code yourself by hand is really horrible and time-consuming and nobody just wants to do that and this package takes the burden on itself and it generates this nice code which is concise and also readable by humans and its overall an amazing package to use and if you want to go through this tutorial at your own pace once again and to get all of the code check out the written tutorial available from the link in the description if you are serious about becoming a great flutter developer who can build real apps for clients or at the job go to flutter that education link is also in the description to get the top curated flutter news and resources aimed at improving your app the meant career and over there you can also subscribe to my mailing list to get the best photo Resources delivered weekly right into your inbox and if you don't want to miss more tutorials like this be sure to subscribe to this channel and also join the notification squad by hitting the bell button to make sure you grow your flutter skills because here on reso coder I am determined to provide you with the best tutorials and resources so that you will become an in-demand flutter developer if this video helped you with understanding the Auto route package and overall navigation in flutter give it a like and also share it with our developers who will surely benefit from it too also make sure to LIKE this package on top da death and also give it a star on github to support its author because really these kinds of amazing packages take a lot of effort to create leave a comment if you have anything to say and see you in the next video [Music]

Channel: Reso Coder

Views: 30,267

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, flutter tutorial, flutter auto route

Id: iVpVBmDhpJY

Length: 25min 37sec (1537 seconds)

Published: Fri Jan 10 2020

Reddit Comments

[u/Milad_Alakarie]

Awesome tutorial bro. Thanks a ton.