F lutter is introduced by Google from a few years age, Google bets on Flutter to make fast development apps with expressive and flexible UI and native performance.

As you see, I have highlighted flexible UI because this blog is going be focused on Flutter UI, specifically, How to use Clippers to make the most beautiful designs.

First thing first, let me tell you what is Clippers mean in flutter?

Clippers are used to clip your widget to be more beautiful widget,just you define what is the area which you need to clip to make your widget better.

Quick examples

Here, the darkest areas mean the final widgets after clipping.

areas mean the final widgets after clipping. All these shapes have different ways are clipped, through.

The first clip is clipped, through defining the points or offsets which makes this nice widget, I’ll explain how to make like this widget.

The second clip (curvy widget) is clipped using a quadratic method or one of conic shape, also I will explain it later.

method or one of conic shape, also I will explain it later. The third clip, you can get this widget through built-in clips or make custom clipper to get it.

But the question is! how does it work!? how do the clippers work!?

All of us know that the UI or design in Flutter is a tree of widgets each widget has its children widgets.

Clippers modify in this tree by inserting a special render object into the render tree, make the widget which you want to clip it a child to the Render object and the Render object going to adds a clip each time flutter repaint.

Clipper widget that clips its child using whatever the way it uses, but it prevents the child from painting outside the shape.

You are wondering what is ClipRRect which you see in the Gif image?

To know about ClipRRect we should know, what is the types of clippers?.

Built-in Clippers

ClipRect

From its name, this widget cares about rectangular shape, you can use it to clip part of a widget, to be precise, to clip a rectangular to a widget, as written in Flutter documentation ClipRect is commonly used with (CustomPaint, CustomSingleChildLayout, CustomMultiChildLayout, Align and Center, OverflowBox, SizedOverflowBox) widgets which could select the rectangular dimensions or which part you need to clip.

This widget is commonly used with to clip images, let’s take an example:

I have used an image of spiderman, I made it in the center of the screen.