How to do Rounded Corners Image in Flutter

Question

I am using Flutter to make a list of information about movies. Now I want the cover image on the left to be a rounded corners picture. I did the following, but it didn’t work. Thanks!

    getItem(var subject) {
    var row = Container(
      margin: EdgeInsets.all(8.0),
      child: Row(
        children: <Widget>[
          Container(
            width: 100.0,
            height: 150.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(8.0)),
              color: Colors.redAccent,
            ),
            child: Image.network(
              subject['images']['large'],
              height: 150.0,
              width: 100.0,
            ),
          ),
        ],
      ),
    );
    return Card(
      color: Colors.blueGrey,
      child: row,
    );
  }

as follows

Solution 1

Use ClipRRect it will work perfectly.

ClipRRect(
    borderRadius: BorderRadius.circular(8.0),
    child: Image.network(
        subject['images']['large'],
        height: 150.0,
        width: 100.0,
    ),
)

Solution 2

1. Circular image (without border)

• Using CircleAvatar:

  CircleAvatar(
    radius: 48, // Image radius
    backgroundImage: NetworkImage('imageUrl'),
  )
  

• Using ClipRRect:

  ClipOval(
    child: SizedBox.fromSize(
      size: Size.fromRadius(48), // Image radius
      child: Image.network('imageUrl', fit: BoxFit.cover),
    ),
  )
  

---

2. Circular image (with border)

• Using CircleAvatar:

  CircleAvatar(
    radius: 56,
    backgroundColor: Colors.red,
    child: Padding(
      padding: const EdgeInsets.all(8), // Border radius
      child: ClipOval(child: Image.network('imageUrl')),
    ),
  )
  

• Using ClipRRect:

  Container(
    padding: EdgeInsets.all(8), // Border width
    decoration: BoxDecoration(color: Colors.red, shape: BoxShape.circle),
    child: ClipOval(
      child: SizedBox.fromSize(
        size: Size.fromRadius(48), // Image radius
        child: Image.network('imageUrl', fit: BoxFit.cover),
      ),
    ),
  )
  

---

3. Rounded image (without border)

ClipRRect(
  borderRadius: BorderRadius.circular(20), // Image border
  child: SizedBox.fromSize(
    size: Size.fromRadius(48), // Image radius
    child: Image.network('imageUrl', fit: BoxFit.cover),
  ),
)

---

4. Rounded image (with border)

final borderRadius = BorderRadius.circular(20); // Image border

Container(
  padding: EdgeInsets.all(8), // Border width
  decoration: BoxDecoration(color: Colors.red, borderRadius: borderRadius),
  child: ClipRRect(
    borderRadius: borderRadius,
    child: SizedBox.fromSize(
      size: Size.fromRadius(48), // Image radius
      child: Image.network('imageUrl', fit: BoxFit.cover),
    ),
  ),
)

_{There are other ways, like using DecoratedBox but that would make the answer bit too long.}

Solution 3

You can also use CircleAvatar, which comes with flutter

CircleAvatar(
  radius: 20,
  backgroundImage: NetworkImage('https://via.placeholder.com/140x100')
)

Solution 4

Try this instead, worked for me:

Container(
  width: 100.0,
  height: 150.0,
  decoration: BoxDecoration(
    image: DecorationImage(
        fit: BoxFit.cover, image: NetworkImage('Path to your image')),
    borderRadius: BorderRadius.all(Radius.circular(8.0)),
    color: Colors.redAccent,
  ),
),

Solution 5

   Container(
      width: 48.0,
      height: 48.0,
      decoration: new BoxDecoration(
        shape: BoxShape.circle,
        image: new DecorationImage(
            fit: BoxFit.fill,
            image: NetworkImage("path to your image")
        )
    )),

View more solutions

Comments

[Liu Silong]

Thanks ! I did it as you said, and then added fit: BoxFit.fill, it looks pretty good.

[iKK]

Thanks - do you have any idea on how to create a colourful border to the clipRRect'ed image ?

[saviour123]

This is the best answer. I did extra backgroundImage: member[index].picture == null ? Image(image: AssetImage('assests/no-image.png')) : NetworkImage( member[index].picture,

[Daniel Allen]

@iKK - Wrap it in a Container with a BoxDecoration with the appropriate border/borderRadius props as so: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(3.0), border: Border.all(color: Colors.grey[300])), child: ClipRRect( borderRadius: BorderRadius.circular(3.0), child: Image.network( uri, fit: BoxFit.fill, width: imageDimension, height: imageDimension, ), ), )

[Álvaro Agüero]

thanks, a tip : only works with a same width and height

[nipunasudha]

@saviour123 not every image with rounded corners is a 'avatar'. Accepted one is the generic answer.

[papillon]

Can't set a height or width with this widget, which is problematic.

[Bilal Şimşek]

if child image is not square clipping will be elliptic in this solution.

[Oleksandr]

Your aswer is definitely helpful, thanks! But what if content of a container is not just an image but a widget? Any idea?

[knkbga]

Using this is giving me a runtime error. There are two elements in a "Stack". First element need to be an image with round corners for which I am looking for an answer.

[Prabowo Murti]

I am wondering why Image widget has no borderRadius parameter.

[Konstantin Kozirev]

Small heads up that ClipRRect can be confused with ClipRect, which doesn't have borderRadius.

[Andrey Molochko]

If you use fix hegiht and width like the example, border radius doesn't work!

[Maruf Hassan]

This is the best answer. The border property of Container should be used before ClipRRect because it is costly on the processor. If you use Image.asset() or Image.network() , this will not work in the image property of Container so you can use AssetImage() and NetworkImage() instead respectively.

[Pixie Dust]

This one worked for me!