Flutter: Custom Clipper
Customize UI with Custom Clipper to make an attractive app
Flutter comes with a different widget like ClipRect, ClipRRect, and ClipOval which are useful to create custom shapes but we can only create few shapes using that, while we can create any type of shapes using the ClipPath.
In this article, I will talk about creating a custom path using CustomClipper and use it in ClipPath. Let’s start.
ClipPath
ClipPath is used to create a very custom widget of any shape. ClipPath has a clipper property that requires a custom clipper.
To create a custom clipper, you need to create a class that extends CustomClipper<Path> and must override two methods.
The getClip method is called whenever the custom clip needs to be updated and this method has a Size parameter that gives widget height and width values.
The shouldReclip method is called when a new instance of the class is provided. If the new instance has different information than the old one, then the method should return true, otherwise, it should return false.
We need to draw a path into CustomClipper. Creating a path is not very difficult but you do need a basic understanding of the graphic.
As shown in the above figure, each point in the graphic represents using (x,y) coordinate. x represents a horizontal axis and y represents the vertical axis. The drawing path starts from the top-left corner and it is (0,0).
Let’s start by looking at the methods of the path. At the end, you will able to create custom shapes.
lineTo
This method is used to draw a line segment from the current point to the given point.
As shown in the above figure (a), path start from point p1(0,0) by default. Now add a new line to p2(0, h) and then p3(w, h).
We do not need to add a line from endpoint p3 to start point p1, it will draw by default.
you can see the result in figure (b) with the pink color triangle.
moveTo
This method used to moves a path to a specific point in the drawing.
As shown in the above figure, the starting point is moved from (0,0) to p1(w/2,0).
quadraticBezierTo
This method is used to create a quadratic bezier curve.
As shown in the above figure, we can draw a quadratic bezier curve using the control point and endpoint. P0 is a starting point, P1 is the control point and p2 is the endpoint.
As shown in the above figure (a), Curve draw at point p2(0,h) to p3(w,h) using control point c(w/2, h/2).
cubicTo
This method is used to create a cubic curve by specifying 2 control points and endpoint.
The above image is an illustration of the different cubic curves with different locations of control points.
As shown in figure (a), the Cubic curve is drawn between start point p2 and endpoint p3 using control points c1 and c2.
arcToPoint
This method is used to draw the arc from the starting point to the specified point. We can customize the arc by setting a radius, clockwise/anti-clockwise direction.
There is an elliptical and circular type of radius to draw the arc. As shown in the above figure, elliptical radius draw using (x,y) value and circular radius draw using radius(R).
As shown above figure (a), the path starts from p1 point. The first arc draws from start point p2 to endpoint p3 and radius is not specified so by default is zero, so it looks like a line. The second arc draws from start point p4 to endpoint p5 using circular radius and direction is clockwise (direction is clockwise by default). The third arc draws from start point p6 to endpoint p7 using circular radius and direction is anti-clockwise. The fourth arc draws from start point p8 to endpoint p1 using an elliptical radius.
arcTo
This method is used to draw an arc by specifying Rect, start angle, and sweep(end) angle as a radian.
The above image is for basic information about the radian angle. It starts from 0 PI (PI value is 3.14) to 2 PI.
There are few ways to draw Rect like from Points, from a circle, from LTRB(Left, Top, Right, Bottom), and from LTWH (Left, Top, Width, Height). In the above figure (a), all types of the arc are drawn with different start angle.
addRect
This method is used to add rectangles in the path. There are some different methods to create Rect like fromPoints, fromLTWH, fromCircle, fromLTRB, and fromCircle.
addRRect
This method is used to add a rectangle with a round corner. We can make a round corner to all sides or a specific side.
addOval
This method is used to add oval in the path. Same as addRect, this method required the Rect parameter.
addPolygon
This method is used to add to a polygon into the path by specifying multiple points.
addPath
The method is used to add another subpath in the main path by specifying offset. Offset is the origin point for other paths from where coordinate is calculated.
As shown in the above figure (a), Two paths are drawn, Path 1 is the main path, and path 2 is added in path 1. Path 2 draw respective to offset (w/2) so it considers as the origin with (0,0) and all other point draw respective to offset point.
relativeLineTo
This method is the same as lineTo but the line point is calculated from the last point of the path.
As shown in figure (a), line p1p2 is draw using relativeLineTo so is draws respect to last point p1. As simple if you want to draw point respect to origin (0,0) then you can do like, final point p2(x,y) = (p1.x + p2.x, p1.y +p2.y)
Note: relativeMoveTo, relativeQuadraticBezierTo, relativeArcToPoint, relativeCubicTo is work the same as respectively to moveTo, quadraticBezierTo, arcToPoint, cubicTo but the only difference is that all points are draw according to last point.
You get full source code from the git repository.
Note: These all methods are also useful with CustomPaint.
Using Custom Clipper, I have created different Chat Bubbles. You can check out from the flutter_chat_bubble plugin.
I hope it will help to understand the basics of path drawing and to create cool shapes.
