ClipRect Widget – Flutter Widget Guide By Flutter Agency

· 3 min read
ClipRect widget
ClipRect widget

What is ClipRect Widget in Flutter?

ClipRect Widget is used to clip a child by using a rectangular shape. ClipRect Widget is commonly used with these widgets, which commonly paint outside their bounds. ClipRect prevents the child from painting outside the box. The size and location of the clipper can be customized by changing the arguments in the clipper.

ClipRect Widget in Flutter is part of the Clippers family. The primary use case of clippers is that they can clip out any portion of the widget as specified. In that way, ClipRect is used to Clip a Rectangle portion of the Widget which is its child.

The constructor for it will look like below :

  ClipRect({
    Key key,
    CustomClipper<Rect> clipper,
    Clip clipBehavior: Clip.hardEdge,
    Widget child,
  });

Properties :

  • CustomClipper<Rect> clipper: clipper determines which clip to use.
  • child: The only important attribute of ClipRect. All Clippers take a child with which it creates the boundary.

  • clipBehavior: ClipBehavior in ClipRect is a common attribute across all Clippers in Flutter. The primary need is to define how the edges are when the Clip is happening. 

For eg, the 3 behaviors that Clip has are Clip.hardEdge, Clip.antiAlias, Clip.antiAliasWithSaveLayer.

The need for these is to define how the edges look when the Clip happens. HardEdge creates a not so smooth Edge, while the antiAlias creates a smoother edge that HardEdge and antiAliasWithSaveLayer create the smoothest of edges. It also is recommended to go with the default HardEdge in order to not take time and memory to draw the Edges on the Canvas(The UI).

To understand clip behavior in detail click  Clip enum.

How to use ClipRect Widget in Flutter?

The following code snippet tells us how to implement ClipRect Widget in Flutter.

ClipRect(
          child: Container(
            child: Align(
              alignment: Alignment.topLeft,
              widthFactor: 0.75,
              heightFactor: 0.75,
              child: Image.asset(
            "assets/parrot.jpg",
          ),
            ),
          ),
        ),

Which will give us output like below :

ClipRect

ClipRect 

Thanks for reading !!!

In the next article, we will learn about ClipPath Widget.

Conclusion:

In this article, we have been through What is ClipRect Widget in Flutter along with how to implement it in a Flutter.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply