VOOZH about

URL: https://www.geeksforgeeks.org/flutter/cliprrect-widget-in-flutter/

⇱ ClipRRect Widget in Flutter - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

ClipRRect Widget in Flutter

Last Updated : 15 Jul, 2025

The ClipRRect widget in flutter is used to clips its child using a rounded rectangle. It associates with the Clippers family. The main use of clippers is to clip out any portion of the widget as required. It behaves similar to that of ClipRect and is used to Clip a Rectangle portion of the child widget but with rounded corners.

Constructor

 ClipRRect ClipRRect({
 Key? key,
 BorderRadiusGeometry borderRadius = BorderRadius.zero,
 CustomClipper<RRect>? clipper,
 Clip clipBehavior = Clip.antiAlias,
 Widget? child,
})

Properties:

Property

Description

child

The widget below this widget in the tree

hashCode

The hash code for this object

key

Controls how one widget replaces another widget in the tree

runtimeType

A representation of the runtime type of the object

clipBehavior

This property takes Clip Enum as a value and Controls how to clip

clipper

If non-null, determines which clip to use.

borderRadius

The border radius of the rounded corners

Example:

Here we will clip the below image with a rounded corner rectangle:

👁 Image


Refer to this article to Display Network Image in Flutter.

main.dart:

Output:

👁 Image

Explanation of the above application

  1. First initialize the main app as a stateless widget.
  2. Second design the main widget as you desire.
  3. Build the Appbar with the scaffold widget.
  4. Now use the ClipRRect widget inside the body of the scaffold widget and place it in the middle using the center widget.
Comment
Article Tags:

Explore