If you already know how to create the above idea, you can skip this article as I may be boring you. If not, I am going to explain some stuff first.

As we know flutter has a widget for almost everything, it also has a widget called ClipPath to clip the children and not just old boring rectangle. The ClipPath widget has clipper property which takes a CustomClipper to define how it is going to clip its path. Inside the CustomClipper there’s getClip(Size size) method where you can define how you are going to clip the child. The simplest implementation would be:

Here are the custom clipper clips the widget provides as it is. It’s pretty useless but you can understand how the clip path works.

… boring stuff! Shall we begin the interesting part?

Ok, let's dive into the interesting part. How do we get the triangle shaped widget? Well, that’s simple, just draw the line as below.

Note: The code section below are the parts that will replace the code inside getClip(Size size).

Path path = Path();

path.lineTo(size.width / 2, size.height);

path.lineTo(size.width, 0.0);

And what about the arc? Well just use arcToPoint as below:

Path path = Path();

path.lineTo(0, size.height);

path.arcToPoint(Offset(size.width, size.height),

radius: Radius.elliptical(30, 10));

path.lineTo(size.width, 0);

Here you define where the arc should end and give the radius you want. But there’s another way to do it.

Path path = Path();

path.lineTo(0, size.height);

path.quadraticBezierTo(

size.width / 2, size.height - 100, size.width, size.height);

path.lineTo(size.width, 0);

In the quadraticBezierTo, the last two parameters are the ending x and y point of the curve respectively and the first two parameters are the X and Y coordinates of the point from where you like to bend the curve.

Wanna see more?

You can use this to even create a wave 〰️

Path path = Path();

path.lineTo(0, size.height);

path.quadraticBezierTo(size.width/4, size.height - 40, size.width/2, size.height-20);

path.quadraticBezierTo(3/4*size.width, size.height, size.width, size.height-30);

path.lineTo(size.width, 0);

You can change the point as per your design.

So, what about those multiple pointed and curved widgets. Well, they are just line and arc in a loop 😄.

Path path = Path();

path.lineTo(0, size.height);

var curXPos = 0.0;

var curYPos = size.height;

var increment = size.width / 40;

while (curXPos < size.width) {

curXPos += increment;

curYPos = curYPos == size.height ? size.height - 30 : size.height;

path.lineTo(curXPos, curYPos);

}

path.lineTo(size.width, 0);

The logic here is simple. I just created a line from the current position to next position by increasing X value and alternated the Y value.

Similar logic can be applied to curved edges.

Path path = Path();

path.lineTo(0, size.height);

var curXPos = 0.0;

var curYPos = size.height;

var increment = size.width / 20;

while (curXPos < size.width) {

curXPos += increment;

path.arcToPoint(Offset(curXPos, curYPos), radius: Radius.circular(5));

}

path.lineTo(size.width, 0);

Well, as you can see, with just a couple of lines I can customize the widget in lots of different ways. It is only the tip of the iceberg, the deeper you dive the more you will be able to do wonders.

You can look into the code in Github. Fork it, play with it and do share what you get. Have fun!