🔥 Curved Bottom Navigation Bar in Flutter? (Android & IOS)

in this video you will learn how to create a curve bottom navigation and flatter so let me show you a demo first open the app you will see here a bottom navigation with carved ship you are on the first tep click on tab two you will see here the content will change also click on tab three click on Tab four click on Tab five you will see here it shows the index of each tab so let's start coding hello everyone Welcome to our Channel first go to the pop aspect. file insert the C navigation bar package click on pop gate to get the package in our project once it's done go to the homepage inside the homepage file we just have a homepage class that extends from stess widget import the curve navigation bar package at the top of your file inside the built method we just return this carold inside this cold we have bottom navigation bar property create a c navigation ation bar widget set the background color to transparent set the button background color to colors. Green set the color to colors. Green we have an animation duration when changing the bottom navigation item and set to 300 milliseconds create a list of widgets and assign it to the items property create an icon widget set the home icon set the size to 26 set the color to colors. white create another icon for message create another icon for adding an item create another icon for notifications and create another icon for profile save the file and run it to see the changes you'll see here a curved bottom navigation bar with animation let's show a dynamic content for each of bottom navigation item inside carved navigation bar widget we have on top property let's change the stateless widget to a stateful widget inside the untap function we we can call set state to change the state of widget declare and initialize a variable for index and set to zero assign the index to page variable inside body create a center widget then create a text widget and chose the page index inside the text widget create a text style widget set the font size to 100 and set the font WID to bolt save the file and run it to see the changes now you can see the page index click on another tab you can see the page index will change thanks for watching if you want to support us hit the like button and if you have any questions let us know in the comment below

Channel: Flutter Cool

Views: 1,512

Keywords: build curved bottom navigation bar, build modern custom bottom navigation, create curved bottom navigation bar, create modern bottom navigation, flutter bottom navigation, flutter bottom navigation bar, flutter bottom navigation bar animation, flutter custom bottom navigation, flutter custom bottom navigation bar, flutter modern bottom navigation, flutter modern bottom navigation bar, curved navigation in flutter

Id: BCmgJY0zxBE

Length: 2min 40sec (160 seconds)

Published: Sun Feb 11 2024