Skip to content
Related Articles

Related Articles

Clipping in Flutter

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 26 Apr, 2022

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


Output: 

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


Output:

Output

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!