Clipping in Flutter

In computer graphics, the act of restricting the rendering to a particular area is called Clipping. As developers, we use clipping to create awesome-looking, custom user interfaces with special effects. We have two types of Clipping that are ClipOval and ClipRRect.

ClipOval

A widget that clips its child using an oval or a circle.

Syntax: 

Dart

ClipOval(
  child : // any widget
  )

ClipRRect

A widget that clips its child using a rounded rectangle.

Syntax:

Dart

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

Example Project

ClipOval

We are using a ListView to show the Two containers, the first one is without applying the ClipOval widget and the second one is by Applying the ClipOval Property.

Dart

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 Applying ClipOval.
              Text("After Applying ClipOval"),
              SizedBox(height:15),
              Center(
                child:ClipOval(
                  child:Container(
                    width:120,
                    height:120,
                    color:Colors.teal,
                  ),
                )
              )
            ],
          )
      ),
    );
  }
}

Output:

ClipRRect

We are using a ListView to show the Two containers, the first one is without applying the ClipRRect widget and the second one is by Applying the ClipRRect Property.

Dart

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 Applying 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,
                  ),
                ),
              )
            ],
          )
      ),
    );
  }
}

Output: