Flutter Image – Rounded Corners

Flutter Image – Rounded Corners

To display an image with rounded corners or circular shaped corners, place the Image widget as child of ClipRRect widget with circular border radius specified for the ClipRRect widget.

Let us learn briefly what this ClipRRect is. ClipRRect is a Flutter widget that clips its child with a rounded rectangle. You can specify a specific border radius for this widget, specifically circular border radius, using borderRadius property.

Now, to display an image with rounded corners, follow the below sequence of steps in your application code.

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.

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: Image(
	image: NetworkImage(
	  '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.

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

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'),
                  ),
                ),
              ),
              Container(
                width: 200,
                margin: EdgeInsets.all(10),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(50),
                  child: Image(
                    image: NetworkImage(
                        'https://www.tutorialkart.com/img/hummingbird.png'),
                  ),
                ),
              ),
            ]),
          ),
        ),
      ),
    );
  }
}

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.

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.

Conclusion

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.