Flutter ClipPath (Bezier Curves)

how to create custom shaped widgets in flutter around the widget that you want to clip wrap a clip pass widget next we define how this widget should be clipped inside of a separate class this class extends a custom clipper and overwrites two more methods our first design consists of five points we start by returning a pass object that always starts at the top left corner from the first point we create a straight line to the second point using the line two method here only the y-coordinate changes to the height for now we skip the curve and move to the fourth point instead here only the x-coordinate changes by the width the fifth point is at the y-coordinate 0 and finally we create a straight line to the first point by closing the path next we replace this straight line by a curve inside the bcr2 method we keep the 0.4 for the destination point and before it we need to add a control point the x-coordinate is at 50 of the width and the y-coordinate at 100 distance from the bottom notice the curve is going towards the control point however it is never reaching this point also in case you want to change the position of the first point then use the move to method as a result the close method will create a straight line from the last point to the new first point alternatively use the shape maker to create easily shapes simply click and locate the points on the canvas for a selected point you can click on handle with this you can adjust the curve on the right side and on the left side of the point after you're done click on get code and then copy the path of the shape replace it with the pass in your custom clipper and in your app look at the curve that you have created [Music] you

Channel: HeyFlutter․com

Views: 38,828

Keywords: bezier curve, clip path, clippath, clipper, customclipper, custompaint, custompainter, flutter, flutter bezier, flutter bezier curves, flutter clip path, flutter clip path generator, flutter clippath, flutter clippath bezier, flutter curves, flutter custom clipper, flutter custom paint, flutter custom painter tutorial, flutter custom widget, flutter custompaint, flutter path generator, flutter tutorial, flutter ui, flutter widgets, path, path clipper

Id: xuatM4pZkNk

Length: 2min 0sec (120 seconds)

Published: Tue Mar 15 2022