Flutter Tutorial - NEW Material You Navigation Bar | The New Way [2021] Flutter Navigation Bar

how to create the new material u navigation bar in flutter that was introduced with android 12 to navigate between pages in your flutter app in general material u offers a lot of modern innovative changes to the existing material design if you're new here subscribe to my channel and make sure to watch this video till the end let's get started within our scaffold bottom navigation bar property and here we create our new navigation bar widget here inside the navigation bar items are called destinations and you need to create then a navigation destination with an icon and a label if you now hot reload you will get first of all an error because you need to put your at least two navigation destinations inside so let's also add here some more and every time i put a different icon and a different label inside and with this we have here these four items inside of our navigation bar and next we also want to customize our navigation bar therefore you can simply wrap around your navigation bar the navigation bar seam widget and your inside of the seam data you can then basically define the indicator color and with this we have here a different background color for our selected item that we have defined with this color next you can customize the textile therefore you have here this label textile property and your inside you put then basically your textile inside as a result the text under our items is now bigger within your navigation bar you can also set the height of your navigation bar and with this i will shrink right now here a bit the navigation bar height and secondly you can also change the background color of your navigation bar so i put it here to this reddish color and with this we have a different color right now if i click on another navigation bar item then it is not working and this is what we want to change therefore you can basically supply here the selected index and if i set it for example to one then this item is here selected if you set it to two then the spaces is selected and if i set it to zero then the first item is selected let's also make it more dynamic by creating an index field inside of our state and secondly within our navigation bar we also implement the on destination selected property with this we get every time the index if we change here our navigation bar item and we simply want to store then this index inside of our state also make sure that you have here the set state wrapped around so that our ui gets updated therefore you also need to have here a stateful widget instead of a stateless widget alright now we are storing the index of our navigation bar item inside of our state and secondly we also want to make use of this index therefore i create here a new property screens and inside we put simply all the different pages inside for each of our navigation bar items so here we have four navigation bar items therefore i also put here four screens inside and now we can display these screens inside of our scaffold body property therefore i access here the screens property and with the help of the index we get then the right screen let's also try it out if i change here between the tabs you see that the screen here at the top is always changing and this is basically because we have implemented the screens within our body property and of course you can also exchange here your screens with real screens so i have created here different pages that i have also created inside of my folder structure and here we have then every time a page with a scaffold and then you can basically put here the content inside that should be displayed instead make sure to click on hot restart and with this we have here different pages for each of our tabs next you can define for your selected item every time a different icon than the unselected state therefore let's go to our navigation bar destinations and inside of one navigation destination you can define then the selected icon and with this if our item is now selected we have here a different icon instead and if it is not selected then we display the normal icon that we have defined with this one let's also create the selected item for each of our other navigation destination items and with this you have here this awesome looking navigation bar where we have every time a different selected icon within your navigation bar you also have the label behavior property where you can for example hide all of your labels and with this we have no text under our icons or you can also change it to only show selected and with this only the selected item has here a label and finally within your navigation bar you can also define the animation duration which i set here right now to 3 seconds as a result if i change the navigation bar item you see that this animation is much slower and by the way if you want to get here this whole source code of this example application then you can get it with the first link in the description and with the second link you can get access to my flutter courses where i teach you how you can become a better and more efficient developer if you like this video make sure to subscribe to my youtube channel [Music] you

Channel: Johannes Milke

Views: 9,008

Keywords: android 12, bottom navigation, bottom navigation bar, bottom navigation flutter, flutter, flutter app, flutter beginner tutorial, flutter bottom navigation, flutter material you navigation bar, flutter mobile app, flutter navigation, flutter navigation bar, flutter tutorial, flutter ui, flutter ui design, flutter widgets, google flutter, material design, material widget flutter, material you design, material you flutter, navigation bar flutter

Id: 2emB2VFrRnA

Length: 5min 30sec (330 seconds)

Published: Tue Sep 28 2021