CustomClipper In Flutter

CustomClipper In Flutter :

CustomClipper In Flutter : Let’s Learn about CustomClipper In Flutter

CustomClipper is the base class for clipping in Flutter and it’s used by a four widgets: ClipRect, ClipRRect, ClipOval, ClipPath. Each of these has a defined behavior.

Change the height or the width of the Container and it becomes an Oval. Consider for a moment how fast and easy it is to tune such an oval in Flutter; all you have to do is change the height and/or width and hit Ctrl+\ for Hot Reload to see how your changes look in less than a second. 

Now what if you want to customize the size and location of the clip? that’s what the CustomClipper made for.

When you inherit from the CustomClipper class you need to override two methods.

• getClip()
•  shouldReclip()

getClip()

This provides you with size of the RenderBox being clipped and requires you to return a Rect. This Rect will define the size and location of the clip.

   shouldReclip()

his method will be called whenever you provide a new object (in this case CustomClipper<Rect>) is created to compare it with the old one and when it return true getClip will get called and it’s not vise-versa because the getClip method can also be triggered when the size of the box changes.

The example of CustomClipper in Flutter is given below.Study it for more flutter information stay connected with us.

 ClipPath(
                child: Container(
                    height: MediaQuery.of(c).size.height * 0.32,
                    child: AppBar(
                        centerTitle: true,
                        backgroundColor: colors[0],
                        title: Text("Custom Clipper"))),
                clipper: WC(),
              ),

class WC extends CustomClipper<Path> {
  @override
  Path getClip(s) {
    var w = s.width;
    var h = s.height;
    var p = Path();
    p.lineTo(0.0, s.height - 30);
    setPath(w * 0.05, h * 0.4, w * 0.18, h - 30, p);
    setPath(w * 0.23, h, w * 0.3, h * 0.78, p);
    setPath(w * 0.35, h * 0.6, w * 0.41, h - 80, p);
    setPath(w * 0.45, h - 40, w * 0.5, h - 80, p);
    setPath(w * 0.62, h * 0.4, w * 0.65, h * 0.65, p);
    setPath(w * 0.72, h + 50, w * 0.78, h * 0.7, p);
    setPath(w * 0.85, h * 0.35, w * 0.95, h - 65, p);
    p.lineTo(w, h);
    p.lineTo(w, 0.0);
    p.close();
    return p;
  }

  bool shouldReclip(oc) => true;
}

setPath(dx1, dy1, dx2, dy2, p) {
  p.quadraticBezierTo(dx1, dy1, dx2, dy2);
}

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in