Image with Rounded corners in Flutter
Recently I was trying to build a Card with rounded corners in Flutter. Inside it, there was an Image. Just Like this.
My first attempt was to put our Image inside a container with a radius. So did I, and the result was not satisfying.
Container(
height: 200,
width: 350,
decoration: (BoxDecoration(
borderRadius: BorderRadius.circular(45),
)),
child: Image(
fit: BoxFit.cover,
image: NetworkImage(
'https://images.unsplash.com/photo-1526749837599-b4eba9fd855e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80'),
),
)
The above Code gave me this.
:crying_face:
clearly, this is not the result we want.
After a fair time of Googling, I found the solution. It was to use ClipRRect instead of Container.
So the code,
ClipRRect(
borderRadius: BorderRadius.circular(45),
child: Image(
height: 200,
width: 350,
fit: BoxFit.cover,
image: NetworkImage(
'https://images.unsplash.com/photo-1526749837599-b4eba9fd855e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80'),
),
)
will give us this.
And thatโs the result we were hunting. :smiling_face:
Finally, if you found this helpful, please share this within your reach so that more people can benefit from this. And Follow me on Twitter for getting more posts like these ๐.
Join my email list to get the latest posts and updates.