CODEWITHSUNDEEP
flutter
Salwa Badreddine
Salwa Badreddine

Reputation: 125

Image zoomed into CircleAvatar widget in flutter

I'm trying to display these avatars in a dropdown in a CircleAvatar widget. However, the image is not fitting properly in the CircleAvatar as shown in the image below. I tried cropping them and changing the size but it's still zoomed into the image. Any help would be appreciated. Below is the code for the list of avatars that I'm using to display in the dropdown.

   List<AvatarItem> avatars = <AvatarItem>[
    const AvatarItem(avatarString: 'female_avatar_1.png', avatar: Center(
      child: Padding(
        padding: const EdgeInsets.all(3.0),
        child: CircleAvatar(backgroundImage: AssetImage('assets/female_avatar_1.png'), backgroundColor: Colors.white, radius: 30.0,),
      ),
    )),
    const AvatarItem(avatarString: 'male_avatar_1.png', avatar: Center(
      child: Padding(
        padding: const EdgeInsets.all(3.0),
        child: CircleAvatar(backgroundImage: AssetImage('assets/male_avatar_1.png'), backgroundColor: Colors.white, radius: 30.0,),
      ),
    )),
    const AvatarItem(avatarString: 'female_avatar_2.png', avatar: Center(
      child: Padding(
        padding: const EdgeInsets.all(3.0),
        child: CircleAvatar(backgroundImage: AssetImage('assets/female_avatar_2.png'), backgroundColor: Colors.white, radius: 30.0,),
      ),
    )),
    const AvatarItem(avatarString: 'male_avatar_2.png', avatar: Center(
      child: Padding(
        padding: const EdgeInsets.all(3.0),
        child: CircleAvatar(backgroundImage: AssetImage('assets/male_avatar_2.png'), backgroundColor: Colors.white, radius: 30.0,),
      ),
    )),
    const AvatarItem(avatarString: 'gn_avatar.png', avatar: Center(
      child: Padding(
        padding: const EdgeInsets.all(3.0),
        child: CircleAvatar(backgroundImage: AssetImage('assets/gn_avatar.png'), backgroundColor: Colors.white, radius: 30.0,),
      ),
    )),
  ];

how it looks now

Upvotes: 5

Views: 2231

Answers (2)

iqfareez
iqfareez

Reputation: 887

In my case, by wrapping CircleAvatar with Column, the issue fixed.

Column(
  children: [
    CircleAvatar(
      radius: 50,
      backgroundColor: Colors.grey[400],
      backgroundImage: NetworkImage(
          'https://alphatar.vercel.app/api/og?s=A&hex=ffdd00&size=100'),
    )
  ],
),

Upvotes: 0

Kdon
Kdon

Reputation: 1225

I was having the same problem and just came across the answer based on the comments. Here is my similar example code using a FittedBox (also with a border with BoxDecoration) for anyone else who needs :)

return Container(
  child: FittedBox(
    fit: BoxFit.contain,
    child: CircleAvatar(
      radius: 60,
      backgroundImage: AssetImage('assets/images/$image'),
    ),
  ),
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    border: Border.all(
      color: Colors.pinkAccent.withOpacity(0.80),
      width: 6,
    ),
  ),
);

Upvotes: 3

Related Questions