Introduction:
In Flutter, managing the visual presentation of widgets often involves the use of specialized tools. One such widget, ClipRect, empowers developers to control the visible area of a child widget by clipping it within a specified rectangle. This blog post delves into the intricacies of the ClipRect widget, unveiling its attributes and demonstrating how it can be harnessed to achieve precise and captivating UI effects.
What is ClipRect Widget?
The ClipRect widget in Flutter is designed to clip its child widget within the bounds of a rectangle. This clipping allows developers to control the visible area of the child widget, creating interesting visual effects and enhancing the overall design of the user interface.
Attributes of ClipRect:
clipBehavior: Determines how the child should be clipped within the bounds of the ClipRect.
clipBehavior: Clip.hardEdge,
Example Usage:
Let's create a simple example where we use ClipRect to clip an image within a rounded rectangle.
ClipRect(
clipBehavior: Clip.hardEdge,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(20),
),
child: Image.network(
'https://buffer.com/cdn-cgi/image/w=1000,fit=contain,q=90,f=auto/library/content/images/size/w600/2023/10/free-images.jpg',
fit: BoxFit.cover,
),
),
)
In this example, we have a ClipRect containing a container with a rounded rectangle shape. The Image widget inside the container is clipped within the bounds of the rounded rectangle, creating a visually appealing effect.