ClipOval widget in Flutter

ClipOval widget clips the child widget in oval or circle shape. We can reshape the child widget by changing width and height. If width and height are equal the shape will be circular. If the width and height are given differently then the shape will be oval. Let’s understand this with the help of an example.

Constructor of ClipOval class:

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

Properties of ClipOval class:

• clipBehaviour: This property controls how flutter clips the object. By default, it is set to clip.none for most of the classes, but while implementing this property it must not be set to null. We can employ these three behaviors while implementing ClipOval.

Clip.hardEdge
Clip.antiAlias
Clip.antiAliasWithSaveLayer

• clipper:  If specified this property determines which clip to use among the five builtin clippers (ClipOval, ClipRect, ClipRRect, and ClipPath) or a custom clipper. The child class of the clipper describes the axis-aligned area of the oval. If this property is set to null then ClipOval by default takes the boundaries of the object as the area to be clipped.

Example:

The main.dart file.

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is
  //the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ClipOval',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePAGE(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePAGE extends StatefulWidget {
  @override
  _MyHomePAGEState createState() => _MyHomePAGEState();
}

class _MyHomePAGEState extends State<MyHomePAGE> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: ClipOval(
          child: Image.network(
              'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRFU7U2h0umyF0P6E_yhTX45sGgPEQAbGaJ4g&usqp=CAU',
              fit: BoxFit.fill),
          clipper: MyClip(),
        ),
      ),
      backgroundColor: Colors.lightBlue[50],
    );
  }
}

class MyClip extends CustomClipper<Rect> {
  Rect getClip(Size size) {
    return Rect.fromLTWH(0, 0, 100, 100);
  }

  bool shouldReclip(oldClipper) {
    return false;
  }
}

Output:

If the properties are defined as below:

ClipOval(
          child: Image.network(
          'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRFU7U2h0umyF0P6E_yhTX45sGgPEQAbGaJ4g&usqp=CAU',
          fit: BoxFit.fill),
        ),

The following design changes can be observed:

If the properties are defined as below:

ClipOval(
          child: Image.network(
              'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRFU7U2h0umyF0P6E_yhTX45sGgPEQAbGaJ4g&usqp=CAU',
              fit: BoxFit.fill),
          clipper: MyClip(),
        ),

The following design changes can be observed:

Explanation:

• Create ClipOval widget and wrap it with Center widget.
• Give a child of ClipOval widget as Image.network(src).
• If you want to resize the child of ClipOval, then use clipper and perform getClip() and shouldReclip().