Build a Custom Bottom Navigation in Flutter? (Android & IOS)

in this video you will learn how to create a custom bottom navigation with a centered Floating Action button and flatter so let me show you a Zumo first open the app you will see here a custom bottom navigation with a centered Floating Action button you will see here tab one when you click on tab two it shows tab two when you click on tab three it shows tab three when you click on toab four it shows toab four when you click on the button it will go to another page click on tab two and come back to tab one is save this state of tab one when you double click on Tab one it will redirect you to the first page of tab one so let's start coding hello everyone Welcome to our Channel we just have four file main main screen Navar nav model inside the main screen we just have a simple app bar go to the main file set the dim and primary color to Green entirely then run the app to see the changes then go to the nav model file here we just have a nav model class import the material here declare the page property inside the nav model class and also declare a global key variable called nav key add the Constructor for nav model inside the Constructor parameters called require this. page and also required this. nav key then go to nav bar file here we just have a slatless widget declare a page index property here and also declare an on Tab pause the properties to the Constructor then inside the container widget set the margin inside the child create a bottom app bar set the elevation to zero inside the child create a widget called clip rect set the Border radius to 10 inside the child create a container widget set the H to 60 set the color to Green inside child create a row widget for navigation item create a item widget set the icon selected and on top properties return an expanded widget inside child create an ANL widget pause the ontap inside child create an icon widget pause the icon if the tab is selected set the color to white otherwise set this color create enough item widget inside the children of R wiget pause the icon pause the page index equal to zero and pause on top create another item for message create enough item for notification and finally create enough item for profile save this file and go to the main screen remove the simple app bar import the Navar and nav model file inside the Min screen file then declare this keys for navigator estate declare the selected Tab and initialize it to zero then declare the items inser theet estate meod initialize the items for each nav model pause the page and nav key then create a tab page and pause the tab number and then create another page and pause the tab number inside the built meod wrap this cold widget inside the will pop scope widget will pop scope widget has an event called onwell pop inside the onwell pop check if the selected tab now key. current state. can pop pop the page and return the future. value false and else return the future. value through inside this scold widget we have bottom navigation bar in bottom navigation bar pause the nav bar pause the selected tab to page index call the ontap meod inside the ontap meod check if the index is equal to select tab pop the page to the first page and else pause the index to select T inside this scaold widget we have a parameter called body we use index stack to save the state of each tab inside the index stack pause the selected tab to index property inside the children pause the items and call do map inside map function call Navigator inside Navigator pause the nav key to the key then call on generate ential routes return the material page route and page. Page save the file and run to see the changes you will see here a custom bottom navigation we have on Tab one click on tab two you see here tab two click on tab three click on Tab four when you click on go to page and click on tab two when you come back on Tab one you see it saves this state when you click on Tab one it will redirect you to the first page off top let's add The Floating Action button here inside this scaffold widget we have a property called Floating Action button inside the floating action button create a container widget set the container head to 64 and also weight to 64 set a little margin from top inside child create Floating Action button widget set the background color to white set the elevation to zero call the unpress function and printed add button pressed inside the child create an icon widget pause the add icon set the color to green and set the shape to round it set the border colar to green and set the Border radius to 100 run the app to see the changes you will see here a floating action button and want it to center with this property you can set the floating action button to the center let's run it to see the changes now you can see the changes let's set a little space here go to the nav bar with this widget you can set a little space between two navigation item run it to see the changes now you see the changes and it looks beautiful thanks for watching if you want to support us please like our video if you have any questions let us know in the comment below

Channel: Flutter Cool

Views: 7,110

Keywords: build custom bottom navigation bar, build modern custom bottom navigation, create custom bottom navigation, create custom bottom navigation bar, create modern bottom navigation, flutter bottom navigation, flutter bottom navigation bar, flutter bottom navigation bar animation, flutter centered floating action button, flutter custom bottom navigation, flutter custom bottom navigation bar, flutter modern bottom navigation, flutter modern bottom navigation bar, navigation in flutter

Id: TtXER1_Cq3E

Length: 6min 26sec (386 seconds)

Published: Sun Oct 08 2023