Bottom Navigation Bar in Flutter | Material 3 | Flutter eCommerce App 2023

assalam alikum and welcome back to coding with t today we are going to learn how to create bottom navigation bar in flutter we are officially going to start our section three which is the ucommerce design so first of all let's quickly have a look what we are going to create okay so our application is running this is the onboarding screen we have already created when the user is going to click on this sign in it will be redirected to our main application which is the e-commerce application so first thing we going to create is the bottom navigation bar down below you can see we have options let's say I'm going to add some items in the card and the wish list and then we have a profile then we have home store so we have four properties or the four menus in the bottom navigation bar so this is what we are going to create in today's tutorial the plus point of this is that uh this should be reusable so when I'm going to click on this store you can see the bottom navigation bar is not changing but the rest of the screen is being changed so this is what we are going to learn in today's tutorial so without wasting time let's get started okay if you are following the series we are creating flter e-commerce application and we are officially going to start our e-commerce design which is a section three in the section one we learn how to configure everything once everything is configured and set up themes constants and bunch of other things if you're new you can watch the previous videos or you can get the code from the description below link is provided and in the section two we learn how to create onboarding splash screen login sign up forget password reset password and verify email screens so in today's tutorial let's get started with the bottom navigation [Music] bar let's open Andro studio and you can see we are inside the project of our e-commerce application you can get this complete code from the link provided in the description below okay for today's tutorial for the bottom navigation bar we are going to create a navigation bar which can be used on multiple screens so when we going to click on any of the item on the navigation bar it should not switch and reset it state so for that we are not going to create that class inside any of these folders I'm considering it as a global class so you can again go and go to Features inside the shop you can create that in the shop but uh I'm going to create it inside the slip folder so right click create a new file name and navigation menu dot you can also name it home menu do do as well import material do do create a stateless class STL hit enter name a navigation menu because uh we need to create navigation bar navigation bar property is inside the scaffold so we need to use this scaffold property and inside the scaffold we have the property which is bottom navigation bar the widget we're going to use is navigation bar widget now when you hover over it and you can see we have to provide required arguments which is destinations destinations are basically the screens that we are going to use now inside the destinations as we are going to require four screens when you hover over this destination you can see it requires a list of widgets so it can be any widget it can be stess state for or simple fidget so let me create four containers inside containers let's add color we have navigation bar with four different colors so first of all to see what we are creating we have to copy this navigation menu and we have to go to the features authentication screens and inside the login when user is going to click on this login button in the login form downlo user is going to click on this button we want to redirect instead of going to the home screen or dashboard screen this menu will decide that which screen should appear at first let me just call the navigation menu using get. 2 and inside again we have to call our function and paste the navigation menu import it over here add a constant sign now let's run our application as well okay so our application is running let's go to the login screen when we're going to click on this sign in okay you can see we have four options or you can see the four menus are created with the four different colors so to change them into a menu we have to wrap it with a navigation destination property and it has icon and a label as icon we using the home icon and icons X is basically the library we have already added a package in the pubs spec so let me also add a constant over here let's just copy this and paste it four times and now we have Home Store wish list and profile of the navigation destination now let's save it and you can see we have four options currently they are not being selected so nothing to worried about out okay now to show the body right after this navigation bar inside the sca for when we going to create a body we have to provide a widget as we know that body requires a simple widget so to provide a widget either that widget should be the home widget store wish list or profile widget based on its selection let's say the home is selected then we have to call the home screen over here if store is selected then we have to pass the store screen and same goes for all the menus now currently we don't won't have any screens so let me just create a container and first of all let's go to the navigation bar Properties or the design then we going to use the back end technique to apply this navigation the first thing we going to provide is a height of 80 if you're good with that height leave it as it is and I don't want elevation so I will make it zero and in here let's say this is the selected index so let me add selected index as zero or maybe one currently by default it's zero let's save the code and this time you can see the store which is the one index is selected same let me make it two and you can see the wish list is selected when we're going to again make it zero this zero index is selected so by this way we know that we have to change the selected index and for that when user is going to click on the tab we have this function which will be triggered on destination selected it is going to pass or give us an Index this index means that which index user is selected either it's 0 1 2 and 3 now we have to assign this index to selected Index right so to do that we have to create a stateful widget because whenever this home screen store or wish list is going to be selected right over here we have to create a variable and that variable should be updated based on this index whenever it is being called so we have to call the set state so to avoid using stateful classes we are going to use the gex State Management so that's why I'm going to create another class right over here so we can easily manage this navigation menu because it has no other use so let me create a new class name a navigation controller and it is going to extend as getex controller now inside this class let's create a final variable of type integer which is going to retain the selected index and by default it value is zero but in here at the top you can see we are using a stateless widget not a stateful widget and we are using the gex controller so to convert things to The gex Domain we have to convert this zero to make it OBS and let's just change this integer and wrap it with the RX in type now this variable which is again an integer variable but it is wrapped with the getex type of RX value right so now this OB PS variable is the Observer variable which will be observed by the widget previously you can see when we call the set State method set State basically redraw everything whenever the set state is being called let's say when on destination selected at over here is going to be pressed or when we talk about this menu and I'm going to press this Store icon that on destination selected method will be triggered and it is going to call the set State and everything will be redrawn on the screen and we will see that store is now selected So to avoid redrawing and slowing the speed of our application we use the getex power whenever this state is going to be changed this zero index is going to be changed it is going to only redraw whatever is inside this OBX so first of all uh let's create another thing which is the screens so I'll walk you through through with the screens as well don't worry about it these are the list of fidgets that we have to select each time when the specific index is selected I currently don't have screens already created so I have created simple containers with the green purple orange and blue so we have four containers or you can rather say we have four screens which are the straight screens because these are also the widgets so everything is a widget in the flutter so that's why I created four widgets currently being tweeted as a screen okay first thing at the top as a selected index now we are going to change it and we're going to call this navigation controller at the top to create the instance of the navigation controller instead of using the new keyword we use get.put keyword and the new instance of this navigation controller will be created so now we can easily use whatever inside this navigation controller using this controller property so the first of all we have to assign the selected index so we will use control dot selected index do value so why this value means selected index is a RX type of integer right now to get exactly integer value we have to use this value property now it's exactly pointing to this zero instead of this OBS okay the next thing we want to do is whenever there is a change inside this own destination selected we want to assign this current index to this selected index so to do that again I have to call this controller do selected index do value is equal to the index or whatever index being selected will be passed over here and this index will be assigned to our selected index okay so far uh we are here that selected index will be automatically assigned whenever user is going to click on any of the index it will be passed to this selected index and selected index is assigned to this Index this means that we are completed with the logic but how we are going to redraw our screen so to redraw the screen we have to wrap this navigation bar with the another widget which is OBX and as a child we are going to create a function which is pointing to this wiget whatever wiget which is wrapping this function so we are going to create a wiget which is OBX and instead of passing it as a column we are going to create a function and next to this function we are going to call this navigation bar right now whenever there is a change inside this OBS variable it is automatically going to detect that where is this OBS there must be an OBS inside this OBX otherwise it's going to throw an error so whenever there is an observer being observed by this Observer this is the Observer and this is what is being observed so whenever there is change inside the selected index change is coming from here whenever there is change it will automatically redraw the state for for us now let me just save it let's click the store and you can see the store is selected let's select the wish list profile whenever I'm going to change this it's automatically being selected right now we want to also change the body based on that selection so body is over here currently it was only container and you can see we have screens at the bottom now we want to convert it like this we have to call our controller dot screens which screen we want to show want to show the selected index screen again call the controller do selected index is zero then show the first screen selected index is one then show the second screen and that's it now we're going to save it and by default you can see when the profile is selected profile is the last one and its index is 3 012 3 and at the third index we have blue so blue is by default selected now let's save it again and this time you can see it turn to the orange uh only when I'm going to refresh it from here otherwise it's not going to change so again the OBX is currently applied at the menu so we also have to apply this OBX on the body so let's press Alt Enter wrap it with a widget and again it will be OBX as a child we are going to call a function a single line function now again let's save the code this time when we are going to change the screen you can see the menu is also being changed now later on when we are going to create our screens so we will start replacing these screens let's say at the start we are going to create the home screen so we'll replace the home screen over here then store will be at the second then we have the wish list and then at the then we have a setting screens or the profile okay here I created a folder which is the home folder and inside I created a Mt home do dot so in here we can easily now replace this first one with the home screen and now let's save it so when the home screen will be pressed currently it's showing the green because we have to restart let's click on this sign in and currently you can see we have a simple empty white screen and rest we have three containers but whenever the home is going to be selected it's showing the home screen so by this way we can easily customize this I first have to add the dark board because whenever we are going to talk about the colors or the custom colors we have to make sure that light and dark modes are both being Target so in the helper functions we have a function which is a dark mode simply calling theme do of context with the brightness and if the brightness is dark we have a dark mode true using that we can easily add both colors and in here you can see I have added a background color and indicator color so background color if the dark mode is selected or if the currently screen is on the dark mode background will be black otherwise background is going to be white and same for the the indicator color if dark mode is on it will be white with opacity 0.1 and otherwise it's a black with opacity 0.1 now let's save it and you can see we we are able to change these colors as well let me switch it to the dark mode and you can see the bottom navigation is working perfectly fine so that's it for today's tutorial I hope you learn something new if you have anything in your mind if you have any question if you're confused with any of the topic or any of the point you can ask me down below in the comments you can Again download the code from the link description below and you can also go to the coding m.com and directly download the code from there once again thank you for watching take care Allah

Channel: Coding With T

Views: 9,114

Keywords: bottom navigation bar flutter, flutter bottom navigation bar, flutter bottom navigation bar 2023, bottom navigation bar flutter 2023, flutter bottomnavigationbar, bottom navigation flutter, flutter material 3, flutter material 3 bottom navigation bar, material 3 bottom navigation flutter, material 3 design, flutter bottom menu, bottom menu flutter, bottom nav bar in flutter, flutter bottom nav bar, persistent bottom navbar flutter, flutter bottom navigation bar with routes

Id: qdO1hwg2HY8

Length: 15min 44sec (944 seconds)

Published: Wed Oct 11 2023