Flutter Image – Rounded Corners

To display a Flutter image with rounded corners, wrap the Image widget with ClipRRect and set its borderRadius. The image is then clipped to a rounded rectangle before it is painted on the screen.

ClipRRect is the Flutter widget designed for rounded-rectangle clipping. For the common case where all four corners use the same radius, pass BorderRadius.circular() to its borderRadius property.

Round Flutter Image Corners with ClipRRect

Use the following sequence when you want to round the corners of an Image.network, Image.asset, or another image widget.

  1. Surround your Image widget with ClipRRect widget.
  2. Specify the required border radius. As we need rounded borders, we specify circular border radius using BorderRadius.circular().
  3. BorderRadius.circular() takes a double value as argument. This double value is the border radius for all the four corners of the rectangle.

Following is the code snippet to display an image with round corners.

</>
Copy
ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: Image(
	image: NetworkImage(
	  '[https://www.tutorialkart.com/img/hummingbird.png](https://www.tutorialkart.com/img/hummingbird.png)'),
  ),
),

The source of your image is your choice. NetworkImage is only for displaying an image. You can use an image from assets folder as well.

The value passed to BorderRadius.circular() is the corner radius in logical pixels. A larger value produces more rounded corners. Flutter clamps radii when necessary so that the rounded corners fit within the widget’s bounds.

Example – Flutter Image with Rounded Corners

In this example, we have two images with rounded corners. Let us first run the application, and go through the code in detail.

main.dart

</>
Copy
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Image - tutorialkart.com'),
        ),
        body: Center(
          child: Container(
            color: Colors.cyan,
            width: double.infinity,
            child: Column(children: <Widget>[
              Container(
                width: 200,
                margin: EdgeInsets.all(10),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20),
                  child: Image(
                    image: NetworkImage(
                        '[https://www.tutorialkart.com/img/hummingbird.png](https://www.tutorialkart.com/img/hummingbird.png)'),
                  ),
                ),
              ),
              Container(
                width: 200,
                margin: EdgeInsets.all(10),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(50),
                  child: Image(
                    image: NetworkImage(
                        '[https://www.tutorialkart.com/img/hummingbird.png](https://www.tutorialkart.com/img/hummingbird.png)'),
                  ),
                ),
              ),
            ]),
          ),
        ),
      ),
    );
  }
}

How the 20 and 50 Border Radii Affect the Image

First Image with Rounded Corners

For the first Image widget, we have a ClipRRect surrounding the image with a circular radius of 20. So, ClipRRect clips its child, the image, with a rounded rectangle. The corners have a circular shape with radii of 20.

Second Image with Rounded Corners

For the second Image widget, we have a ClipRRect surrounding the image with a circular radius of 50. So, ClipRRect clips its child, the image, with a rounded rectangle. The corners have a circular shape with radii of 50.

This circular radius is greater than that of used for first image. And is evident in the following screenshot.

Round Only Selected Flutter Image Corners

Use BorderRadius.only() when the four corners should not have the same radius. The following example rounds only the top-left and bottom-right corners.

</>
Copy
ClipRRect(
  borderRadius: const BorderRadius.only(
    topLeft: Radius.circular(24),
    bottomRight: Radius.circular(24),
  ),
  child: Image.asset('assets/images/photo.jpg'),
)

You can also use BorderRadius.vertical() or BorderRadius.horizontal() when the same radius should be applied to a pair of corners.

Keep a Rounded Flutter Image Inside Fixed Width and Height

When the image must fill a fixed area, give the clipped region a known size and set an appropriate fit. BoxFit.cover fills the available width and height while preserving the image’s aspect ratio; parts of the image can be cropped.

</>
Copy
SizedBox(
  width: 240,
  height: 160,
  child: ClipRRect(
    borderRadius: BorderRadius.circular(16),
    child: Image.asset(
      'assets/images/photo.jpg',
      fit: BoxFit.cover,
    ),
  ),
)

Keeping the ClipRRect and its child within the same intended bounds also avoids cases where the rounded corners appear in unexpected positions.

Why Container borderRadius May Not Round an Image Child

Adding borderRadius to a BoxDecoration does not automatically clip a child widget. If an Image is the child of a decorated Container, either wrap the image with ClipRRect or set a clipping behavior on the Container.

</>
Copy
Container(
  width: 240,
  height: 160,
  clipBehavior: Clip.antiAlias,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(16),
  ),
  child: Image.asset(
    'assets/images/photo.jpg',
    fit: BoxFit.cover,
  ),
)

If the image is supplied through BoxDecoration.image as a DecorationImage, the decoration itself paints that image according to its rounded shape. The distinction matters when troubleshooting a Container whose child image still shows square corners.

Create a Circular Image in Flutter

If you need a fully circular image rather than a rounded rectangle, use a square image area and clip it with ClipOval. This is suitable for profile photos and other circular thumbnails.

</>
Copy
SizedBox(
  width: 96,
  height: 96,
  child: ClipOval(
    child: Image.asset(
      'assets/images/profile.jpg',
      fit: BoxFit.cover,
    ),
  ),
)

CircleAvatar is another option when the image is specifically being used as an avatar. For a general-purpose circular crop, ClipOval keeps the clipping behavior explicit.

Round an Image to Match a Flutter Card

When an image fills a Card, give the card a rounded shape and enable clipping so that the image follows the same corner radius.

</>
Copy
Card(
  clipBehavior: Clip.antiAlias,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
  ),
  child: Image.asset(
    'assets/images/photo.jpg',
    width: 240,
    height: 160,
    fit: BoxFit.cover,
  ),
)

Troubleshoot Flutter Images That Still Have Square Corners

  • The Container is rounded but the image is not: a decoration does not automatically clip its child. Use ClipRRect or an appropriate clipBehavior.
  • The clipping looks offset: make sure the clipping widget and the image have compatible bounds.
  • The corners look almost square: increase the radius relative to the displayed image size.
  • You expected a circle: use equal width and height with ClipOval, or use CircleAvatar for avatar UI.
  • The image is stretched: set fit, commonly BoxFit.cover, instead of forcing unrelated width and height without a fitting rule.

For the widget’s current API details, see the Flutter ClipRRect class documentation.

Screenshot

Run the application in an Emulator or on a Original Device. You should get an application running with the screen displaying two images with round corners as shown below.

Flutter Image - Rounded Corners - Border Radius

Flutter Rounded Image Corners – Key Points

Use ClipRRect with BorderRadius.circular() for the common case of rounding all four corners of an image. Use BorderRadius.only() for individual corners, and use ClipOval when the image must be circular. If you use a decorated Container, remember that its border radius does not by itself clip a child image.

In this Flutter Tutorial, we learned how to clip the corners of an image using a ClipRRect widget to get the look of an image with rounded corners.