Custom Clipper : Wave Curve - Part 1

bhoomika harkhani

Well, I thought about writing this blog. Because as beginner when I saw a code of a custom clipper for the first time, I swear it was a bouncer for me.

So I thought that it might be helpful for those who has just took a step into it.

Okay, so Custom Clipper is somewhat you can use to draw curves, waves, any custom shape which flutter doesn’t serve you directly as a widget in a simple language.

Exactly what clipper is : https://api.flutter.dev/flutter/rendering/CustomClipper-class.html

Here, we are gonna draw two waves using bezier curve. Something like this as shown below.

Here is the main.dart file. It has basic boiler plate code.

Now we are gonna draw two waves. For the first one, in stack below the center widget add ClipPath.

In general terms ClipPath clips its child using a path which we will provide.Here the GreenClipper is a CustomClipper class and it has Container as a child.( Height | Width is not given to container so it will take full height|width of the screen).

So it will draw the path of the container.

What is exactly ClipPath : https://api.flutter.dev/flutter/widgets/ClipPath-class.html

CustomClipper has its two default overridden methods.

getClip — where we will draw the path and it will return the path.

shouldReclip — Any time a new clip object is created with a new instance of the custom painter delegate class it is called.

i.e., If i make animation to the wave.

Take look at the image below. I have roughly tried to make you understand how it is gonna work.

Here path will follow the offsets which we keep adding (i.e, it will work like pencil you could say).

lineTo will draw a line till given points. Here at width of 0 and 4.25th height of the screen.

When we are done, we have to close the path to let it know that we have achieved our desired shape .

Now quadraticBezierTo will draw a curve based on given offsets to it.

Its syntax is basically quadraticBezierTo(x1, y1, x2,y2).

Here it will add another curve based on the control points and end points.

Yaay!! Well done! We have our wave. But yet its not done. we have to draw a line to give it a finish as above .

So,This is how the full code will look a like.

This is the output.


Will continue for another curve in next part.

Please shower your support and feedback to your fellow friend. :)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade