Widget ClipRRect en Flutter

El widget ClipRRect en flutter se usa para recortar a su hijo usando un rectángulo redondeado. Se asocia con la familia Clippers. El uso principal de las recortadoras es recortar cualquier parte del widget según sea necesario. Se comporta de manera similar a ClipRect y se usa para recortar una porción de rectángulo del widget secundario pero con esquinas redondeadas.

Constructor:

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

Propiedades:

• niños: Los widgets debajo de este widget en el árbol.
• hashCode: El código hash para este objeto.
• clave: Controla cómo un widget reemplaza a otro widget en el árbol.
• runtimeType: una representación del tipo de tiempo de ejecución del objeto.
• clipBehaviour: controla cómo recortar.
• clipper: si no es nulo, determina qué clip usar.
• borderRadius: el radio del borde de las esquinas redondeadas

Métodos:

• createRenderObject (contexto BuildContext) : esta función toma RenderClipRect como el objeto. RndereObjectWidget da instrucciones de configuración para crear la clase RenderObject.

@override
RenderClipRect createRenderObject (
BuildContext context
)
override

• debugFillProperties (propiedades de DiagnosticPropertiesBuilder): esta función toma void como el objeto para asignar una propiedad adicional asociada con el Node.

@override
void debugFillProperties (
DiagnosticPropertiesBuilder properties
)
override

• didUnmountRenderObject (covariante RenderClipRect renderObject): esta función también se mantiene vacía como objeto. Cuando se elimina un widget del árbol de widgets, devuelve un widget del mismo tipo.

@override
void didUnmountRenderObject (
covariant RenderClipRect renderObject
)
override

Ejemplo:

Aquí recortaremos la imagen de abajo con un rectángulo de esquina redondeada:

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: ClipRRect(
            borderRadius:
            BorderRadius.circular(10),
              child: Image.network('https://picsum.photos/250?image=9'),
            ),
          )
      );
  }
}
 
class MyClip extends CustomClipper<Rect> {
  Rect getClip(Size size) {
    return Rect.fromLTWH(0, 0, 100, 100);
  }
 
  bool shouldReclip(oldClipper) {
    return false;
  }
}

Producción:

Explicación:

1. Primero inicialice la aplicación principal como un widget sin estado.
2. En segundo lugar, diseñe el widget principal como desee.
3. Cree la barra de aplicaciones con el widget de andamio.
4. Ahora use el widget ClipRect dentro del cuerpo del widget scaffold y colóquelo en el medio usando el widget central.