flutter - 图像在 flutter 中放大为 CircleAvatar 小部件

标签 flutter

我正在尝试在 CircleAvatar 小部件的下拉列表中显示这些头像。但是,如下图所示,该图像在 CircleAvatar 中不合适。我尝试裁剪它们并更改大小,但它仍然放大了图像。任何帮助,将不胜感激。下面是我用来在下拉列表中显示的头像列表的代码。

   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

最佳答案

我遇到了同样的问题,只是根据评论找到了答案。这是我使用 FittedBox(也带有 BoxDecoration 边框)的类似示例代码,供其他需要的人使用 :)

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

关于flutter - 图像在 flutter 中放大为 CircleAvatar 小部件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60713124/

相关文章:

flutter - 如何在 Flutter 中实现固定表头的表格?

flutter - Flutter 的 pubspec.yaml 中依赖版本号前的脱字符号 (^) 是什么?

flutter - 如何在 Canvas 上绘制小部件?

flutter - 在 Flutter 包中使用自定义图标字体显示问号而不是自定义图标

javascript - 如何修复预期类型为 'FirebaseError' 的值,但在 Flutter web 设置推送通知中获得类型 'DomException' 之一?

regex - 如何为特定格式构建正则表达式,在版本中效果很好

ios - 适用于 IOS 的 Flutter 应用程序,是否可以在不使用 Xcode 的情况下设置 IOS "Legacy Build System"?

flutter - 使容器比 child 大一点?

android - 该应用程序没有出现在我的手机抖动中

Flutter 覆盖其他应用程序