Image zoomed into CircleAvatar widget in flutter

user_11309239 0
Viewed 1289

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

flutter
1 Answers

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,
    ),
  ),
);
user_150337630
Related