Custom Clipper : Wave Curve - Part 2

bhoomika harkhani
Jul 1 · 2 min read

In last part we made it to our first wave. Now lets move further for the second one.

Once again check out the below output, where we drew the green one. Now its time for the rest. Blue one.

In main.dart above Greenclipper lets add another clipper and name it BlueClipper.

Here, BlueClipper will be in background. So GreenClipper will overlay it.If we define BlueClipper and extend it with CustomClipper. It will look like this.

I have explained this class in part-1. Check it out from there. Link I have mentioned in the end of the blog.

Here, I have attached a rough image below for the understanding purpose and make it easier. Take a look at it. This is something we are gonna do with our code.

So now we are at our first line point. To get started with the first curve lets add first control and end point.

Now its turn for the second one.

Tada !! We are almost about to finish. In last previous blog we had two points but as you can see in the output image at the end we have aa baby curve too. So for that lets add it too.

Its time to let it know that we are finished here. So lets make it to the finish line.

Full Code for BlueClipper would look like this :

Voillaa !! We are done here.🎉

So this is some thing how it would look. If we comment the GreenClipper. Then output will be :

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