Curved Bottom Nav Bar📱Flutter Tutorial ♡

[Music] yo what up guys welcome back to another quick flutter tutorial in this one i'm just going to show you a custom package to spice up your bottom navigation bar so this kind of liquid curved effect is what we're going to build today so i'll link this package below so you guys can take a closer look at it if you want but i can show you real quick how to implement it because it's pretty easy so this is the package name with the version number and i've opened up a brand new flutter project and just said that we're on the same page in my main function i'm just running my app which is a material app which is looking at this home page which is a stateful widget and i'm just returning a blank scaffold so this is where we'll begin and so if you go to your pubspec.yaml let's go to the dependencies and add that package in and sorry save it and make sure that that's run and then let's close this file and inside the scaffold so usually we would fill out this bottom navigation bar with another widget called a bottom navigation bar but since we've imported a custom version if you start typing curved navigation bar there we go there it is and let's fill out these items so in these items let's just put some basic icons here so that we can see what this looks like so i'm just going to use a home let's use a heart icon and let's use a settings icon cool so it looks like there it is now i think this is going to require us to change some things up so it looks more appropriate so if you look under the curve navigation bar you can see there's a couple of colors we can specify so one tip i'll give you is the background color let's see how make it d purple then that's the color there so you want to make the background color the same as the background color in the scaffold so that if i just show you here so this kind of matches up like this right so you want the two background colors to match up and then if you want this white color to change you can specify the actual color to say maybe the same color but a lighter shade right so you guys can choose whatever color you want um and also one thing i would recommend is the animation duration if you hover over this you can see it's currently 600 milliseconds there so if you want you can change this and so before i change that you can see this is the speed right now but if you want to change that up from milliseconds let's make it twice as fast so yeah that's one of the things that you might want to change and of course if you want to change the individual icons you can do that like change the colors to be white and so depending on the kind of color scheme you have you want to make sure these colors line up pretty well but yeah other than the aesthetics of it the important thing that hopefully if you've used any bottom navigation bars before is this on tap so if you look at this guy you can see it gives you an integer there so if i just show you real quick it's going to tell us about a particular index and that's just corresponding to the tab that we're um corresponding to the tab that we're currently selecting right to display the different pages so this index if i just show you real quick if i just print what the index is telling us so you can see if i just go up you can see like it tells you the indexes so that's zero one two so you can use that to navigate to the different pages cool i have a another bottom navigation bar package i want to show you guys after this video so look forward to that one and let me know what you think about this particular look is there something that you guys would want to use or nah but that's it for this one so let me know if you have any problems but other than that thanks for watching and i'll catch you guys in the next one later [Music]

Channel: Mitch Koko

Views: 77,780

Keywords: flutter, coding, programming, ui, uidesign, ios, android, tutorials, flutter tutorials

Id: HrFc7W7MxzE

Length: 5min 8sec (308 seconds)

Published: Sat Apr 09 2022