How to create a Custom Floating Bottom Navigation Bar in Flutter

in this video we will be creating floating bottom navigation bar as shown in the simulator when you scroll down the screen the floating navigation bar will stick at the bottom center of the screen before we dive into the code don't forget to hit the Subscribe button in this tutorial we will be creating the floating bottom navigation bar step by step from scratch without using any packages so in my code I have created a simple flutter ad that has a stack viget and inside the stack viget there is a list view Builder viget to display the background text so the floating bottom navigation bar is fixed at bottom center position that's why we have to place it inside a stack wiet So Below the lville Builder vget is where we create the floating bottom navigation bar before creating the bottom navigation bar firstly let's create the required data to be inserted into the bottom navigation bar so as you can see in the simulator we needed two types of data which are icon data and the title text below the icon so now I will be creating a list of Icon data variable and a list of title string variable so in the future if you will require to add new item to the bottom navigation bar you just have to modify these two list without touching the code below next we also need an integer variable to check which item is selected and by default is the first item of the list so it's assigned to zero now we will start creating our floating bottom navigation bar firstly I will be creating the outline of the navigation bar which is a white rectangle container with border radius and box Shadow applied this margin value is where it provides the space around the floating navigation bar so it don't stick to the edge of the device now let's check it out in the simulator so here I forget to add the Nar vet to the stack widget so now as you can see in the simulator the rectangle container is aligned on the top of the stack in order to make it stick to the bottom center we have to wrap the NF bar wiget with align widget and set the alignment to bottom center so now it's aligned to bottom center now coming back to the nav bar widget we have finished the outline now we will start adding the icons and titles because the icon and titles are aligned horizontally so I will wrap them in into a row viget instead of creating the icons one by one I will use map function to map each icons and return the design widgets and then convert them back to list using two list method now let's create the design Widget the design widget includes an icon and a text Place vertically so I will wrap them in a column viget so for Icon viget it will be wrap inside a container vget with some margin customization and the icon data will be passed into the icon diget next I'm required to create a Boolean to check if the selected index is equal to the current index and the current index is the index of the Naf icon that is return this Boolean allows me to easily differentiate and customize different color for selected and unselected item now I check if is selected Boolean is true the icon will be in blue color else gray color now let's try it out in the simulator so as you can see the icon shows and the first icon is in blue color because selected index by default is zero next we have to add the text title below the icon so we just have to retrieve the text of the current index from the nav title list and place it into a text widget additionally we can also check the is selected Boolean and provide different text color to match the icon color now let's try it out in the simulator so there is an overflow error to solve this I will add single child scroll view viget to the column viget so now it shows perfectly without error however the nav bar is still not responsive yet to make it responsive we have to update the selected index value whenever user click on any of them so I will wrap a gasture detector vet and in the on T function I will update the selected index value with the tapped item index using Sate method now let's try out in the simulator so as you can see when I click on any of the item the color change responsively to the selected item and when we scroll the list below the nav bar remains at the position now we have successfully created a floating bottom navigation bar in flatter if you have any question feel free to comment below don't for forget to like the video and subscribe to our Channel see you in the next tutorial

Channel: AI with Flutter

Views: 3,939

Keywords: flutter floating bottom navigation bar, bottom navigation bar in flutter, flutter navigation bar, flutter tutorial for beginner, custom bottom navigation bar

Id: UI7YBCpxtL8

Length: 8min 8sec (488 seconds)

Published: Mon Mar 04 2024