Flutter Round Image

To display a round image in Flutter, you can use a circular BoxDecoration, CircleAvatar, or ClipOval. If you need only rounded corners instead of a fully circular image, use ClipRRect with a BorderRadius.

A circular image normally needs equal width and height. The image is then clipped or painted inside a circle. For profile pictures and avatars, CircleAvatar is often the shortest option. A decorated Container gives more control over borders, background colors, and image fitting.

Flutter Round Image Using BoxDecoration and DecorationImage

The existing example below uses a Container whose BoxDecoration has shape: BoxShape.circle. The image is supplied through DecorationImage, so the rectangular source image is painted inside a circular area.

The first image in the example is rectangular and is included for comparison. The second image uses the circular decoration.

</>
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(
                height: 150,
                width: 150,
                margin: EdgeInsets.all(10),
                child: Image(
                  image: NetworkImage(
                      '[https://www.tutorialkart.com/img/hummingbird.png](https://www.tutorialkart.com/img/hummingbird.png)'),
                ),
              ),
              Container(
                margin: EdgeInsets.all(10),
                width: 150,
                height: 150,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  image: DecorationImage(
                      image: NetworkImage(
                          '[https://www.tutorialkart.com/img/hummingbird.png](https://www.tutorialkart.com/img/hummingbird.png)'
                      ),
                      fit: BoxFit.fill
                  ),
                ),
              ),
            ]),
          ),
        ),
      ),
    );
  }
}

Run the application on an Android Emulator or connect a Physical Device to your computer and try running on this device. The widgets shall appear on the screen as shown in the below screenshot.

Flutter Round Image

The first widget that displays the image is only for comparison purpose. The second widget is the actual circular or round image which we are trying to demonstrate in this tutorial.

For photographs, BoxFit.cover is usually preferable to stretching the image because it fills the circle while preserving the image’s aspect ratio. Parts of the image may be cropped when the source aspect ratio does not match the square display area.

Flutter CircleAvatar with a Network Image

CircleAvatar is designed for circular user images and similar avatar content. Set radius to control its size and provide the image through backgroundImage.

</>
Copy
CircleAvatar(
  radius: 60,
  backgroundImage: NetworkImage(
    'https://example.com/profile.jpg',
  ),
)

A radius of 60 produces a circle with a diameter of approximately 120 logical pixels, subject to surrounding layout constraints.

Flutter CircleAvatar with an Asset Image

For an image packaged with the Flutter application, use AssetImage instead of NetworkImage. The asset must also be declared correctly in the project’s pubspec.yaml.

</>
Copy
CircleAvatar(
  radius: 50,
  backgroundImage: AssetImage('assets/images/profile.jpg'),
)

This approach is useful for bundled profile images, icons, and other local image assets that need to appear as a circle.

Flutter Round Image with ClipOval

ClipOval clips its child to an oval. If the child has the same width and height, the result is a circle. This is useful when you already have an Image widget and want to clip it directly.

</>
Copy
ClipOval(
  child: Image.network(
    'https://example.com/photo.jpg',
    width: 120,
    height: 120,
    fit: BoxFit.cover,
  ),
)

The equal width and height create a square clipping area, and ClipOval turns that area into a circle. BoxFit.cover fills the available circle without distorting the image proportions.

Flutter Circular Image with a Border

A circular Container is convenient when the image also needs a visible border. Set both shape: BoxShape.circle and border in the same BoxDecoration.

</>
Copy
Container(
  width: 120,
  height: 120,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    border: Border.all(
      color: Colors.blue,
      width: 3,
    ),
    image: DecorationImage(
      image: NetworkImage('https://example.com/profile.jpg'),
      fit: BoxFit.cover,
    ),
  ),
)

The border follows the same circular shape as the image. Keeping the width and height equal prevents the intended circle from becoming constrained unexpectedly by an uneven parent layout.

Flutter Image with Rounded Corners Using ClipRRect

A round image and an image with rounded corners are different. Use ClipOval, CircleAvatar, or BoxShape.circle for a full circle. Use ClipRRect when the image should remain rectangular but have curved corners.

</>
Copy
ClipRRect(
  borderRadius: BorderRadius.circular(16),
  child: Image.network(
    'https://example.com/photo.jpg',
    width: 240,
    height: 160,
    fit: BoxFit.cover,
  ),
)

Increasing the radius makes the corners more curved, but the image remains rectangular unless the widget dimensions and radius are configured to produce a fully circular result.

Flutter Card Image with Rounded Corners

When an image appears inside a card, clipping the image itself ensures that its pixels do not extend beyond the intended corner radius.

</>
Copy
Card(
  clipBehavior: Clip.antiAlias,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
  ),
  child: Image.network(
    'https://example.com/card-image.jpg',
    width: 260,
    height: 160,
    fit: BoxFit.cover,
  ),
)

The card defines the rounded shape, while clipBehavior ensures that the child image is clipped to that shape.

Choosing Between CircleAvatar, ClipOval, and BoxDecoration in Flutter

  • Use CircleAvatar for profile pictures, contact avatars, and other simple circular identity images.
  • Use ClipOval when you already have an Image widget and want to clip it directly into a circle or oval.
  • Use BoxDecoration when you need a circular image together with borders, backgrounds, shadows, or other decoration options.
  • Use ClipRRect when you need rounded rectangular corners rather than a circular image.

Image Sizing and BoxFit for Flutter Circular Images

The image fitting mode affects how a photograph appears inside its circular bounds. BoxFit.cover scales the image until the available area is covered and may crop the edges. BoxFit.contain keeps the entire image visible but can leave unused space. BoxFit.fill fills both dimensions and can distort the source image when its aspect ratio differs from the target.

For most photographs displayed as round avatars, BoxFit.cover provides the expected result because it fills the circle while maintaining the original aspect ratio.

Flutter Round Image Summary

In this Flutter Tutorial, we learned how to display an image in a circular shape using BoxDecoration, CircleAvatar, and ClipOval. We also covered circular image borders, asset images, image sizing with BoxFit, and the difference between a fully round image and an image with rounded corners using ClipRRect.