ClipRRect Widget in Flutter (original) (raw)

Last Updated : 28 Feb, 2025

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.

Constructor

ClipRRect ClipRRect({
Key? key,
BorderRadiusGeometry borderRadius = BorderRadius.zero,
CustomClipper? clipper,
Clip clipBehavior = Clip.antiAlias,
Widget? child,
})

**Properties:

Property Description
**child The widget 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
**clipBehavior This property takes _Clip Enum as a value and Controls how to clip
**clipper If non-null, determines which clip to use.
**borderRadius The border radius of the rounded corners

**Example:

Here we will clip the below image with a rounded corner rectangle:

Refer to this article to Display Network Image in Flutter.

**main.dart:

Dart `

import 'package:flutter/material.dart';

void main() { runApp(MyApp()); // Entry point of the application }

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'ClipOval', // Title of the application theme: ThemeData( primarySwatch: Colors.blue, // Theme color of the application ), home: MyHomePAGE(), // Home page of the application debugShowCheckedModeBanner: false, // Disable debug banner ); } }

class MyHomePAGE extends StatefulWidget { @override _MyHomePAGEState createState() => _MyHomePAGEState(); // Create state for the home page }

class _MyHomePAGEState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( 'GeeksforGeeks', // Title of the app bar style: TextStyle( color: Colors.white, // Text color of the app bar title ), ), backgroundColor: Colors.green, // Background color of the app bar ), body: Center( child: ClipRRect( borderRadius: BorderRadius.circular(10), // Rounded corners with radius 10 child: Image.network('https://picsum.photos/250?image=9'), // Image from the network ), ), ); } }

`

**Output:

**Explanation of the above application

  1. First initialize the main app as a stateless widget.
  2. Second design the main widget as you desire.
  3. Build the _Appbar with the scaffold widget.
  4. Now use the _ClipRRect widget inside the body of the scaffold widget and place it in the middle using the center widget.