How to do Rounded Corners Image in Flutter

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

[![enter image description here][1]][1]


[1]:

You can also use `CircleAvatar`, which comes with flutter

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

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

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

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

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

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

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

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

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