Flutter - Custom Shaped Bottom Navigation Bar (From Scratch) | Flutter UI Design Tutorial

[Music] hey hello friends and welcome to retro portal studio and in this video we're going to be taking a look at creating this custom shaped bottom navigation bar in flutter you can see that the shape of this navigation bar is quite complex and the main focus of this tutorial is to teach you how to create these shapes using custom paint and flutter once the shape is done we'll align the elements and this loading action button in the center of this bottom navigation bar so let's get started okay so right now i'm in a simple flutter app in which i just have this my home page this my home page is a stateful widget and in the build function of my home page i'm returning a scaffold the body of the scaffold is just a container and the background color of the scaffold is set to colors.white 10. so to create the base app the first thing that i'll do is i'll remove the container and instead i'll add a stack we need a stack here because we want to position the navigation bar to the bottom of the screen and we want to display the contents of the app behind the bottom navigation bar so in this stack i'll add the children property and in the children property i'll add a positioned widget in the positions i'll pass in the position of bottom to zero and left to zero now for the child i'll pass in a container and in the top of the build function i'll create a new variable of size and give it the value of mediaquery.ofcontext.size in the container i'll add the width property and here i'll pass in size dot width and for the height i'll give it a constant of 80. the next thing that we need to do is we need to add a child to this container and this child is also going to be a stack the reason we need a stack here is because we want to create a shape using custom paint and we want the shape to be behind the icons that we add to the bottom navigation bar so once again i'll add the children property and just to show something on the screen i'll add a color to the container and i'll set this color to colors.white so you can see that at this point we have a simple container with a height of 80 at the bottom of the screen with the help of this stack that we added right here now for the first child of the stack we need to add a custom paint and the first thing we'll do with this custom paint is give it a size and the size is going to be an instance of size class with the width of size dot width and a height of 80. next we'll add the painter property to this custom paint and for this we need to create our own custom painter for this i'll come down and here i'll create a new class and i'll name this bnb custom painter and this class will extend the custom painter base class you can see that the ide is indicating us to override two functions the first one is this paint function and the second one is this should repaint function for the sugary paint function i'll just simply return false and all the work that we need to do is going to be in this paint function first i'll come up to the custom paints and i'll pass in an instance of bnb custom painter now i'll move down to the bnb custom painter and let's take a look at how we can create that path for the bottom navigation bar but first we need to understand the concept of quadratic bezier curves so a quadratic bezier curve uses our reference point which in this case is p1 and it uses this reference point in creating an arc from p naught to p2 which are the points of source and destination respectively we'll be using this method of creating curves extensively for creating our bottom navigation bar you can read more about these curves in the article the link for which will be in the description of this video back to the code the first thing that i'll do in this paint function is create a paint object and i'll name this paint i'll put this equal to a new instance of paint i'll set its property of color to colors dot white along with this again using the double dot operator i'll set the style and put it equal to painting style dot fill next i'll create a new instance of path and i'll set the initial point of this path using the move to function and i'll set it to 0 comma 20 where 0 is for x and 20 is for y for what i'm about to do next it will be a good idea if we take a look at the graphic that i've just created to make you understand in this illustration w is the width and h is the height and you can see that we have these black dots in the four corners that is zero zero w0 wh and zero h these four dots represent the container in which we have the bottom navigation bar along with this you can see that we have this orange point that is at 1 2 4 6 8 and 10. these points are joined together by the path that we're going to create in the custom paint other than these orange points we're going to use these green points which are the reference points for our quadratic bezier curves so let's see how this is going to be useful we're going to start the path from this point of 0 comma 20 that is the first point and we're going to create a quadratic bezier curve to this point 2 that is at 0.35 percent of the width and a height of zero and the reference point for this quadratic bezier curve is going to be at point twenty percent of the width and a height of zero when we'll move from point two to point four we're gonna use a reference point for this quadratic bezier curve and that will be at point forty percent of the width and a height of zero when the path reaches at point four we're going to create an arc from point four to point six and from point six to eight we're gonna again use the quadratic bezier curve function with a reference point at point sixty percent of the width and height of zero from point eight to ten we're going to create a quadratic bezier curve again and this time the reference point will be at point eighty percent of the width and a height of zero when creating custom paths like this it is always a great idea to create an illustration with the help of which you can estimate the points and the functions that you will use to create the path and once that is done it will be easy for you to code them in the custom paint back in the code let's create a path by using this illustration down below first thing i'll do is i'll use the canvas and draw path on it using the draw path function and give it the path and paint object now whatever changes we make to the path we'll be able to see them in the emulator on the right hand side one thing you can notice is that we have the path set to the initial point of 0 20 using this move to function so the next thing that we have to do is we have to draw a quadratic bezier curve from point zero comma twenty two point thirty five percent of the width and height of zero and the reference point for that will be this point three that is point twenty percent of the width and a height of zero so let's use the path and create a quadratic bezier curve and in this quadratic bezier curve the point x1 y1 should be of the reference point for this i'll pass in size dot width into point 20 and for the y i'll pass in zero and for the x2 and y2 i'll pass on the width of size dot width into 0.35 and a height of zero that is this point right here from here we again need to draw a quadratic bezier curve and this time the reference point will be the point five that is point forty percent of the width and height of zero so i'll pass in those values and the x two and y two point will be this point four and the value for this is point forty percent of the width and a height of twenty so i'll pass in size dot width into point forty and height of twenty now we need to draw an arc from point four to point six and here we need to pass an offset for the end of the arc for this i'll give it an instance of offset and for the x value i'll pass in size dot width into 0.60 and a height of 20. along with this i'll also pass in a radius and for this i'll use the radius class and use the circular constructor and i'll pass in a value of 10.0 along with the radius we also need to pass in a clockwise property and set it to false at this point if i save the app you can see that there is no change in the bottom bar and the reason for this is that in the container we have passed in the color of white so i'll remove this and save the app again and you can see that there is a weird shape in the bottom bar at this point so i'll come back to the paint function and i'll continue with the path using this illustration below so once we have drawn the arc we again need to create a quadratic bezier curve from point six to point eight and then point eight to point ten using the reference points of seven and 9 respectively so instead of writing them on screen i'll just skip the part so once we have all the quadratic curves in place we are now at the point 10 in the illustration now what we need to do is we need to create simple lines that is using path dot line two and now we need to move from point ten to w comma h and for this we can simply pass in size dot width and size dot height from this we can draw a line to point zero comma size dot height that is this point right here and in the end we can use path dot close function to close the path at this point if i save the app you can see that we have the shape ready to be used in the bottom navigation bar one thing you can do is before drawing the path you can also use canvas dot draw shadow and in this function you need to pass in the path for this you can create your own path or you can use the same path here we also need to pass in the color so we'll pass in colors.black for the elevation i'll pass in five and for the transparent occluder i'll just pass in true as the background for this scaffold is black so you won't be able to notice this shadow right here now as the custom painter is ready we can move back to the stack where we have the custom paint and we have passed in the painter of bnb custom painter for the second child of the stack we can add a floating action button that we can show at the center of the bottom navigation bar for this i'll simply add the center widget and in this i'll pass in a child a floating action button for the on pressed i'll pass in an empty function and along with the on pressed i'll add in a property of background color and pass in the color of colors.orange for the child of the floating action button i'll add an icon and for the icon i'll use icons dot shopping basket i'll also set the elevation to 0.1 and at this point if i save the app you can see that the floating action button is at the center of the bottom navigation bar but this is not the correct position what we can do here is we can simply add the height vector to the center widget and i can set its value to 0.6 now the floating action button is exactly at the position that we want it to be what this height factor does is that it takes the vector and it multiplies that by the height of the child and uses the resulting height as the height of the center widget to learn more about this height vector you can check out my tutorial on center widget in the flutter widget essential series next thing we can do is we can add a third child to the stack and this time this is going to be a container i'll set the width of the container to size dot width and the height of the container will be 80. for the child of the container i'll add in a row because we want all the icons to be aligned horizontally in the bottom navigation bar for the row i'll add the children property and in this i'll add an icon button for the icon in the icon button i'll pass in an icon widget and i'll use icons.home and for the on press property i'll pass in an empty function i'll duplicate this icon button three more times and for the second button i'll change the icon to restaurant menu bookmark and notifications at this point if i save the app you can see that all the icons are aligned to the left side of the bottom navigation bar for this what we can simply do is we can add the main access alignment to the row and for this i can set the value of main access alignment dot space evenly if i save the app you can see that the icons are now aligned evenly in the bottom navigation bar but the second and third icon are not at the position that we want them to be for this what we can simply do is after the second icon we can add a container and we can set its width to size dot width into point 20. if i save the app now you can see that all the icons are now aligned in the way that we want and with this we have this bottom navigation bar design ready to use so in this tutorial you have seen that just by using some simple tips and tricks we can create complex paths like this and use the powerful custom paint widget for complex designs i hope you find this video useful and if you do please make sure to hit the like and subscribe button and also consider supporting me via the links in the description below see you next time peace

Channel: RetroPortal Studio

Views: 76,272

Keywords: flutter, flutter ui, flutter tutorial, flutter tutorial for beginners, flutter bottom navigation bar, flutter custom painter, flutter custom paint, flutter bottom navigation bar animation, flutter ui design tutorial, flutter ui design, flutter mobile app development, flutter android studio, flutter for beginners, flutter and dart, retro portal studio, flutter app development, flutter custom bottom navigation bar, flutter custom navigation bar, flutter navigation bar

Id: 1ToqYMSnNhA

Length: 12min 40sec (760 seconds)

Published: Fri Sep 25 2020