I’m using circular images inside circular containers, but there always seems to be some space left in the container.
I’ve tried using ClipOval
, CircleAvatar
to clip the image and experimented with BoxFit.cover
and BoxFit.fill
. I also adjusted the width and height of the containers, but I still notice gaps, especially in certain aspect ratios. How can I ensure that the image fits perfectly within the circular container without leaving any space?
And also, when I use Image.asset
directly with the same width and height for the container, the image still appears smaller than the container.
Column(
children: [
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
image: DecorationImage(
image: AssetImage('assets/10.png'),
fit: BoxFit.fill,
),
),
width: 100,
height: 100,
),
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
width: 100,
height: 100,
child: Image.asset(
'assets/10.png',
fit: BoxFit.cover,
),
),
],
)
Thank you
2
Answers
Simply wrap it with ClipRRect() widget and then provide the radius and require parameters.
Your Issue will be resolved.
Looking at your image, it already has transparent empty space in the image itself, try crop that space in any image editor tool.