Open In App

ClipRRect Widget in Flutter

Last Updated : 28 Feb, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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<RRect>? 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<MyHomePAGE> {
  @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.

Next Article
Article Tags :

Similar Reads