Flutter card top radius is covered by Image
Don't use clipBehavior: Clip.antiAliasWithSaveLayer
if you really care about the performance. Use a Container
or a DecoratedBox
with a BorderRadius
as mentioned in chemamolins'answer.
Refer to Performance best practices
You can set clipBehavior
for Card:
Card(
clipBehavior: Clip.antiAliasWithSaveLayer, ...
Or you can wrap your image in ClipRRect
ClipRRect(
borderRadius: BorderRadius.vertical(top: Radius.circular(4.0)),
child: Image.network(...),
)
You need to put your image in a Container
or a DecoratedBox
and set the BorderRadius
on the BoxDecoration
.
children: <Widget>[
.....
Container(
width: double.maxFinite,
height: 220.0,
decoration: BoxDecoration(
borderRadius:
BorderRadius.vertical(top: Radius.circular(5.0)),
image: DecorationImage(
image: NetworkImage(
'https://img.zcool.cn/community/012157578c405f0000012e7e69e7cd.jpg@1280w_1l_2o_100sh.jpg'),
fit: BoxFit.cover,
),
),
),
...
]
You can put the image in Material
and set the Border Radius
and Clip Behaviour
.
Material(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
elevation: 2.0,
clipBehavior: Clip.antiAliasWithSaveLayer,
type: MaterialType.transparency,
child: Image.asset(
"images/user.png",
height: 150,
width: double.infinity,
fit: BoxFit.cover,
),
),