How To Use Flutter ClipRRect Widget [Explained With Examples]

In this tutorial, we’ll learn what Flutter clipRRect widget is and how to properly make use of it to customize shape of its child widget. For better practical understanding, we’ll go through multiple Flutter code examples.

Introduction: Flutter ClipRRect Widget

This widget is used to customize the shape of its child widget. In our case, we’ll be providing it an image. After that, we’ll change shape of that image using the constructor of Flutter clipRRect Widget.

So let’s jump right into its practical implementation.

Flutter ClipRRect Widget Implementation (Easy Examples)

First, we’ll import an image from asset. Click here if you want to learn how to use Flutter image asset. We can import image from network or some other source as well.

Image.asset('assets/cartoon.jpg',
             height: 200, 
             width: 200, 
             fit: BoxFit.cover)

Now we’ve an image on our screen. Now let’s wrap it with Flutter clipRRect widget. See below code:

ClipRRect(
      child: Image.asset('assets/cartoon.jpg',
          height: 200, width: 200, fit: BoxFit.cover),
    )

As we can see that no changes has been made to the shape of image yet. In order to customize its shape, we’ve to use the border radius constructor of clipRRect widget. See below code:

ClipRRect(
  borderRadius: 
  //same above code
)

By default, this constructor takes BorderRadius.zero.

Below examples will cover how to customize the shape of image using this constructor.

Example 1: Border Radius Circular

borderRadius: BorderRadius.circular(20)

flutter cliprrect border radius circular

Border radius circular is used to give same circular value to each edge. For demonstration, we’ve given it a value of 20. It takes a double(decimal) value but passing it an integer will also work just fine.

Copy With Method

This method can be used to give one or more edges some different value. See below code:

BorderRadius.circular(20).copyWith(bottomLeft: Radius.circular(3))

flutter cliprrect border radius circular copy with method

As we can see in the above image that bottom left side has a circular value less than the other sides. This is what copy with method do for us. We can customize other sides as well. Do give a try to other parameters of copy with method as well.

Example 2: Border Radius Only

borderRadius: BorderRadius.only(
          topLeft: Radius.circular(5),
          bottomLeft: Radius.circular(20),
          bottomRight: Radius.circular(12),
          topRight: Radius.circular(50))

We can give different values to each edge by using this method. For demonstration, we’ve given every corner a different value. We can give same value as well. We can also use copy with method here, but it won’t be a good practice.

Example 3: Border Radius All

borderRadius: BorderRadius.all(Radius.elliptical(50, 100))

flutter cliprrect border radius all

This method can be use to make a shape like this. You can try it with other values as well. Other example is given below:

borderRadius: BorderRadius.all(Radius.circular(20))

flutter cliprrect widget border radius all

Copy with method can be used here as well.

Example 4: Border Radius Horizontal

borderRadius: BorderRadius.horizontal(
          left: Radius.circular(40), 
          right: Radius.circular(20))

flutter cliprrect border radius horizontal

This method can be used to give top left and bottom left a same value. Also, it can be used to give top right and bottom right a sample value. We can use copy with method here, if we want.

Example 5: Border Radius Vertical

borderRadius: BorderRadius.vertical(
        top: Radius.circular(45), bottom: Radius.circular(15))

flutter cliprrect border radius vertical

It looks same like the above example but in this method, we can give same value to top left and top right. Also, we can give same value to bottom left and bottom right corner. We can use copy with method here as well.

So this is how we can easily use Flutter clipRRect widget to customize the shape of its child widget.

If you like this post then don’t hesitate to share it.

Feel free to ask if you have any queries regarding how to properly use Flutter clipRRect widget.

Below section has the complete source code of custom shape of image implemented using Flutter clipRRect widget.

Flutter ClipRRect Implementation Source Code

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: ClipRRect(
      borderRadius: BorderRadius.only(
          topLeft: Radius.circular(5),
          bottomLeft: Radius.circular(20),
          bottomRight: Radius.circular(12),
          topRight: Radius.circular(50)),
      child: Image.asset('assets/cartoon.jpg',
          height: 200, width: 200, fit: BoxFit.cover),
    )));
  }
}

Conclusion

To conclude this tutorial, hope now you’ve a complete practical understanding of how to use Flutter clipRRect widget. We’ll be happy to have your valuable feedback on this tutorial.

We’d also love to see you visit our other tutorials on Flutter app development. Thank you for reading this article.