How to do Rounded Corners Image in Flutter - 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

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

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

Answer 3

You can also use CircleAvatar, which comes with flutter
CircleAvatar(
radius: 20,
backgroundImage: NetworkImage('https://via.placeholder.com/140x100')
)

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

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

Answer 6

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

Answer 7

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

Answer 8

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!!!

Answer 9

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

Answer 10

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

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

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

Answer 15

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

Answer 16

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

Answer 17

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

Answer 18

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