Recorte en aleteo

En gráficos por computadora, el acto de restringir el renderizado a un área en particular se llama Recorte. Como desarrolladores, utilizamos el recorte para crear interfaces de usuario personalizadas y de aspecto increíble con efectos especiales. Tenemos dos tipos de Clipping que son ClipOval y ClipRRect .

ClipOval

Un widget que recorta a su hijo usando un óvalo o un círculo.

Sintaxis: 

ClipOval(
  child : // any widget
  )

ClipRRect

Un widget que recorta a su hijo usando un rectángulo redondeado.

Sintaxis:

ClipRRect(
  borderRadius : BorderRadius.circular(20),
  child: // any widget
  )

Proyecto de ejemplo

ClipOval

Estamos usando ListView para mostrar los dos contenedores, el primero sin aplicar el widget ClipOval y el segundo aplicando la propiedad ClipOval.

import 'package:flutter/material.dart';
  
// main method
void main() => runApp(new ClippingClipOval());
  
class ClippingClipOval extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // MaterialApp 
    return MaterialApp( 
      debugShowCheckedModeBanner: false,
      // scaffold 
      home:Scaffold( 
          // Appbar
          appBar:AppBar( 
            title:Text('Clipping Clip Oval'),
          ),
          // listview
          body:ListView(  
            children: [ 
              // Container without using of ClipOval.
              Text("Before Applying ClipOval"),
              SizedBox(height:15),
              Center(
                child: Container(
                  width:120,
                  height:120,
                  color:Colors.teal,
                ),
              ),
              Divider(), 
              // container with Appling ClipOval.
              Text("After Applying ClipOval"),
              SizedBox(height:15),
              Center(
                child:ClipOval(
                  child:Container(
                    width:120,
                    height:120,
                    color:Colors.teal,
                  ),
                )
              )
            ],
          )
      ),
    );
  }
}

Producción: 

 

ClipRRect 

Estamos utilizando ListView para mostrar los dos contenedores, el primero sin aplicar el widget ClipRRect y el segundo aplicando la propiedad ClipRRect.

import 'package:flutter/material.dart';
  
void main() => runApp(new ClippingClipRRect());
  
class ClippingClipRRect extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // MaterialApp 
    return MaterialApp( 
      debugShowCheckedModeBanner: false,
      // scaffold 
      home:Scaffold( 
          appBar:AppBar(
            title:Text('Clipping Clip ClipRRect'),
          ),
          body:ListView(
            children:[
              // Container without Appling ClipRRect.
              Text("Before Applying ClipRRect"),
              SizedBox(height:15),
              Center(
                child:Container(
                  width:120,
                  height:120,
                  color:Colors.teal,
                ),
              ),
              Divider(),
              // Container after applying ClipRRect
              Text("After Applying ClipRRect"),
              SizedBox(height:15),
              Center(
                child:ClipRRect(
                  borderRadius:BorderRadius.circular(20),
                  child:Container(
                    width:120,
                    height:120,
                    color:Colors.teal,
                  ),
                ),
              )
            ],
          )
      ),
    );
  }
}

Producción: