Widget ClipOval en Flutter

El widget ClipOval recorta el widget secundario en forma de óvalo o círculo . Podemos remodelar el widget secundario cambiando el ancho y el alto . Si el ancho y la altura son iguales, la forma será circular. Si el ancho y la altura se dan de manera diferente, la forma será ovalada. Entendamos esto con la ayuda de un ejemplo.

Constructor de la clase ClipOval:

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

Propiedades de la clase ClipOval:

• clipBehaviour : esta propiedad controla cómo flutter recorta el objeto. De forma predeterminada, se establece en clip.none para la mayoría de las clases, pero al implementar esta propiedad no se debe establecer en nulo. Podemos emplear estos tres comportamientos al implementar ClipOval.

Clip.hardEdge
Clip.antiAlias
Clip.antiAliasWithSaveLayer

• clipper : si se especifica, esta propiedad determina qué clip usar entre los cinco clippers integrados ( ClipOval , ClipRect , ClipRRect y ClipPath ) o un clipper personalizado. La clase secundaria del clipper describe el área alineada con el eje del óvalo. Si esta propiedad se establece en nulo, ClipOval por defecto toma los límites del objeto como el área a recortar.

Ejemplo:

El archivo main.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;
  }
}

Producción:

Si las propiedades se definen de la siguiente manera:

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

Se pueden observar los siguientes cambios de diseño:

Si las propiedades se definen de la siguiente manera:

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

Se pueden observar los siguientes cambios de diseño:

Explicación:

• Cree el widget ClipOval y envuélvalo con el widget Center .
• Asigne un elemento secundario del widget ClipOval como Image.network(src) .
• Si desea cambiar el tamaño del elemento secundario de ClipOval , use clipper y ejecute getClip() y shouldReclip().