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