Keep Bottom Navigation Bar across Page Route [Flutter]

the bottom navigational bar in flat Oh works perfectly but when you navigate from any of the original pages on the main scaffold your navigation bar disappears it literally just goes out of existence you look at apps like Instagram and we can see that a navigational bar does not go away when we switch screens well today's your lucky day because I have three solutions for this my favorite solution is the beautiful DIY solution created by developer named Andrew by Zotoh on medium I hope I pronounced a name right the normal bottom navigation bar works like you expect we have a single page has different screens and when we click on the different icons we switch to the different screens the problem with this is since all the screens count as a single page on our main stack when we push a new page to any of the screens it covers the entire page and this is not what we want what Android did was create a normal bottom navigation bar in which all the sections are not just no more widgets but our navigators on their own in that sense even though we push a new page to any of the screens we are now pushed into the main stack we are pushed into one of the navigators which is a different navigator stack from our main stack in general all we are doing is having multiple navigation stacks instead of having one main one and since we have different stacks we keep our main page alive we create the scaffold and we set the bottom navigation bars with icons before we continue with setting up the widget let us set up some variables and functions we create a string that represents our current page an integer that tells us our current index a list of strings that would serve as our page keys and the map object of strings and global keys creates a function that takes a string as the key of the current page and an integer of its index we then set the state of the current page to be - string parameter and our select index to our index parameter we go back to our bottom navigation bar and we set the current index parameter to select index and the on top function should trigger our select stop function where we pass our current key and the index of that page all that remains is to add the body to a scaffold like I said and we need our children to be navigators we can create a navigator class that takes the global key of Navigator state and a string that represents that key in the built function we can return a navigator with the key property set to the key class variable and for the on generates remote function we can just return a matter or page route of the current widget we are on to know the current widget we can just query which key we have to conclude this while we press the bottom navigation bar we are not keeping our pages alive this means the ListView would always reset its scroll offset so prevent us we set up a stack of widgets for our main scaffold body and each child widgets would be an offstage widget so now we have an off state widget which as a navigator and the Navigator has the correct page we create a function that returns and offset widgets but takes a string key and that is it this works perfectly fine but now we have two more issues one is that when we click on the back button on Android it kicks us off the app and the second one is if we're out so another page clicking on the navigation bar icon for that page does not take us back to the first stack of that screen to fix the first issue we wrap our scaffold in a real pop scope widget and on the wheel pop function we need to check if pop in the current screen who take us off the app we base our decision making of this boolean as for the other issue we need to change what happens in our select add function all we need to do is check if our current tab is the same as the clicked on tab if it is we pop all the pages to reach the bottom of the stack else we set the state of our current tab as usual to be honest starting this code from the medium post made the logic way more difficult than it is nevertheless this is amazing if you want to read the article check the link in the description below I also have my code there because there are some routines I decided to live out of this video another solution is to use the custom navigator package from the dart package website we add the package to our project install it and import it in our project use the custom scaffold widgets from the package which is imported create the scaffold under the custom scaffold widgets and add the bottom navigation bar with navigation for every page you want under the scaffold widget you can now add the list of pages in the children property of the custom scaffold widget this is all we have to do while this is super easy to implement I cannot seem to find a way to keep the state of my pages which is important in applications most applications with the bottom navbar would have a ListView and will need to keep the state this does not work because the package does not take a single widget as a child we need a list of children which means every time we pick an icon we push a new child to the screen and we do not keep the previous state we just keep changing the page tag and we do not preserve the old versions if you know a way to actually preserve the state of previous pages using this package please leave a comment below before my last solution I just want to let you guys know that I now stream consistently on Twitch my twitch name is kicked by kick I play video games and I program when I feel the project is fun and for streaming follow my channel thank you the last proposed solution I see a lot is to use the Cupertino scaffold and it is very easy to use to do this we just import the Cupertino package we create the stateless widget give it any name and return the Cupertino tab scaffold widgets as for the top bar properties of the scaffold we give it a coppertino table bar and assign different got some navigation bar items we set the street statement the tab builder in the scaffold and for each index we return the Cupertino top view of the screen we want and that is pretty much it we can navigate from one page to another and we still keep our bottom navigation this works great but as you can imagine on Android you still get the iOS aesthetic from the capacitor package regardless we can still use the material page around to push a new page to achieve some Android aesthetics as you can see three different methods that work greatly my favorite is toad the first one because I am in control of every single thing that's the end of the video everyone do not forget to leave a comment below like the video share and please subscribe to the channel stay safe everyone

Channel: Kiibati

Views: 76,295

Keywords: flutter, android, ios, Bottom Navigation Bar, Navigation Bar, kiibati, dart

Id: qj7jcuU2Z10

Length: 7min 15sec (435 seconds)

Published: Wed Jun 10 2020