Bottom Navigation Bar using Bloc Pattern in Flutter | Flutter State Management | Bloc Pattern

foreign [Music] welcome back again to another Friday tutorial and in this session we will look into how to implement bottom navigation bar with the help of block architecture in a flutter app and as you can see here we have a simple example of the same we have a bottom navigation bar with five items and you will also be able to see that as I move over each item in the bottom navigation bar the corresponding text widget which is placed here also changes accordingly just for this tutorial to keep it simple we have a single text widget in each of the page but you can extend it to end a set of UI component which can be scattered in each pages so this bottom navigation bar as well as text feature which is rendered in each page is based upon the block architecture logic hope you got a better understanding of what we are about to discuss in this video with this idea and without any further delay let's directly jump in the coding part and start with the implementation process first let's start by creating a flatter project and listening the project is bottom navigation bar with block here we got the default counter app let's get rid of these commands Also let's remove this home page from this main.file now what we have here is a simple main.file all right to get started let's head over to the postback and try adding two packages for Block pattern just make sure you add these two dependencies in a perspect and after adding these two dependencies let's head over to the main.f file here in the live folder let's try to create another folder called presentation wherein all the UI components will go inside it and inside the presentation is create another folder called screens inside which we have the landing page so this landing page is going to hold the entire bottom navigation bar items inside the presentation folder let's create another folder called routes parent inside the routes folder we create under the dot file called generated routes here we are going to make use of the generated routes for performing the navigation and here inside the generated routes let's start by creating a class called route generator within which we create a method called generate route here with the help of the settings.name we make use of this statement and try to pass in the routes accordingly and the initial route is going to point to the landing page so as for now we are not going to make use of the navigation here so let's leave it empty and for the default statement let's point to the error route the error route is nothing but a basic scaffold that contracts a simple app bar as well as the body that contains the error text okay now we just need to return the landing page here which will be creating shortly okay so therefore let's head over to the landing page and try to create a simple stateless widget class now after creating a stateless widget class now let's turn our Focus to the block pattern therefore let's create another folder called business logic inside the lib folder and inside this business logic is where all the block pattern and the block files will go inside let's right click on this folder and you have an option to create a new blog and if you don't see this option to create new blog you just need to add this extension called Block in your vs code so make sure you have this extension being installed in your vs code only then you have an option to create new blog just by right clicking on the place where you need to create it all right let's create it and for it we need to name the blog let's name it as landing page you see that successfully generated landing page block and if you expand this folder you have three different files one is for States and rather for events and third is going to be the block now let me rename this folder from just block to landing page block and starting with the states we have the initial State and before that let's create a variable a final variable called tab index because as we are going to deal with the indexes in the bottom navigation bar we need to have an tab index in each state okay so let's create a Constructor for the same and this is going to be the named argument now followed by this case let's head over to the events here inside the event we need to create a event called tab change even because upon each tab change we need to notify the block button to switch Pages accordingly so let's create an event called tab change which extends landing page event and inside which we need to create the final variable called tab index just the same way create a Constructor for the same which is going to be the named argument now moving over to the block here inside the landing page initial let's set the initial tab index is zero because whenever the page is getting loaded for the very first time the first index of that button navigation bar should be loaded so we specify the default tab index is 0 here and let's get rid of this here we need to check for the condition if event is tab change which means that user is changing the tabs in the bottom navigation bar if so then we need to emit the same landing page in cell but this time instead of specifying it as 0 we need to specify it with the value or with the index which the user has tapped so that tab index we can get from the event with the help of dot operator we can access the tab index here now we have completed setting up the entire block Logic for the bottom navigation bar so let's turn our Focus to we haven't specified the home page therefore inside the main app we are going to make use of generated routes where the initial route is going to be the single slash and followed by which we need to specify the routes on generated and on generate route you need to make use of this method generate route which is present in the route generator class therefore here inside the on generate road we need to pass the route generator and specify generator this completes the main.f file therefore the entry point of our flat trap will be the main data file here it say the main dot file we have the route generator and here inside the route generator the initial route is going to point to the landing page which we have already created which is going to be in this carefulness of now first let's try to create an instance for landing page block which will be using the process of navigation therefore here inside the instill Road let's return the material paste route variant inside the Builder we need to make use of the block provider.value and the value is going to be the instance of the landing page block and the child for this Builder is going to be the landing page so this is how you will navigate to an entirely new page with the help of the block architecture now we have successfully navigated to the landing page with the helper block architecture but this is not completed yet here inside the landing page we have empty scaffold therefore we need to create the bottom navigation bar as well as ADD listeners for the tab change events and update the states of the block accordingly here inside the landing page let's get rid of the empty scaffold let's first start by listing down all the bottom navigation bar items and that is going to be assigned to the variable bottom nav items all right and inside this list we will specify the entire set of five items which is going to be placed inside the bottom navigation bar starting with the home followed by the category and third is going to be the search favorites and the final bottom navigation bar item is going to be the card for by which let's define each screens that is going to be rendered for each bottom navigation bar item and that is going to be placed inside this bottom nav screens list and for this tutorial I will be having a simple text widget but you can have a stateless state for widget here now after defining this button navigation bar item as well as the screens for the bottom navigation bar let's head over to the landing page and here instead of the scaffold let's try to specify block on cement and the block consumer is going to accept the block listener as well as the block Builder right now we are going to have only one state which is going to be the landing page initial State So when you say this Builder let's return the scaffold wherein for the scaffold let's provide the body as the bottom navigation bar screen because of the element method and pass in the tab index and based upon the tab index the corresponding test widget will be rendered in the body followed by the body let's create the bottom navigation bar here the bottom navigation bar is going to accept the item which is going to the bottom navigation bar items that we have already defined at the very top so this is the bottom navigation bar items followed by visitor we need to set the current index and for the current index we need to specify the tab index which is emitted by the block followed by the current index let's specify few coloring styles for the selected as well as unselected item and finally for the on top callback you need to trigger the event which is tab change and pass in the current index and if you restart this application you will notice that our bottom navigation bar is able to switch Pages based upon the on Tab and we also get the corresponding text widget being rendered here in this page as well so this is typically how you can Implement bottom navigation bar with the help of block architecture so as a quick summary let me head back to the main data file wherein inside the main Adder file we have made use of the generated routes the insert points to the landing page here and say the landing page we have specified the bottom navigation screens as well as the bottom navigation bar items separately inside each list and followed by which inside the landing page class we need to make this as a block consumer and inside the Builder we need to return the scaffold wiring say the body we specified the element which is placed in the tab index followed by which we have the bottom navigation bar wherein inside the ontap Callback we need to call the tab change even and here inside the block if the event is going to be the tab change we emit the landing page initial stage is the only state which we have right now but the change is that instead of passing the tab index is 0 this time we'll pass the tab index with the index which the user has selected all right so this is typically how the block organizer works well that's it guys that's how you can Implement bottom navigation bar with the help of block architecture in Australia hope you guys found this tutorial useful if you do so consider subscribing and I will see you again in the next video [Music] thank you

Channel: vijaycreations

Views: 6,859

Keywords: flutter, dart, bloc, bloc pattern, bottom navigation bar using bloc in flutter, flutter bottom navigation bar, flutter bottom navigation bar using flutter, bottom navigation bar, bloc architecture in flutter, flutter bloc pattern, bottom nav using flutter, bottom nav using bloc in flutter, flutter bloc, BLOC, bottom navigation bar in flutter, bottom navigation in flutter, flutter navigations, flutter bloc tutorials, bloc series, flutter bloc series, flutter bloc videos, widgets, apps

Id: U_exF_4Frkw

Length: 10min 46sec (646 seconds)

Published: Fri Jun 09 2023