ClipRRect Widget in Flutter - GeeksforGeeks

02 Dec, 2020
The ClipRRect widget in flutter is used to clips its child using a rounded rectangle.  It associates with the Clippers family. The main use of clippers is to clip out any portion of the widget as required. It behaves similar to that of ClipRect and is used to Clip a Rectangle portion of the child widget but with rounded corners
Syntax:
ClipRRect(
{Key key,
BorderRadius borderRadius: BorderRadius.zero,
CustomClipper<RRect> clipper, 
Clip clipBehavior: Clip.antiAlias, 
Widget child})
children: The widgets below this widget in the tree.
hashCode: The hash code for this object.
key: Controls how one widget replaces another widget in the tree.
runtimeType: A representation of the runtime type of the object.
clipBehaviour: Controls how to clip.
clipper: If non-null, determines which clip to use.
borderRadius: The border radius of the rounded corners
createRenderObject (BuildContext context): This function takes in RenderClipRect as the object. RndereObjectWidget gives configuration instructions to create RenderObject class.
@override
RenderClipRect createRenderObject (
BuildContext context
)
override
debugFillProperties (DiagnosticPropertiesBuilder properties):  This function takes void as the object to allocate an additional property associated with the node.
 @override
void debugFillProperties (
DiagnosticPropertiesBuilder properties
)
override
didUnmountRenderObject(covariant RenderClipRect renderObject): This function also holds void as the object. When a widget is removed from the widget tree it returns a widget of the same type.
@override
void didUnmountRenderObject (
covariant RenderClipRect renderObject
)
override
Example:
Here we will clip the below image with a rounded corner rectangle:
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: 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;  }}
Output:
First initialize the main app as a stateless widget.Second design the main widget as you desire.Build the Appbar with the scaffold widget.Now use the ClipRect widget inside the body of the scaffold widget and place it in the middle using the center widget.
First initialize the main app as a stateless widget.
Second design the main widget as you desire.
Build the Appbar with the scaffold widget.
Now use the ClipRect widget inside the body of the scaffold widget and place it in the middle using the center widget.
ankit_kumar_
android
Flutter
Flutter-widgets
Dart
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
Flutter - Checkbox Widget
How to Append or Concatenate Strings in Dart?
Flutter - Flexible Widget
Dart Tutorial
ListView Class in Flutter
Operators in Dart
Flutter - BoxShadow Widget
Flutter - Stack Widget