Flutter Shape Maker | Auto-Generate Custom Paint Code | Flutter UI Design Tutorial

[Music] hey hello friends and welcome to retro portal studio this video is more of an announcement video for our new tool that i've created to help you with custom paint in flutter in one of my previous videos when i taught you to create a custom shaped bottom navigation bar it was a fairly complex shape and one thing that i realized from all the reviews for that video was that most of the times it is hard to detect reference points for a particular shape well this motivated me to create something that could ease out the process of creating a custom paint shape which brings us to today so in this video i'm announcing a tool called flutter shape maker which targets at reducing the complexity of creating custom shapes in flutter using custom paint by a huge margin so let's take a look at it before taking a look at the flutter shape maker let's take a look at this example diagram i had for one of my previous videos where i teach you to create a custom shaped bottom navigation bar although this is a relatively easy shape the process of detecting points for this is quite time consuming and this is why i had to plot them beforehand to make this process easy for you in this example we had to create a custom paint using all these points and the custom paint looked something like this so in the custom paint we had to plot each of the point on the path using quadratic bezier curve arc to point line two and other functions okay so what if i told you that you do not have to do this by yourself anymore so let's take a look at the flutter shape maker on which you can draw the shape and it will generate the custom painter code for you so this is your first look at the version one of the flutter shape maker you can see that the shape maker gives us with a canvas on which we can draw the points and once all the points are drawn we can close the shape what you can also do is you can select a point and then click on this handle button and will give the handles to this point and you can use these handles to manipulate the curves of this point once the shape is made you can click on this get code button and this will present you with the custom painter code that you can copy to your application in this example we'll create the bottom navigation bar from scratch but first let's take a look at each of the options given by fluttershapemaker you can take a look at this shapemaker at flutter-shapemaker.web.app this link is also in the description of this video so the very first thing that you need to take a look at when you open the fluttershape maker is this config option when you click on this you're presented with a dialog in this you need to put in the width and height of the canvas one thing you need to consider is you need to put in the width and height to maintain a particular aspect ratio for example if i had to create that bottom navigation bar i will start off with a width of 800 and a height of 200 and at this point if i save this you can see that the shape of the canvas changes and you can also check the dimensions at this bottom left corner of the window the reason why i chose these dimensions is because i need to maintain the aspect ratio of the bottom navigation bar with the help of this the generated code will be more responsive than otherwise in the config option the second option that you see is for the responsive code if i keep this responsive code on and i save the app when i create a shape and click on the get code button you can see that in the code the custom painter does not use the exact dimensions of the canvas instead it takes in the width and height and creates as responsive version of the path as possible so i don't think you'll ever need to switch to non-responsive version of the shape maker let's move to the second option so at this point if i zoom in the canvas you can see that we have three points on the screen now if i want to hide these points and take a more clear look at the shape i can click on this hide points button and you can take a clean look at the shape along with the points you can also toggle the visibility of this grid by using this button right here and you can check if you need to manipulate the points to make the shape more precise and this brings us to the next option to clear the canvas once you click on clear it will ask you for the confirmation and you can click on confirm to clear the canvas one thing i'd like to point out is that the first point that you plot on the canvas cannot be used as a control point that means it cannot have the handles and hence it cannot create any curves so it's always a good idea to use this point for a corner so what i'll do is i'll take the point and move it to the bottom left of the canvas the next thing that i'll do is i'll add another point and i'll focus on this point by clicking on the ctrl key and then moving the cursor to the point and then when i use the scroll wheel you can see that the zoom focuses on that particular point now i'll move this point to the end of the first block once this is done i'll zoom out of the canvas now in the same way i'll add points on this canvas without any curves to create the base for the bottom navigation bar we'll add the curves later so i'll add one point on the fifth block one point at the end of the sixth and on the opposite side and so on now i'll click on the very first point to close the path one thing you can notice is that the points that i've drawn on the screen are not quite precise what i can actually do is i can click on the point which selects the point and then i can move the point to whatever place i want i can also use the arrow keys for extra precision so i'll move to each point and make the points more precise to move to the next point i need to pan across the canvas for this what i can do is i can press on the space key and then click on the left mouse button and then move down and you can see that the canvas moves along the mouse when i reach the bottom point i can click on it to select it and then move this to the bottom right corner i'll zoom out of the canvas the next thing we can focus on is creating the curves so first let's create curves for these side edges i'll click on this point and move it down a bit now that the point is selected in the bottom left corner you can see that we have the option to add handles if i click on it you can see that we have two handles to control the curve of the point in this case i'll use this right handle and i'll move this to the top of this block with this you can see that as i adjust the handle the curve becomes more precise i'll do the same with the other points i'll take this point i'll move it down a bit and this time i'll add the handles using the shortcut and that is by using the h key i'll click on etch and you can see that the handles appear and this time i'll take the left handle and move it to the approximate location now what we need to do is we need to take a look at the arc between these two points i'll click on this point and click on it and you can see that we have the handles here also i'll move this handle to reset the curve and i'll take the right handle and move it down to create a smooth curve to the center i'll do the same to the other point i'll add the handles reset the right handle and move the left handle down one thing you need to take care of is you don't want these handles to go off the screen because once they go off you cannot control them to solve this situation what we can do is we can select the points and move it down a bit and with this the handles also come down now i'll reset the handle and i'll move the point back at this point we roughly have the shape of the bottom navigation bar and the only thing we need to do is we need to adjust the points to make them more precise i'll select the points and move it to the right using the arrow key and i also notice that the handle of this point is not exactly on the line so i'll take the handle and adjust it accordingly i'll do the same for the rest of the points now when we have the shape that we're happy with we can click on this get code button and we can take the code and paste it to the application i'll copy this code and move to the android studio in the android studio i have the uploaded from my previous tutorial in this we have the bnb custom painter and with the help of this bnb custom painter we're creating this bottom navigation bar what i'll do is i'll comment this bnb custom painter in place of this bnb custom painter i'll paste in the painter that we copied from the fluttershy maker and by default this is called rps custom painter now i'll go up to the custom paint and here instead of the bnb custom painter i'll put an rps custom painter i'll save the app and you can see that we have a blue outline for the bottom navigation bar to change this what we can do is we can move to the rps custom painter instead of the painting style of stroke we can change this to fill and we'll also change the color blue to white if i save the app now you can see that we have a nice bottom navigation bar to make the shape more precise i can spend a bit more time to create more smooth curves but since this is an introduction video we'll leave the bottom bar as is so i'll move back to the shape maker now you have seen that just how easy it is to create shapes using the flutter shape maker when you don't have to calculate the points yourself since we're creating shapes on our given dimensions the final code might need some tweaking when you move it to the application but even then this shape maker reduces the complexity of creating a shape to a huge margin since this is the version one of this app i expect you to use this application to create your own custom painter shapes and do let me know what improvements can be made in this application there are a lot more features that i have in mind and i'll try adding updates and fixes to this application every few days if you find this useful make sure to share this with your friends and colleagues and don't forget to follow me on twitter for more updates on this so hope you find this useful and if you do please make sure to hit the like and subscribe button and also consider supporting my work via the link in the description below see you next time peace you

Channel: RetroPortal Studio

Views: 67,921

Keywords: flutter, flutter tutorial, flutter app, flutter for beginners, flutter custom painter, flutter custom paint, flutter ui design, flutter tutorial android studio, flutter tutorial for beginners, flutter shape widget, flutter shape maker, flutter ui design tutorial, flutter mobile app development, retro portal studio, flutter app development, flutter widgets, flutter no code, no code app development, flutter no code app builder

Id: AnKgtKxRLX4

Length: 10min 1sec (601 seconds)

Published: Fri Oct 09 2020