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

MendelG · Accepted Answer · 2021-03-21 21:23:08Z

1070

Use ClipRRect it will work perfectly.

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

edited Mar 21, 2021 at 21:23

MendelG

17.9k4 gold badges28 silver badges59 bronze badges

answered Jul 25, 2018 at 8:26

Abdi Hamid

10.8k1 gold badge11 silver badges8 bronze badges

44

Thanks ! I did it as you said, and then added fit: BoxFit.fill, it looks pretty good.
– Liu Silong
Jul 26, 2018 at 1:40
2

Thanks - do you have any idea on how to create a colourful border to the clipRRect'ed image ?
– iKK
Jan 31, 2019 at 13:53
8

@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, ), ), )
– Daniel Allen
Jul 22, 2019 at 12:44
2

thanks, a tip : only works with a same width and height
– Álvaro Agüero
Jul 26, 2019 at 15:02
20

Small heads up that ClipRRect can be confused with ClipRect, which doesn't have borderRadius.
– Konstantin Kozirev
Nov 30, 2020 at 13:51

| Show 2 more comments

CopsOnRoad · Accepted Answer · 2022-01-07 21:54:48Z

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.}

if child image is not square clipping will be elliptic in this solution. — Bilal Şimşek, Apr 23, 2020 at 21:45

onmyway133 · Accepted Answer · 2019-03-12 13:54:10Z

116

You can also use CircleAvatar, which comes with flutter

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

answered Mar 12, 2019 at 13:54

onmyway133

46.9k32 gold badges263 silver badges269 bronze badges

2

This is the best answer. I did extra backgroundImage: member[index].picture == null ? Image(image: AssetImage('assests/no-image.png')) : NetworkImage( member[index].picture,
– saviour123
Jul 6, 2019 at 14:34
@saviour123 not every image with rounded corners is a 'avatar'. Accepted one is the generic answer.
– nipunasudha
Nov 23, 2019 at 6:51
3

Can't set a height or width with this widget, which is problematic.
– papillon
Feb 7, 2020 at 9:38

Add a comment |

Delicia Fernandes · Accepted Answer · 2020-07-14 02:22:26Z

76

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,
  ),
),

edited Jul 14, 2020 at 2:22

Delicia Fernandes

61913 silver badges19 bronze badges

answered Jun 12, 2019 at 7:34

Faisal Kc

7746 silver badges8 bronze badges

Your aswer is definitely helpful, thanks! But what if content of a container is not just an image but a widget? Any idea?
– Oleksandr
Apr 28, 2020 at 10:38
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.
– knkbga
Oct 10, 2020 at 8:45
3

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.
– Maruf Hassan
Aug 1, 2021 at 20:25

Add a comment |

reza · Accepted Answer · 2022-01-30 22:28:46Z

Try this, with CircleAvatar and load image with CachedNetworkImage.

CircleAvatar(
  radius: 45,
  child: ClipOval(
    child: CachedNetworkImage(
      imageUrl:  "https:// your image url path",
      fit: BoxFit.cover,
      width: 80,
      height: 80,
    ),
  ),
),

if you want border also, then add

backgroundColor: Colors.deepOrangeAccent,

inside this

CircleAvatar(
  radius: 45,
  backgroundColor: Colors.deepOrangeAccent,
  child: ClipOval(
    child: CachedNetworkImage(
      imageUrl: "https:// your image url path",
      fit: BoxFit.cover,
      width: 80,
      height: 80,
    ),
  ),
),

Taufiq Rahman · Accepted Answer · 2020-05-09 16:10:14Z

23

   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")
        )
    )),

edited May 9, 2020 at 16:10

Taufiq Rahman

5,6663 gold badges37 silver badges45 bronze badges

answered Apr 8, 2019 at 12:01

simhachalam

2392 silver badges4 bronze badges

Add a comment |

P.J.Radadiya · Accepted Answer · 2022-12-21 03:38:19Z

17

This is the code that I have used.

Container(
  width: 200.0,
  height: 200.0,
  decoration: BoxDecoration(
    image: DecorationImage(image: NetworkImage('Network_Image_Link')),
    color: Colors.blue,
    borderRadius: BorderRadius.all(Radius.circular(25.0)),
  ),
),

Thank you!!!

edited Dec 21, 2022 at 3:38

P.J.Radadiya

1,5251 gold badge12 silver badges21 bronze badges

answered Feb 19, 2021 at 20:08

Anuj Choudhary

6617 silver badges8 bronze badges

Add a comment |

kalehmann · Accepted Answer · 2019-03-14 09:57:50Z

14

For image use this

ClipOval(
    child: Image.network(
        'https://url to your image',
        fit: BoxFit.fill,
    ),
);

