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
4
Simply wrap it with ClipRRect() widget and then provide the radius and require parameters.
Your Issue will be resolved.
1
Looking at your image, it already has transparent empty space in the image itself, try crop that space in any image editor tool.
1