ClipOval widget in Flutter - GeeksforGeeks

21 Oct, 2020
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.
Syntax:
ClipOval({Key key,
CustomClipper<Rect> clipper,
Clip clipBehavior: Clip.antiAlias,
Widget child})


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().
ankit_kumar_
android
Flutter
Flutter-widgets
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Flutter - Custom Bottom Navigation Bar
ListView Class in Flutter
Android Studio Setup for Flutter Development
Flutter - Flexible Widget
What is widgets in Flutter?
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Flexible Widget
Flutter - Stack Widget
Flutter - BorderRadius Widget