ClipRRect in Flutter

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: