Clipping your way through designs with Flutter

Flutter makes developers’ life easier!

Having a fancy design to work on is fun and challenging. It will soon turn into a frustrating job if you have to spend hours thinking, coding and keep trying even for simple customization in the UI. That is why I always wanted to try something new and that’s one of the many reasons I started playing with flutter. Well, I won’t brag about flutter (even if I want to 😏). You can just learn about it here.

Plot: I may not be the only one who gets bored SOMETIMES while working (hopefully) and what better way to have some fun trying new things. I have been hearing about CustomClipper a lot lately and one of my colleagues was working with it. So I decided to give it a try and what I got in just an hour was amazing for myself 😮 ( Don’t be amazed 😜)

So what kind of design I was talking about? I will be explaining how I got the design as shown below with just a few lines of code. It may look trivial to you but they actually helped me to kill my time. You can view the code in Github if you prefer.

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!