CustomClipper in Flutter

CustomClipper means clipping of the images in a particular fashion. It provides us with an option for clipping our widgets as per our choice just with some basic knowledge of  lines and curves. There are various types of in-built clippers present in Flutter.

Now, there is a package available for custom clipper, you can go to https://pub.dev/packages/flutter_custom_clippers

Here, I will be starting with the basics of clipping, without using the package.

ClipOval

It is used in order to clip the widget in oval shape. On changing the size of child widget, the oval size will also change and if the height and width of the widget are equal, the shape formed will be a circle.

Before Clipping –

After Clipping the result will be-

ClipRect

It is used to clip the widget in rectangular shape. In order to get the results of clipping in a better way, we have applied ClipRect over the Container widget and also specified the height and width factor for it.

Before Clipping-

After Clipping the result will be-

ClipRRect

ClipRRect is used when we want to clip the edges or we can say that it is used to make the edges rounded. In ClipRRect, ‘R’ stands for  “Rounded” and the edges can be made rounded with the property called as borderRadius which is of type BorderRadius which specifies the radius.

Before clipping –

After clipping the result will be –

Clip Path

ClipPath is the one which is used for clipping out the widgets in customized fashion. We can clip the widgets as per our requirement.

It has two properties : clipper and clipBehaviour. clipper takes a CustomClipper which defines how the path will be clipped and in clipBehaviour property , the content will be clipped according to this option.

In CustomClipper, we have two methods one is getClip(Size size) which returns a path, here we define how we will clip the widget and another one is shouldReclip(CustomClipper<Path> oldClipper) which returns a bool value, it gets called whenever a new instance of the custom clipper delegate class is provided to the clip object, or any time that a new clip object is created with a new instance of the custom painter delegate class. If the new instance is different from the old one, then it should return true otherwise false.

lineTo is the method to draw a line from the current point to the point provided in the method.

quadraticBezierTo methods is the method used to draw curves on the path. It draws BezierCurves with the help of control points.

 

Before Clipping –

After Clipping the result will be-

Conclusion

So, CustomClipper provides us a way of making our UIDesign more attractive and can also be customized.I hope this blog will help you out in learning about CustomClipper and will also help you in starting with its implementation.

Thank you