Custom Clipping in Flutter

Today we are taking a look at how to implement a custom shape. How we can make a custom clipper with straight lines, Bezier curve in Flutter.

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

What is Clipper?

A custom clipper can be used to clip the widget into any desired shape. In Flutter, it can be done easily thanks to built-in clippers such as ClipOval, ClipRect, ClipRRect, and ClipPath. To achieve this custom shape you need to define what is the path which you need to clip to make your UI awesome.

ClipPath is used to create a very custom widget like a widget that has a wave border or quadratic border. To make something like that, you should make your custom clipper.

Some Built-in Clipping Widgets:

Let’s take a look at some Built-in clipping widgets and see what each one provides. Each of these has a defined behavior.

1. ClipRect

You can use to clip a rectangular area out of a your_pretty_widget(). For example, you could use ClipRect if you only wanted a desirable rectangular part of a your_pretty_widget();

2.ClipRRect:

With the help of ClipRRect widget, you can clip the image with rounded corners. You can’t shape into an image with rounded corners with Container widget decoration properties.

3. ClipOval

ClipOval creates an oval using the widget’s bounding box, If the width and height of the widget are equal, the shape will be a circle. Same as I mentioned above you can’t shape into an image with an oval shape with Container widget decoration properties.

4. ClipPath

if mentioned above ClipRect, ClipRRect or ClipOval doesn’t help you to achieve your desired shape of your_pretty_widget(), ClipPath is used to create a very custom desired shape.

Suppose if you want to implement shape like a star, heart basically you desired custom shape. This can be achieved by using Custom Clipping.

Custom Clipping

Let’s move to the coding part :

ClipPath(
   clipper: ChatBackgroundClipper(),
   child: your_pretty_widget();
 )

To make your custom clip, you should make your own class, and make it extends CustomClipperand then override two methods.

• getClip() it returns a path given that the rendered object being clipped is of the given size.
• shouldReclip() it returns a boolean that determines if your widget needs to be reclipped or not

class CustomClipperImage extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    var path = Path();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return bool;
  } 

As it is cleared from the above diagram x increases horizontally, and Y-axis increases downward.

Methods To Give shape

MoveTo :

with the help of this method, you can move your point of clipping.

path.moveTo(x, y);

LineTo :

with the help of this method you can, You can cut your pretty widget with a line. Here x, y is your destination point where your line stop.

path.lineTo(x,y);

quadraticBeizerTo:

with the help of this method, you can clip your widget with a curve. In this endPoint is your destination point where your curve end. And our main is the control point you can understand like a magnetic point for a curve.

var controlPoint = Offset(x, y);
var endPoint = Offset(x,y);
path.quadraticBezierTo(controlPoint.dx, controlPoint.dy,
    endPoint.dx, endPoint.dy);

Let’s Take a look into my example which I have created for you

To Achieve this kind of shape :

Here is the path code :

@override
getClip(Size size) {
  var path = Path();
  path.lineTo(0.0, size.height);
  var firstControlPoint = Offset(55, size.height / 1.4);
  var firstEndPoint = Offset(size.width / 1.7, size.height / 1.3);
  path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
      firstEndPoint.dx, firstEndPoint.dy);
  var secondControlPoint = Offset(size.width - (35), size.height - 95);
  var secondEndPoint = Offset(size.width, size.height / 2.4);
  path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
      secondEndPoint.dx, secondEndPoint.dy);
  path.lineTo(size.width, size.height - 40);
  path.lineTo(size.width, 0.0);
  path.close();
  return path;
}

How To Achieve this kind of shape :

Here is the path code.

var path = Path();
path.moveTo(0.0, size.height*0.20);
path.lineTo(0.0, size.height*0.60);
path.quadraticBezierTo(0, size.height*0.80, 15, size.height*0.80);
path.lineTo(size.width-20, size.height*0.80);
path.quadraticBezierTo(size.width-10, size.height-10, size.width, size.height);
path.quadraticBezierTo(size.width-10, size.height*0.90, size.width-10, 15.0);
path.quadraticBezierTo(size.width-12, 0.0, size.width-30, 0.0);
path.lineTo(15.0 , 0.0);
path.quadraticBezierTo(0.0, 0.0, 0.0,size.height*0.20);
return path;

Conclusion :

With the Flutter framework, you can achieve any desired shape with its awesome widgets. Achieve beautiful designs very easily and quickly, There are a lot of plugins as well help you to achieve your desired UI. But don’t overuse clipper because it may be causing you to slow down your app.

Link for repository :

flutter-devs/Flutter-Custom-Clipper
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

---

Thanks for reading this article if you find anything that could be improved please let me know, I would love to improve.

---

Feel free to connect with us:
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.

---