Flutter Bottom Navigation with Nested Routing (Auto Route)

routing in flutter is a vast topic as it can be executed in many different ways having a logical and simple to navigate routing setup will directly translate into a better user experience it will also make the code a lot more maintainable for the developers configuring routing and flutter specifically with navigator 2.0 can be very tedious and time consuming this is where auto route comes in with its intuitive api and handy code generation that will save you lots of time and effort in this lesson you'll learn how to leverage the simplicity of the auto route and solomon bar packages to create an elegant bottom navigation bar configured with nested routing hello everyone my name is ashley and welcome to risocoder our goal here is to provide top-level education and teach you the skills needed to become an in-demand flutter developer don't forget to subscribe and hit the bell icon so you don't miss a single video let's get started in this tutorial we're going to build a simple app that will be focused on implementing the navigation logic and ui for a bottom navigation bar the app will have three main sections which can be navigated to via the bottom nav we've got a post section a user section and a settings section then from the post section we can tap on any of these tiles to be taken to the page for the post we selected we can do the same kind of thing from the users page tapping on these avatars will navigate us to the user profile page for the user we selected when we're on a specific user page or a specific post page we can navigate back to the main user or post page by hitting the back button in the app bar and one more thing i should mention if we go back to the post section you will see that we're taken to the specific post page we last opened and not the main post page this is because every section is contained within its own router and every router preserves its own state in this tutorial we're going to explore the absolute simplest way to configure this kind of a setup and be sure to check out the written tutorial from the link in the description where you can find all of the code written in this video and go through this lesson at your own pace to keep this tutorial simple and to the point we'll be working with a starter project which you can find the link for in the written tutorial before we start coding let's get familiarized with the starter project our main.dart file is pretty simple we've just got an app widget which returns a material app and the material app has the posts page as its home argument this will change quite a bit though when we implement the routing then we've got a widgets.dart file in the lib folder and this file contains a post tile and a user avatar widget these widgets are rather large so we separated them into a separate file then we've got a data folder and this folder contains an appdata.dart file in this file there are two classes post and user we use them in the app to generate mock data for the users and posts inside the app the rest of the app files are separated into individual folders based on the app features there are already quite a few files in this project and we'll be adding more throughout the tutorial so this kind of a separation will help us keep things organized so let's take a look at all of these folders now starting with the post folder over here we've got two files postspeech.dart and singlepostpage.dart postspage.dart has a stateless widget which returns a column with post tile widgets we use the static list of post objects from the post class located in the app data dart file to generate the post tile widgets you may have noticed that this widget doesn't have a scaffold when we configure the bottom navigation bar you will see why in the single post page.dart file we have a stateless widget which will dynamically display individual post pages depending on which post style we selected in the posts page then we have a users folder and it is set up in a pretty similar way to the post folder in the users page.dart file we have a stateless widget which displays a column with user avatar widgets and here we use the static list of user objects from the user class located in the app data.dart file to generate the avatar widgets the user profile page.dart file contains a stateless widget which will dynamically display a specific profile page depending on which user avatar widget was tapped from the users page the settings folder then contains just one file settings page dot dart and here we've got a simple stateless widget which returns a column with some text and a card widget with some mock user account data i just wanted to mention that in this tutorial we'll be working with the latest version of flutter flutter 2.5 so if you haven't upgraded yet go ahead and do that now or if for whatever reason you can't upgrade you should check out the written tutorial from the link in the description for a guide on how you can still follow along with this lesson with the previous version of flutter now that we have a solid understanding of the starter project files let's add all of the dependencies we'll be using in this tutorial to the pubspec.yaml file if you're using visual studio code you can now add dependencies using the command palette thanks to the new vs code flutter plugin update so let's add our dependencies and demonstrate this new feature at the same time first let's add the dependencies we need to configure the routing so let's open up the command palette and over here we can use the new dart add dependency command and now type in the name of our dependency we're going to need to add auto route and as you can see as you type you get a suggestion list so we want this auto route over here and there you go we get auto route added under dependencies now we need to add the auto route generator dev dependency that will help us generate the routing configuration code that we would otherwise have to write ourselves so let's bring up the command palette again and this time use the dart add depth dependency command and here we're going to use the auto route generator package and there you go it is added under dev dependencies now to actually generate the code we need to add the build runner dev dependency as well so let's do that add dove dependency and we're going to add build runner there you go now the last dependency we're going to add is for the salomon bottom bar package this package will be responsible for the visual aspects of the bottom navigation it is extremely easy to implement and looks quite appealing so let's add a dependency this time not dub dependency and here we're going to add salomon bottom bar as the suggestion shows here and there it is now that all of the dependencies are in place let's begin implementing the routing before we start writing the routing logic we need to make sure all of the files we need for this are in place so let's go ahead and create a new file in the lib folder and call it home underscore page dot dart and this is the file where we will define the bottom navigation bar for now though let's just create a stateless widget here and have it return a simple container and we'll call it home page and don't forget to import material.dart and that's it we'll come back and work on this file in a little bit next we're going to create a file which will be the blueprint for the generated code if you've ever used auto route in the past then the syntax we will use here will seem familiar do keep in mind though the way we will arrange our routes here will look different from the regular auto route routing configuration because we will specifically be following the guidelines for creating a bottom navigation bar with nested routing so let's create a new folder in the lib folder called routes and now create a file inside of this folder called router dot dart and the syntax we'll use in this file may look a bit unusual to some but that's just because this is the syntax required for the code generation to work so first let's create a class called dollar sign app router and above it we're going to add an annotation at material auto router and we can auto import it here from the auto route package so inside of these parentheses is where we will add all of the routing logic first let's specify the home page as the initial route to do this we're going to use this routes argument over here and this argument accepts a list of auto route objects and these auto route objects will be used to generate the routes for our app so let's replace this with a list and here add an auto route object and this will be the object for our initial path which will be the home page so here we want to specify a path and this will just be a single forward slash to indicate that this will be our initial route and then we also need to specify the page argument and this will be home page and we can auto import home page and then get rid of these parentheses we don't need awesome let's add some commas and save now one of the things otter out will generate for us will be routes based on the app pages we specify we will then use these generated routes to navigate to different places in our app let's take the single post page for example if we add it as a route autoroute will generate a route object we can use and it will be called single post page route and it will do the same kind of thing for all the other routes we specify now i don't know about you but having all of the routes end with page routes seems a bit redundant we can improve this by specifying the replace and route name argument over here replace and route name and setting it to a string page comma route so now in the previous example instead of single post page routes the generated route will be named single post route so dropping that page and this is a lot shorter and to the so point delete that now we need to create routers for the posts users and settings sections of the app we're going to do this by providing a list of auto route objects to the children argument of this auto route object we already have here let's add the auto route object for the post section first let's also add a comma here to format the slicer and then over here after the page argument we're going to say children and add a list inside this list we're going to add the auto route object we're going to specify a path name here and it's going to be posts then using the name argument we're going to give this router a name this name will be used to generate the router object which we will then use for setting up the bottom navigation and it can also be used when navigating from a route in one router to a route and another router so let's give this the name of posts router then we need to provide a value for the page argument for this router we're going to set this to an empty router page object provided by the auto route package you should set the page argument to empty router page whenever you have nested routes for a specific bottom navigation tab the last thing we're going to add to this object will be the nested routes for this router we're going to do this by providing a list of auto route objects to the children argument of this auto route object so let's add that now children and then add a list here now our first nested route will be the post page that displays the post tiles so let's add an order out object for this and here we're going to set the path argument to an empty string because we want this to be the first page that is displayed when the corresponding navigation tab is selected then we're going to set the page argument to post page and import the post page here and save the second nested route will be the single post page that's the page that will dynamically display individual posts so let's add an autorad object for that here and here for the path we will add the following string colon post id this syntax creates dynamic segments what this does is if you run your app in the browser and type in a path that looks something like posts slash one then you'll be taken to the page for the post with id equal to one for this to work as expected we'll also need to annotate the id parameter in the single post page constructor we will do that when we're done here all right so let's erase that and then over here we're also going to need to add a page argument and we're going to set it to single post page and import the single post page here and that's it now let's do the same for the user section so let's create a separate auto route object for the users router so this is our post router and over here let's create another auto route object and here we're going to set the path to users and the name to users router and the page to empty router page once again because we do have nested routes over here awesome now here we're also going to specify the children for the nested routes and our first route will be we'll have an empty string for the path just like for the posts and the page argument will be users page and import that now the next nested route will be another auto route object and here it's going to have a path of colon user id so we have the same kind of dynamic segment setup as we did for the post all right and the page argument here will be user profile page and make sure to import that as well awesome so our final router will be for the settings section this section doesn't have any nested routes so it'll be really simple so let's go and create another auto route object below the below this one auto route and here the path is going to be settings and the name is going to be settings router and for the page we're going to set this to settings page we're not setting this to the empty router page because we don't have any nested routes here and that's it now let's quickly go and annotate the parameters in the user profile page and single post page so that our dynamic segment setup works as expected let's do this for the single post page first so let's go to our posts single post page and over here where we have our post id inside the constructor we're going to add the following we're going to say at path param and then so we're also going to need to import this from auto route or auto route annotations we can just use the annotations and inside of these parentheses you can also specify an optional alias if you do specify an alias it has to match the path argument you provide it in the router.dart file so it would have to match this part or this part over here in our case the field name itself already matches the name we provided to the path argument so we don't need to specify an alias here all right now let's do the same thing for the user profile page so let's go to users user profile page and then over here we where we have the user id we need to add the path prom and let's import that from the auto route annotations and that's it now all of our pre-configurations are all set up and we can finally run the code generator to run the code generator we're going to need to bring up the terminal and then type in a command you're likely all too familiar with that command is flutter pub run build underscore runner build dash dash delete dash conflicting dash outputs here we're using the build flag because i don't anticipate generating the code more than once however if you expect to make changes that will affect the generated code then you can swap this build flag for watch that will cause the code generator to run whenever a change is made all right let's run this and after the generation has completed you should see the success message and now if we go to our files you should see a router.gr.dart file over here in the routes folder and we can open it and see how many lines of code we were saved from writing by using this code generation tool and as you can see it is quite a bit compared to our quiet minimal in comparison router.dart file next we're going to link the router to our app now we can close the terminal and a bunch of these files up here and let's head over to the main.dart file and over here right now we've got an app widget that returns a material app and to hook up our router we need to change this to a material app.router so let's delete everything inside of this build method and the first thing we need to do is get the router that was generated for us by the auto rail package initialize it and store it inside a variable inside of this build method so let's do that let's create a final variable call it up router and we're going to equal it to app router and we're going to import this app router from the generated file the router.gr.dart file and we can also delete this import because this was here from the previous material app now let's return a material app router material app.router from the build method and here we're going to add the debug show check mode banner and set it false and also we're going to add a title we'll give this app a title of bottom navbar with nested routing now we need to use the generated app router object to provide certain argument values to the material app.router so let's do that we're going to add the router delegate and we're going to get it from this object so it's going to be app router dot delegate so that's already generated for us and then the route information parser which will also come from the app router so app router dot default route parser i should also mention that by initializing this auto route object in the root widget we make it available across the entire app throughout the app's life cycle all right so that is it we now have everything we need configured to start setting up the bottom navigation itself the auto rail package comes with a special widget which will make it extremely easy to implement a bottom navigation bar so let's go to the homepage.dart file we created earlier and over here let's replace this container with an auto tabs scaffold widget and we're going to import this widget from the auto route package so using this widget we can easily create a scaffold with tab routing that persists throughout the app what do i mean by that well as i mentioned before not all of our pages have a scaffold specifically the router pages like the post page and the users page and the settings page don't have a scaffold this is done with intent because the scaffold produced by the auto tab scaffold widget will extend to all of the pages in our app you will see this when we run the app soon so for the single post page and the user profile page however if we take a look we do have a scaffold that is because we want those pages to dynamically display a custom background color so for that we need to wrap the widgets in a scaffold and set a background color on it so let's go back to the homepage.dart file over here we want the auto tab scaffold to have an app bar and a bottom navigation bar let's configure the app bar first we're going to do this by providing a callback function to the app bar builder argument this callback gives us access to context and etabs router object which we won't use here from this callback we will return an app bar so let's do that now so app bar builder and then here we're going to have our callback function and also let's add a semicolon there and here we get context and a tabs router object but again we won't use them here and this function will return an app bar awesome oops app bar and now for this app bar we want to specify a background color of colors.indigo and a title with a text widget that's just going to say flutter bottom now then we also want to make sure this title is centered so we're going to set center title to true lastly we want the app bar to be able to display a back button when appropriate and once again auto rail comes to the rescue here with a handy widget the auto back button widget which we will set as the leading argument for the app bar so leading auto back button and our new updated flutter lens are actually telling us we should make this constant so this auto back button widget will easily and automatically handle nested router popping for us we will see it in action when we run the app we're all done with the app bar so now let's give the auto tab scaffold a background color so it's going to be background color and it's going to be of colors dot indigo then we need to specify which routers should be included in the tab navigation for this we have a routes argument which takes in a list of routers the routers will need to be provided in the order we want them to be displayed in our navigation bar so let's do that now it's going to be a list first we want to be the post router and we need to import this from the router.gr.dart file then we're going to add the user's router and lastly the settings router and we can make this whole list constant next we're going to set up the bottom navigation bar to create a bottom navigation bar we're going to use the bottom navigation builder argument so let's add it now [Music] bottom navigation builder and here we need to provide a callback which will return our bottom nav bar this callback just like the app bar builder gives us access to the context and a tabs router object which we will be using here you can return the bottom navigation bar widget which ships with flutter from here or your own custom bottom navigation as discussed we will be using the salomon bottom bar package here to quickly set up a pretty navbar if you're familiar with flutter's bottom navigation bar widget then setting up the solomon bottom bar will be very intuitive as their syntax is very similar so let's add the callback here and we get a context and a tabs router object which we will use here and now from here we want to return the salomon bottom bar and we're going to import it from the cell on bottom bar package now first let's add some margin to the snap bar to create some spacing around the navigation tabs and this is totally optional of course so we're going to add margin and edge insets dot symmetric and we're going to add some horizontal margin of 20 and a vertical margin of 40. awesome next we need to set the current index argument for the current navigation tab we will set this dynamically using the tabs router object so let's do this it's going to be current index and we're going to use tabs router dot active index then we need to set the ontap argument and the function we provide here needs to return the index of the navigation tab that was tapped by the user thanks to auto route that is already set up for us and we will provide this function using the tabs router object so taps router dot set active index and we don't need the parentheses here lastly we need to provide a list of salomon bottom bar item objects for every navigation tab in the navbar we will do this using the items argument first let's add the bar item for the post section so it's going to be salomon bottom bar item and here we're going to specify a selected color of colors.amber accent and an icon which will be icon of icons dot post underscore add f size 30. there we go then the last thing we're going to add here will be a title for this tab which is going to be a text widget that will say post and that's it now we can add the bottom bar item for the user section so it's going to be very similar so we can just copy this over and here we're going to change the color to colors dot blue 200 and the icon is going to be icons dots person and the title is going to say users then let's add the last bottom bar item for the settings section this one the selected color is going to be pink accent 100 and the icon is going to be icons.settings and the text is going to say settings and that's all there really is to it as you can see it was rather quick and easy of course there are a lot more customization options within an explorer so on your own time you can definitely go through all of the arguments you can specify and play around with all the possible configurations now let's finally run the app to see everything we've set up so far in action when you run the app you should see the posts page with the posts tab selected here we've got all of our post tiles and we can also see the app bar we created through the auto tab scaffold we can navigate through all of the tabs and they take us to the sections of the app that we specified when you tap on the bottom bar nav icons you will see an animation from unselected to selected that is the work of the solomon bottom bar amazing so far everything functions as expected the only thing we're missing is the ability to navigate to the user profile and the specific post pages when we select the user avatars and the post tiles let's take care of that now auto row provides many different methods you can use to navigate around the app we will stick to the implementation of the push method but you should check out the written tutorial through the link in the description where you can find the link to all of the other navigation methods provided by auto route let's head over to the postpage.dart file to configure the navigation there first before we can call the push method and specify the route we want to navigate to we need to get hold of the scoped router for the app you can do that by either calling autorouter.of context or use the provided extension and use the shorter context.router syntax we will use the extension so let's delete this and at the top let's import the autoroute package now let's scroll down to the on tile tap argument over here and in this function we will call the push method so let's delete these curly braces and here we're going to use the extension contacts dot router and now we can call the dot push and over here we're going to specify the route we want to push so in this case it will be the generated route the single post route and we need to import it from the router.gr.dart file the single post route over here expects a post id value so we will provide it dynamically using the post from our mock data and the loop i variable and this is the posts over here we have it stored in a variable all right so let's do that just like this posts and we're going to use the index the current index from this loop and dot id that's it pretty simple right now let's do the same for the users page and let's actually close this for now so let's go to the users page and over here we're going to again need to import the autorail package and now over here on the on avatar tab we're going to get the contacts.router and call the push method and over here we're going to provide the user profile route and once again this user profile route comes from our generated file so make sure you import that here as well and similarly to the post page this user profile route over here expects a user id so just like before in the single post page we're going to use this user's data and the current index from this loop to grab the id dynamically so it's going to be users i for the index dot id and that is really all but before we test the app as a whole i should point out that in this app we're navigating to the routes within the same router what if you wanted to navigate from say the user profile page to a specific post page and you can absolutely do that for the example scenario i just gave your code would look something like this let's just type it in a comment here it would be something like context that navigate to and then here you would provide the router where you want to navigate so if we're going from the user's profile to the single post route then it would be post's router because that's where we want to navigate and then inside the post router you would provide a children argument and to this argument you would provide the route which you want to navigate to so in this example would be single post route and then the single post route requires an id so you would just provide an id here and that's pretty much as simple as that let's actually just drop that down so you can see it better so yeah that's pretty much it it's quite simple so now let's restart the app and check everything out now that you've restarted the app the previous functionality we've set up and tested should still all be working and now let's select a post and as you can see we're taken to the corresponding single post page you can also see that a leading back button appeared over here if we tap on it we'll be taken to the main post page now let's check out the users page here if we select a user avatar we'll be taken to the corresponding user profile page and the back button appears here as well and that's it this concludes our tutorial hopefully you saw how little time and effort the salt took the auto route package was excellent at automating many parts of the routing configuration process and the salomon bottom bar was so easy and logical to implement you should now be able to take what you've learned here and add it to your very own project to go through this tutorial at your own pace once again and to get all the code check out the written tutorial available from the link in the description and if you are serious about becoming a great flutter developer who can build real apps for clients or at a job go to flutter.educat to get the top curated flutter news and resources aimed at improving your app development career over there you can also subscribe to the mailing list to get the best flutter 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 at risocoder we're determined to provide you with the best tutorials and resources so that you will become an in-demand flutter developer like the video if it helped you leave a comment and see you in the next video [Music] you

Channel: Reso Coder

Views: 15,101

Keywords: resocoder, tutorial, programming, code, programming tutorial, flutter, flutter tutorial, flutter bottom navigation bar, flutter bottom navigation bar routes, flutter bottom navigation bar animation, flutter nested routes, flutter navigation and routing, flutter navigator 2.0

Id: 9oH42_Axr3Q

Length: 46min 5sec (2765 seconds)

Published: Thu Sep 16 2021