How to Round image corners with BoxFit.contain in flutter
You have to wrap your ClipRRect
widget with Center
or any Align
widget.
Most of the widgets will try to fill its parent, if the parent doesn't specify any alignment property.
In your case the ClipRRect
filled its parent Container
(300x300) since the container doesn't specify any alignment to its child. And Image with contain
property will try to maintain image ratio and being centered in ClipRRect
widget. So It made ClipRRect
corners invisible or no effect.
Demo: Dartpad
Scaffold(
backgroundColor: Colors.grey,
appBar: AppBar(
title: Text("My image size"),
),
body: Center(
child: Container(
color: Colors.red,
height: 300,
width: 300,
child: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(16),
child: Image.network(
'https://mfiles.alphacoders.com/847/847991.jpg',
fit: BoxFit.contain,
),
),
),
),
),
)
Edit: Here I used Center
widget. But you can also just simply specify alignment property in the Container
widget.
Payam Zahedi
I'm a Software Engineer fluent in Dart, Java, Kotlin languages, and Flutter, Android Frameworks. With more than six years of programming experience. I am very interested in learning in different fields, working on Open-Source projects, speaking in technical events, and participating in programming communities. In addition, I am one of the founders and speakers of the Persian Flutter Community.
Updated on December 20, 2022Comments
-
Payam Zahedi over 1 year
My problem is when I wrap the image with a container that has a specific size and uses BoxFit.contain property for it will not round the image. checkout the below image:
I think the image cant round itself because it cants expand to fill container. I know that I can use BoxFit.cover but I want to use BoxFit.contain because I have limited space and images that can be of any sizes. my code:@override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.grey, appBar: AppBar( title: Text(widget.title), ), body: Center( child: Container( color: Colors.red, height: 300, width: 300, child: ClipRRect( borderRadius: BorderRadius.circular(16), child: Image.network( 'https://i.ytimg.com/vi/fq4N0hgOWzU/maxresdefault.jpg', fit: BoxFit.contain, ), ), ), ), ); }