ClipRRect and ClipOval in Flutter

129

ClipRRect is a widget that clip its children using a round rectangle. It associates with clippers widget. The main use of clippers is to clip out any portion of the widget as required. It is used to clip a rectangle portion of the children widget in a rounded corner.

ClipOval is a widget that clip its children using a oval.

In this tutorial, we will discuss about ClipRRect and ClipOval in flutter. Here, we will discuss with an example.

Constructor of ClipRREct

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

Constructor of ClipOval

(new) ClipOval ClipOval({
  Key? key,
  CustomClipper<Rect>? clipper,
  Clip clipBehavior = Clip.antiAlias,
  Widget? child,
})

Code Implementation

ClipRRect(
              borderRadius:
                  const BorderRadius.vertical(top: Radius.circular(16.0)),
              child: Image.asset(
                "assets/Images/image.jpg",
              ),
            ),
borderRadius:
         const BorderRadius.horizontal(left: Radius.circular(16.0)),

borderRadius:
             const BorderRadius.vertical(top: Radius.circular(16.0)),

ClipOval Example

ClipOval(
              child: Image.asset(
                "assets/Images/image.jpg",
              ),
            )

Here is the github link of this project:

https://github.com/NilamPathak578/flutterHopeProjects/tree/clipRRect

Thank you for reading this article. If you have any queries regarding any topic, feel free to share with us. We will try to solve your problems.

Happy Learning.

Follow me here:

Leave A Reply

Your email address will not be published.