Flutter Bottom Navigation Bar | Animated Navigation Bar | Curved Navigation Bar Example

[Music] hey hello friends and welcome to this new flutter tutorial and this we're going to be taking a look at adding this fluid navigation bar in flutter bottom navigation bar so this is really having a cool looking animation when we shift from one tab to another so if we try to achieve this from scratch it's completely possible if someone has made it so can we but instead of making it from scratch we're gonna use a package called curved navigation bar in flutter that is this one curb navigation bar and it's currently at the version point 3.1 as I'm making this tutorial and here is an easy to use code here which you can add to your flutter app so I'm just going to go to my flutter a project that I've created for this tutorial that is called flutter app and I have added this package the curved navigation bar inside the pub spec ml file with a negation bar I haven't mentioned the the version number here it just goes through it so curb navigation bar and in the main door dart file I have this material app that is a stateful widget this is the default app that is given to you I have just altered it a little bit I have added the scaffold because for using the curtain navigation bar you need to add a scaffold to your activity so that you get the property of the bottom navigation bar okay so I have this app bar here inside the scaffold I have added the app bar with the background color of white and a title as you can see here and let me just refresh the page it's the previous app okay so here is the navigation bar with the flutter app title and the color of black and the body is having a container with the height and width of the complete page height and width using the media query and a simple column you can just add a simple text here but yeah it's just the default app so what we need to do now is once we have added the package in the pub spec tml file what we need to do now is add the property to the scaffold that is the bottom navigation bar that is given to you by flutter itself you know using the using the material dart so so once you have added this curb navigation bar package here now what we can do is we can add curved navigation bar here and as soon as I click it here the curved navigation bar is imported up in the main door door file you can see that the current navigation bar slash curved navigation bar dart so I come back here so the the to necessary properties that you need to pass to this curved navigation bar in order for it to work is an area of items with each of them of type widget so I'm gonna pass some widgets to it right now let me just pass two icons for it in the starting will pass three I'll pass an icon that has the icons so I can start verified user for one I'll give it a size of 20 and a color of colors dot black for now okay I'll just copy this code I'll just add a comma copy this code and add two more icons I'll change that to I'll choose the second one to add and the third one to list okay so other than the items array what we need to do what we need to add to this curve navigation bar is the on tap property okay so okay the curve navigation bar is here I need to add the on tap property so what on tap property does is it gives us a it gives us an index value for which we can map certain actions that we need to do for example I'll just add a function here which takes in an index and we perform a body here right now we don't have anything to work for I'll just pass in a message AB debug print current index is and will pass in the index that's given to you in the arguments so these are the two necessary things that you have to pass your care of navigation bar to have it working or else there is no function of it so I'll just run this app again and voila you can see that the navigation bar is added so by default as you can see that the animation is quite slow it's it's really slow and all the three buttons that you just added for the verified user the ad and the list are here we have these circular backgrounds with each icon and we have a color of white for the curved navigation bar and a background color of blue okay so and as soon as we click the buttons let me go back down to this run menu you can see that when I click on the button we get a lot here in the Run Run tab okay so what we need to do now is we want to match the background color with the color of the container as I've passed here up in the container in the body so the property that that lets you change the color of the bottom navigation bar is actually there are three properties so one is the color the other one is background color and the third one is button background color so the color itself changed changes the color of this bottom navigation bar that is this white portion okay so you can see that if I put a color here colors dot Brown and I pass in the background color of colors dots orange and button background cloth colors dot green so this is not really a good matching but I'll just show it to you yeah you can see that the color property the color the front color of the bottom navigation bar the background color changes the background color that is shown to you by this curve here in the bottom navigation bar and the button background color changes the material color of the icon icons background basically so what we need to do now is to make it more appealing we'll set the color property to white as we have the action bar up here we'll change that to white and for the background color I'll change that to deep orange as we have of the container the orange and for the button background color I'll change that to white okay so I'll run that again yeah it's more more suitable as you can say and one thing more that the height of the bottom navigation bar is too much for my liking so there there comes another property that is the height property of the curb navigation bar so for the high-level pass and 50 I think that'll be fine because the icon I have given 22 the icon size and the height of 50 is gonna be enough so I'll just run the app and yeah yeah it's all flying it's it's looking cool and you can add more icons to it I'll just add three for now or I'll just go with the five no no issues I'll just add two more I'll name it favorite and for the fifth icon I'll name that to be exit to app that shows us the logout I can there's yeah so when I run the app again yeah you can see that oh I need to restart the app there are some issues most of the times but yeah okay so the app is working again and now we have to look into the animation of that office so when I click on the icon it takes a lot of time to change the icon here so the curb navigation bar navigation bar gives us with two properties regarding the animation that is the animation duration we can pass in a duration here with the milliseconds minutes or whatever you like I'll just pass in 200 milliseconds and an animation curve so for the animation curve I'm going to add so the animation curve when you take a hint of it animation curve it takes an a curved object ok sorry it takes some curve so for the animation curve I'll add curves curves dots okay well we're gonna use is bounce in and out let's try this one I'll just restart at the app and okay yeah it's looking good bounce in and out and the duration is quite nice too you want to click it it just shifts yeah it's just in a really cool way so yeah this is fine so right now what we can do is we have added color to the bottom navigation bar we have added items we have added animation duration and animation curve and on tap method that gives you the current index off the curb navigation bar which you can store in the state of the widget and then further change the layouts based on this on tap method so other than this there there is one more thing that you can do with the curve navigation bar that is you can have a pre-selected bottom bottom navigation bar icon that is what if you want to have this center button selected by default when the person runs your app the first time so for that we have that we have an index property sorry we have this index property here so I'll just pass in two here for the third icon zero one two three and four for the five items so I'll just pass in two and when I run the app again you can see that the center icon is selected by default okay so yeah this is the simplest way up adding this curved navigation bar although you can make it from scratch but this is not really I don't really recommend moreover this package it's quite light to make your app bulky so it's quite a simple package and it helps you a lot with the properties okay so moreover what you can do is you can go into the curve navigation bar if you want to know the details of it it's completely accessible it's quite a simple packet so you don't really have much here so you can check out all the properties for example when we click on the icon okay I need to close this one you can see that all the properties here curb navigation bar state and in the state you can see that we have this material icon here which takes in the icon and sets the background color and everything button background color the property that you applied to the widget itself the color property and material type of circle you can change the material type basically so that you change the icon shape here so yeah this is a simple widget if you want to customize it further you can check this code out and add it to your own widget and do all kinds of stuff here so yeah I think this tutorial will help you a lot if you learn anything - do not forget to hit the like button and the subscribe button if you like my tutorial I hope you learned a lot and if you have any more suggestions for tutorials please let me know in the comment section below and yeah it's it's ok for now see you guys later peace

Channel: RetroPortal Studio

Views: 97,246

Keywords: flutter navigation bar, flutter navigation animation, flutter curved navigation bar, flutter curved navigation animation, flutter fluid navigation animation, flutter navigation bar example, flutter bottom navigation bar, flutter bottom navigation bar example, flutter bottom navigation bar routes, flutter bottom navigation, flutter tutorial for beginners, flutter beginner tutorial, flutter course

Id: qeeiDuRihyE

Length: 12min 38sec (758 seconds)

Published: Sun Oct 13 2019