如何在flutter中显示圆形头像？
如何在flutter中显示圆形头像？
提问于 2020-02-17 18:26:41
当使用下面的代码时，我希望得到一个圆形的头像图像，但得到的是一个椭圆形。我在Container上尝试了不同的参数，比如宽度和高度，但都没有帮助。
appBar: AppBar(
backgroundColor: Colors.white,
leading: IconButton(
icon: new Icon(Icons.star_border, color: Colors.black),
onPressed: () => {},
),
actions: <Widget>[
Container(
//height: 25.0,
// width: 25.0,
child: CircleAvatar(
backgroundImage: NetworkImage('https://lh3.googleusercontent.com/a-/AAuE7mChgTiAe-N8ibcM3fB_qvGdl2vQ9jvjYv0iOOjB=s96-c'),
)
/*
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
'https://lh3.googleusercontent.com/a-/AAuE7mChgTiAe-N8ibcM3fB_qvGdl2vQ9jvjYv0iOOjB=s96-c')),
),*/
),
],回答 4
Stack Overflow用户
回答已采纳
发布于 2020-02-17 18:33:06
您收到的是一个椭圆形，因为您使用的是高度有限的Appbar小部件中的CircleAvatar小部件。
尝试在CircleAvatar小部件中添加一个参数radius，它将返回您想要的图像的圆形。
根据需要，尝试更改半径大小值。
CircleAvatar(
backgroundImage: NetworkImage('https://lh3.googleusercontent.com/a-/AAuE7mChgTiAe-N8ibcM3fB_qvGdl2vQ9jvjYv0iOOjB=s96-c'),
radius: 15.0
)Stack Overflow用户
发布于 2020-02-17 18:37:40
我在过去遇到过这个问题，我发现将AvatarCircle包装在一个宽度为58的容器中可以解决圆周半径比问题，使其成为合适的圆周形状。增加或减少一个像素可能适合您的喜好。试试这个：
appBar: AppBar(
backgroundColor: Colors.white,
leading: IconButton(
icon: new Icon(Icons.star_border, color: Colors.black),
onPressed: () => {},
),
actions: <Widget>[
Container(
width: 58.0,
child: CircleAvatar(
backgroundImage: NetworkImage('https://lh3.googleusercontent.com/a-/AAuE7mChgTiAe-N8ibcM3fB_qvGdl2vQ9jvjYv0iOOjB=s96-c'),
)
),
],Stack Overflow用户
发布于 2020-08-06 21:46:30
我使用这个代码，并与各种大小的图像一起工作。
CircleAvatar(
child: ClipOval(
child: Image.network(items.logo, fit: BoxFit.fill),
),
backgroundColor: Colors.transparent,
radius: 30,
)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60260423
复制相关文章
相似问题
腾讯云开发者
