Flutter CustomClipper | getClip

Flutter CustomClipper is a great class drawing custom shape or clipping the shape of a widget. Here, we will see how to clip the shape of a star and give it different color.

Your own class should extend CustomClipper class.

CustomClipper class is used by number widgets. So we may also use it in our own customized class.

Let’s declare class,

class _Clipper extends CustomClipper<Rect>

In the above class _Clipper is our custom class and it’s extending CustomClipper class.

It has two methods that we should override

@override
  bool shouldReclip(CustomClipper<Rect> oldClipper) => true;
@override
  Rect getClip(Size size) {}

We may simply set shouldReclip() return value to true.

getClip does the actual work of clipping a shape.

It may look like this.

@override
  Rect getClip(Size size) {
    return Rect.fromLTRB(
      (size.width / 10) * part,
      0.0,
      size.width,
      size.height,
    );
  }

In the above function, you may define where to start drawing from.

The complete code for extended _Clipper class.

class _Clipper extends CustomClipper<Rect> {
  final int part;

  _Clipper({required this.part});

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) => true;

  @override
  Rect getClip(Size size) {
    return Rect.fromLTRB(
      (size.width / 10) * part,
      0.0,
      size.width,
      size.height,
    );
  }
}

In the above photo we get half star because of the CustomClipper class getClip. Get the complete source code of Flutter Star Rating System