skip to Main Content

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,
      ),  
    ),
  ],
)

Output

Sample asset image

Thank you

2

Answers


  1. Simply wrap it with ClipRRect() widget and then provide the radius and require parameters.
    Your Issue will be resolved.

    Login or Signup to reply.
  2. Looking at your image, it already has transparent empty space in the image itself, try crop that space in any image editor tool.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search