ClipOval Widget – Flutter Widget Guide By Flutter Agency

ClipOval Widget – Flutter Widget Guide By Flutter Agency

Sometimes you may want to clip a Widget using certain clippers. In Flutter, it can be done easily thanks to built-in clippers such as ClipOval Widget, ClipRect, ClipRRect, and ClipPath Widget. However, if you want to clip a Widget using your own custom clipper, it’s also possible by creating a class that extends CustomClipper.

What is ClipOval Widget in Flutter?

ClipOval Widget clips the child using an oval. If the clipper is null, the create oval will use the widget’s bounding box. Therefore, changing the size of the widget also changes the oval size. If the width and height of the widget are equal, the shape will be a circle.

The constructor of ClipOval Widget will look like below :

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

How to use ClipOval Widget in Flutter?

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

Padding(
      padding: const EdgeInsets.all(8.0),
      child: Center(
        child: ClipOval(
          child: Image.asset(
            "assets/parrot.jpg",
          ),
        ),
      ),
    );

We will get output like below:

ClipOval Widget

Properties :

• clipBehavior: Controls how to clip.

• clipper: The delegate returns a rectangle that describes the axis-aligned bounding box of the oval. The oval’s axes will themselves also be axis-aligned.

If the clipper delegate is null, then the oval uses the widget’s bounding box (the layout dimensions of the rendered object) instead.

• child: This attribute is used to define the widget below this widget in the tree. This widget can only have one child. To layout multiple children, let this widget’s child be a widget such as Row Widget, Column Widget, or Stack Widget, which have a children’s property, and then provide the children to that widget.

Conclusion:

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

Thanks for reading it !!!

Keep Fluttering !!!

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.