Hey, What’s up, guys. In this post, we are going to know about ClipRRect in flutter. We will see what ClipRRect in flutter is and how to use it. So let’s begin.

What is ClipRRect in flutter?

ClipRRect is a widget in flutter that we can use to give its child a rounded rectangle shape. In other words, ClipRRect clips its child using a rounded rectangle.

Like, if you have an image to show in your app and you want to make its corner rounded, that’s where you can use ClipRRect. You can also give it a full circular shape.

Let me give me an example now.

import 'package:flutter/material.dart';

void main()
{
  runApp(MyApp());
}

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("ClipRRect Example"),
          backgroundColor: Colors.teal
        ),
        body: Center(
          child: ClipRRect(
            //Make corners rounded.
            borderRadius: BorderRadius.circular(30),
            child: Image.asset("assets/images/night.jpg", width: 300)
          )
        )
      )
    );
  }
}

Output :

So you can see in the screenshot above that image’s corners are rounded.

If I don’t use ClipRRect then the image will look like this –

You can see the difference.

That’s all about ClipRRect in flutter.

Goodbye.