While for Asset Image use this

ClipOval(
    child: Image.asset(
        'Path to your image',
        fit: BoxFit.cover,
    ),
)

edited Mar 14, 2019 at 9:57

kalehmann

4,8816 gold badges26 silver badges36 bronze badges

answered Mar 14, 2019 at 9:36

ikben

4,4264 gold badges22 silver badges27 bronze badges

Add a comment |

kinjal dhamat · Accepted Answer · 2023-08-25 04:46:40Z

We can use following ways to create Rounded Corners Image in Flutter.

Container:

Container(
  width: 150,
  height: 120,
  clipBehavior: Clip.antiAlias,
  decoration:  BoxDecoration(
    borderRadius: BorderRadius.circular(15) // Adjust the radius as needed
  ),
  child: Image.network(
    'https://picsum.photos/seed/picsum/200/300',
    fit: BoxFit.cover,
  ),
),

Card:

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(15), // Adjust the radius as needed
  ),
  clipBehavior: Clip.antiAlias,
  elevation: 5.0,
  child: Image.network(
    'https://picsum.photos/seed/picsum/200/300',
    width: 150,
    height: 120,
    fit: BoxFit.cover,
  ),
)

ClipRRect

ClipRRect(
  borderRadius: BorderRadius.circular(15), // Adjust the radius as needed
  child: Image.network(
    'https://picsum.photos/seed/picsum/200/300',
    fit: BoxFit.cover,
    width: 150,
    height: 120,
  ),
)

Physical Model:

PhysicalModel(
    color: Colors.transparent,
    borderRadius: BorderRadius.circular(10),
    clipBehavior: Clip.antiAlias,
    elevation: 5.0,
    child: Image.network(
      'https://picsum.photos/seed/picsum/200/300',
      width: 150,
      height: 120,
      fit: BoxFit.cover,
    ))

Sana Ebadi · Accepted Answer · 2019-12-18 11:20:45Z

you can use ClipRRect like this :

  Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(25),
                    child: Image.asset(
                      'assets/images/pic13.jpeg',
                      fit: BoxFit.cover,
                    ),
                  ),
                )

you can set your radius, or user for only for topLeft or bottom left like :

Padding(
              padding: const EdgeInsets.all(8.0),
              child: ClipRRect(
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(25)
                ,bottomLeft: Radius.circular(25)),
                child: Image.asset(
                  'assets/images/pic13.jpeg',
                  fit: BoxFit.cover,
                ),
              ),
            )

Patrick G. · Accepted Answer · 2020-03-16 16:02:30Z

With new version of flutter and material theme u need to use the "Padding" widgett too in order to have an image that doesn't fill its container.

For example if you want to insert a rounded image in the AppBar u must use padding or your image will always be as high as the AppBar.

Hope this will help someone

InkWell(
        onTap: () {
            print ('Click Profile Pic');
        },
        child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: ClipOval(
                child: Image.asset(
                    'assets/images/profile1.jpg',
                ),
            ),
        ),
    ),

Yogesh Alai · Accepted Answer · 2020-01-14 12:42:19Z

6

Use ClipRRect with set image property of fit: BoxFit.fill

ClipRRect(
          borderRadius: new BorderRadius.circular(10.0),
          child: Image(
            fit: BoxFit.fill,
            image: AssetImage('images/image.png'),
            width: 100.0,
            height: 100.0,
          ),
        ),

answered Jan 14, 2020 at 12:42

Yogesh Alai

1813 silver badges5 bronze badges

Add a comment |

Jitesh Mohite · Accepted Answer · 2020-09-25 13:29:08Z

6

Output:

Using BoxDecoration

Container(
              margin: EdgeInsets.all(8),
              width: 86,
              height: 86,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                    image: NetworkImage('https://i.stack.imgur.com/0VpX0.png'),
                    fit: BoxFit.cover
                ),
              ), 
           ),

answered Sep 25, 2020 at 13:29

Jitesh Mohite

32.7k14 gold badges164 silver badges151 bronze badges

Add a comment |

Paras Sharma · Accepted Answer · 2020-05-05 14:34:59Z

4

Use ClipRRect it will resolve your problem.

      ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
              child: Image.network(
                Constant.SERVER_LINK + model.userProfilePic,
                fit: BoxFit.cover,
              ),
            ),

answered May 5, 2020 at 14:34

Paras Sharma

2113 silver badges2 bronze badges

Add a comment |

Ajit Singh · Accepted Answer · 2019-08-25 01:23:59Z

3

Use this Way in this circle image is also working + you have preloader also for network image:

