Advanced Flutter Bottom Navigation with GoRouter | State-Preserving Tabs Tutorial

hey guys welcome to jobber Tech Channel in today's video we're gonna create a bottom navigation bar for the app that we're building in our last video we created our routing system using go router package so to make it consistent we'll utilize your router's feature to create our bottom navigation bar and if you're interested to check our last video where we demonstrate how to redirect a user to specific screen using the go router's redirect feature then I'll add the link to that video in the description below here's what we're aiming for our bottom navigation bar here on the home screen we have a list of users and if we click one of the users it navigates us to the user details screen in here in the chats tab under list of active chats we have let's say we reply to our friend Jose Rizal and after replying we want to come here at the account tab to edit our profile so while editing all the results are only being back so we navigated back to the chats tab and as you can see once we go back to our chats tab we are still at the same screen where we left off which means the state of this tab is preserved so after chatting we want to go back to our account tab to continue editing our profile and like how the chat stuff behaves this tab is also preserved so we didn't lose anything this kind of button navigation bar is what we want to achieve that preserves their states so that we won't lose anything when we suddenly navigate to another Tab while doing something important since we already have integrated go router into our app and already crafted our routing system in our last video then we can just simply go ahead and add this feature into our routing system but as a short breakup to those who are new to go router using go router to your app is pretty straightforward just simply add go router into your postpick.yaml file create an app router file or whatever file you want and then Define your go router and encapsulates all your routes inside it and lastly incorporate it into your app's main class just like this the only thing you need to take note here if you arrange your routes like this that your routes are all at the same level then all your route paths needs to start with forward slash because if you missed that go router will yell at you because it doesn't recognize your path and also you need to specify your initial location especially if your initial location is not your root route so that go router knows the initial route to render but if you wanna follow what I'm doing then I think it would be easier for you to follow along what I mostly do here is to create a single route which I call it root and then inside this root I will Define all the sub routes inside it the advantages of this kind of setup are you no longer need to refine your initial location because it's as clear as the Sunrise that go router has only a single route and then after setting your road path to forward slash you no longer need to start all your sub browse path with forward slash because they are already nested inside your road route and another reason why I'm doing this is because in most mobile application upon opening the app there is often a welcome screen before prompting users to sign up to get started so this road route serves as the welcome screen of our app but this is all my personal point of view you can design your routing system however you want and however you feel comfortable with so with all that in mind let's get started before we begin let's first visit go router's repository to guide us on how to do it as you can see this is an example they provided for us I will add the link to this in the description below for your reference they use the State political route that index is stuck and this returns a scaffold with number widget so let's take a look at this widget wow this widget is already toasted for us we can just simply copy paste it and then down here are the list of branches which means the list of tabs that we need for our bottom navigation bar so they're as simple as that this is pretty easy to do because it's already cooled up and ready to eat however before we dive into coding let's blueprint our game plan you only want our bottom navigation bar to our main screen so we shouldn't be seeing the bottom navigation bar while signing in so how can we do this well what we can do is to position our state for Shell route alongside we design in screen and other screens that don't need a button navigation bar so we'll Define it as one of their siblings this is the overall idea of how we'll craft this so I hope everything is clear and if there are confusions that need clarifications please feel free to write your questions in the comment section below so let's go ahead and code our Theory to see if it works as expected let's arrange this side by side so that will have a guide foreign let's just follow go router's example here now let's create this couple with navbar file and copy this class they cook up for us then let's create the list of branches since what we're aiming for is only three tabs let's create three branches then let's add the base route for each branch there you go everything seems to be in place take note that if you modify something inside your go router class you need to restart your app to make the changes take effect so let's go ahead and restart our app and check if it's working there you go we have now our bottom navigation in place but the problem is the icons and labels are using the defaults provided by go router so let's customize it inside this couple with number widget that we have copied to align it with our Target bottom navbar okay moment of truth let's save our bottom navigation preserves the state as expected there you go we got it correctly the next thing we need to test is if we're not getting the bottom navigation bar while signing in and only see the bottom navigation bar after we signed in so let's log out of our app okay perfect but there is one last nugget that I wanted to chew before we wrap up if you have browse specific to a tab let's say for instance you want the chat room screen to be encode to Richard stump the new how to Nest it within this branch in our case since we defined the chat room route outside the stateful share route and if we want to open the chest from this Home tab we will be able to do so without being redirected to the cat stop so let's try to rest our chat room route within our chat Branch for you to be able to see the difference okay let's refresh our app and try to access the chat room screen inside our Home tab there you go we can see that we are now redirected to this chats tab because our chat room route is nested inside this chat stub that's it for this video guys harnessing the power of go router we've built a dynamic and preserving button navigation system this structure ensures a fluid user experience retaining ongoing tasks and enhancing app navigation thank you so much for tuning in guys if this video helped you out please give it a big thumbs up share it with your fellow flutter Enthusiast and don't forget to hit the Subscribe button for more awesome content

Channel: JOBERTECH

Views: 7,243

Keywords: flutter, flutter tutorials, flutter tips, flutter development, flutter ui design, flutter ui, flutter widgets, mobile app development, code guide, flutter tips & tricks, joberTech, JoberTech, JOBERTECH Flutter, Flutter Tutorials, Mobile App Development, Coding Guide, Flutter UI Design, Flutter UI, Flutter Widgets, Flutter Tips & Tricks Bottom Navigation Bar, bottom navigation bar, GoRouter, go_router, go router, GoRouter Tutorial

Id: rxB4ena16Rk

Length: 11min 30sec (690 seconds)

Published: Mon Aug 21 2023