Flutter Custom Path Tutorial || Part 1 (A Path for Clip)

hello and welcome back my name is Afzal and you're watching channel codeX today we are going to start a new series where I'll create a flutter application from scratch and I'll share experience with you guys I got this idea from a Dribble project for which I'll put the link in description and there's a YouTube tutorial available for same Despicable Me theme now that's being said let's get started and create a custom path which is our agenda of this tutorial. let's add an AppBar and Centered body, in that will define a container and I will give a decoration with linear gradient.. you can define whatever color you want and let's say it starts from bottom left and aims at top right so let's give some height and get to the container I'll say as zero point eight and zero point six for height now let's wrap the container with clip path and inside clip path will use a clipper that will be our custom taper so let's say background clipper is our custom clipper will extend with custom clipper and use a path for clipping you can use rectangle oval and there are multiple options for but for this tutorial we'll stick with path for should repaint we'll say yes and we'll define a path which is going to be actual rendering object for our clipping okay let's define a path and return now when we run the application we see there's nothing because our path is empty there are multiple methods available inside path from which you can draw whatever you want say for example move to line 2 cubic 2 and there's so many so basically it's a part this part is a standard and you can use it in SVG drawing and this is the same methods available in flutter but all this starts from top left so over 0 0 will be always on top left its draw our custom path first we'll draw a line from 0 0 to the height of this container it is a normal line then we will draw a line from this point to the right corner of the container so now we have two lines which made this this triangle now we will draw another line which is starting from the corner to the top so now we have three lines defined and which completed the path that's more initial point to somewhere about 33% of the height of this container always remember that the initial point is 0 0 and with move 2 you can jump the point now let's modify this line instead of drawing until bottom of the container will draw less than 50 pixel so that we can start our quadratic curve so to draw quadratic Bezier we need two points x1 y1 and x2 y2 so this p1 and p2 we have to define we have p0 already that is the last point and they'll define p1 p2 p1 is a controller point and p2 is a destination point so for controller point we will define as the bottom of the container that is 0 pixel from eggs and height of the container and for p2 let's say 50 pixel away on x-axis and height of the container so now with this we should have a curve like this effect so now we are going to use this value for roundness of the corners so let's define a variable so that we can easily modify later and let's now draw another line so instead of drawing till the right point right point of the container we'll draw a line which is 50 points less than the width of container so now we have to define the quadratic visit again here for 0.1 we'll use right corner of the container which is size dot width and size dot height will get and for destination point we will use size dot width and 50 pixel less than height so then we'll get something like this now we need one more curve over here and one more at the end after line so let's do the same quickly there's nothing more than calculating the coordinates of the point X and y-axis and you need to be aware about the methods available for path like move to line to cubic to and there are more the best way to practice you can do on paper or some screen and if you want to get this code you can directly download and copy from github to achieve the same result you can always play with the number if to get the desire output so in this tutorial we learnt about custom path using which you can draw SVG drawings you can draw custom shapes whatever you want and it's pretty standard across all the platforms so in our next tutorial we'll see how we can navigate from our custom path to the detail page that's it for this video subscribe if you haven't do like this video do comment and tell feedback about this video and this series and suggest me what you want to see in flutter so that I'll create a video accordingly thank you so much for watching guys see you in the next video

Channel: CodeX

Views: 46,041

Keywords: flutter, animation, custom, path, clipper, android, ios, design, ui, how to, tutorial, flutter tutorial, flutter sdk, flutter ui, custom clippers, flutter custom widget, codex, clip path, path clipper

Id: yi5s-iGskY0

Length: 6min 1sec (361 seconds)

Published: Sat Nov 16 2019