new ClipRRect(
     borderRadius: new BorderRadius.circular(30.0),
     child: FadeInImage.assetNetwork(
          placeholder:'asset/loader.gif',
          image: 'Your Image Path',
      ),
    )

answered Aug 25, 2019 at 1:23

Ajit Singh

398 bronze badges

Add a comment |

Mahamat · Accepted Answer · 2020-03-14 13:58:16Z

3

Try This it works well.

Container(
  height: 220.0,
  width: double.infinity,
  decoration: BoxDecoration(
    borderRadius: new BorderRadius.only(
      topLeft: Radius.circular(10),
       topRight: Radius.circular(10),
    ),
    image: DecorationImage(
      fit: BoxFit.fill,
      image: NetworkImage(
        photoUrl,
      ),
     ),
   ),
);

answered Mar 14, 2020 at 13:58

Mahamat

3314 silver badges14 bronze badges

Add a comment |

Hrishikesh Kadam · Accepted Answer · 2023-10-06 12:42:31Z

3

For anyone struggling to add a rounded corner image as an item of ListView:

FittedBox(
  fit: BoxFit.scaleDown, // This helps in shrinking the ClipRRect to the size of the Image
  child: ClipRRect(
    borderRadius: BorderRadius.circular(8),
    child: Image.asset(
      'assets/app-icons/app-icon.png',
      width: 96,
      height: 96,
    ),
  ),
);

answered Oct 6, 2023 at 12:42

Hrishikesh Kadam

36.5k3 gold badges30 silver badges38 bronze badges

Add a comment |

mewadaarvind · Accepted Answer · 2022-08-16 13:08:56Z

Image all side rounder corner try this one

Container(
 // height and width depend on your your requirement.
 height: 220.0,
 width: double.infinity,
 decoration: BoxDecoration(
   // radius circular depend on your requirement
   borderRadius: new BorderRadius.all(
    Radius.circular(10),
    ),
    image: DecorationImage(
    fit: BoxFit.fill,
     // image url your network image url       
      image: NetworkImage(
       "dynamic image url",
     ),
    ),
   ),
 );

Safal Bhatia · Accepted Answer · 2022-11-17 06:30:05Z

2

For Circular Image in Flutter

ClipRRect(
child: Image.asset(
"assets/images/ic_cat.png",
width: 80,
height: 80,
),
borderRadius: BorderRadius.circular(50),
))

If U want only corners of image then simple change the BorderRadius.circular like below

ClipRRect(
child: Image.asset(
"assets/images/ic_cat.png",
width: 80,
height: 80,
),
borderRadius: BorderRadius.circular(20),
))

edited Nov 17, 2022 at 6:30

answered Nov 17, 2022 at 6:24

Safal Bhatia

3452 silver badges6 bronze badges

Add a comment |

jizhihaoSAMA · Accepted Answer · 2020-07-05 05:32:07Z

1

user decoration Image for a container.

  @override
  Widget build(BuildContext context) {
    final alucard = Container(
        decoration: new BoxDecoration(
        borderRadius: BorderRadius.circular(10),
          image: new DecorationImage(
              image: new AssetImage("images/logo.png"),
              fit: BoxFit.fill,
          )
        )
    );

edited Jul 5, 2020 at 5:32

jizhihaoSAMA

12.5k9 gold badges29 silver badges50 bronze badges

answered Jul 5, 2020 at 3:58

S.R Keshav

2,0131 gold badge12 silver badges14 bronze badges

the BoxFit.fill distortions the image, and if you use contain the border radius is lost.
– Ramiro G.M.
Dec 24, 2022 at 2:40

Add a comment |

Collectives™ on Stack Overflow

How to do Rounded Corners Image in Flutter

20 Answers 20

1. Circular image (without border)

Using `CircleAvatar`:

Using `ClipRRect`:

2. Circular image (with border)

Using `CircleAvatar`:

Using `ClipRRect`:

3. Rounded image (without border)

4. Rounded image (with border)

Not the answer you're looking for? Browse other questions tagged
flutter
image
flutter-layout
rounded-corners
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

20 Answers 20

1. Circular image (without border)

Using CircleAvatar:

Using ClipRRect:

2. Circular image (with border)

Using CircleAvatar:

Using ClipRRect:

3. Rounded image (without border)

4. Rounded image (with border)

Not the answer you're looking for? Browse other questions tagged flutterimageflutter-layoutrounded-corners or ask your own question.

Linked

Related

Using `CircleAvatar`:

Using `ClipRRect`:

Using `CircleAvatar`:

Using `ClipRRect`:

Not the answer you're looking for? Browse other questions tagged
flutter
image
flutter-layout
rounded-corners
or ask your own question.