Curved Bottom Navigation Bar in Flutter | Flutter Tutorial | Bottom Navigation Bar

hello everyone in this tutorial we will see how to create a curve navigation bar in fter let us see the demonstration now when I press this list icon list icon is display on the screen with the index as one similarly when I press the contact mail icon it display on the screen with the index S2 similarly for phone icon now when I press go to the page of index zero button it show the plus icon when the index is zero let us see how we can create this type of navigation bar hello everyone I have already created a project navigation bar in filter with the help of flter create command in this project we have a class bottom Navar which is a stateful widget now in this class we have a scap fold visit and in the app bar we have a title as curve navigation bar in flter now we need a plug-in so for this open the Google Chrome and type c navigation bar in fletter now just follow the first link now come to the installing section just copy this dependency Now navigate to the pub spec. EML file now paste this dependency just below the cupo icons and press contrl + S button now open the terminal and in the output we will see exit code to zero it means we have successfully import the plugin now now copy this import statement and paste it here now let us create a bottom navigation bar so for this type bottom bottom navigation bar now we want a curve navigation bar now in the Cur navigation bar we have a key now uh in this we have to pass the global key so let us create a global key so Global key cover navigation bar State now give a reference as uh cover navigation key is equal to Global key now just pass this reference in this key now we have to give the index value so give index now uh set the initial value as zero Now set the height of the navigation bar as 65.0 now uh give the item you want to display on the navigation bar so give item now uh let us try to give two items here now uh first item will be icon icons start add now give the size as 33 and color color says blue now again give the second icon uh second icon will be icons. list and size is 33 and color is blue now uh give the color of the navigation bar which is colors. white now give the button background color which is colors do white now background color P let start blue Now set the animation curve now curves now we have number of Animation we can choose anyone from them so let us choose the curves. e in out animation okay we can also set the animation duration so animation duration duration in a millisecond Let It Be 600 now if a user press uh the icon present on the navigation bar so we have to set the on time method it will takes the index value now we have to give the set State method let us create a variable which hold the initial value of the index in page and the initial value of int page is zero now now we have to assign the index value in in page variable so from this we will know about which index is tabbed by the user so now we have to give the let index hold the index value and set it to true now in the body now in the body give container visit and in the container set the color colors start blue and in the child of the container give a center viget and in the sh of the center visit give a column visit and in the column we should give main access alignment main access alignment do center now in the children's suppose if a user press uh one of the icon present in the navigation bar so uh if the index or we can say if the int page value is equal is equal to zero it means this value will be display on the scen now if a int page value is equal to is equal to 1 it means this icon will be display on the screen it means user press pressed this icon Now set the color as well color as black and the size 135 and color as black now let us run the app so basically we are seeing plus icon here so when I press this list icon button list icon is display on the screen now we want a index value right here so for give text and fetch the current index value from the in page variable and convert it into the string now give the text scale factor S5 now let us see the result just or reload it now index value is shown here when I press this press this button this icon is display as well as the index value now we can add more than one icon here so so let us try to add a contact mail icon then call then pump identity now in the children if the end page value is store it means this icon will be display on the screen with the color as black now if the in page value is three means this icon will be display on the screen with the color as black and if the value is four it means this icon will be display on the screen with the color as black and the size should be 135 135 now let us H in the program again now if I click on this icon shows the icon and with the uh index value second third four we can also change the color of the icon as uh black it must be you can set it as white black then white now we can see here now create a elevated button through which we can go to the index Zero from an index so so create an elevated button in the child as text wiet go to the page of zero index now in onpress method now in the elevated button create a final variable up with the reference F Nar State and in this set the phage value as zero now let us run the program now suppose I am on this index now when I press go to the page of index zero button I directly went to the index Z

Channel: TechVantageX

Views: 739

Keywords: flutter, flutter tutorial, tutorials, flutter navigation bar, flutter bottom navigation bar example, flutter ui, flutter curved navigation bar, flutter animated bottom navigation bar, flutter curved navigation animation, flutter navigation bar example, flutter navigation animation, flutter fluid navigation animation, curved navigation bar flutter change page, flutter bottom navigation bar height, curved bottom navigation bar flutter, curvedbottomnavbar, animated bottom nav bar

Id: OHC25QwiNb0

Length: 11min 58sec (718 seconds)

Published: Mon Dec 11 2023