如何在AppBar上显示圆形头像？

Question

我正在尝试在AppBar上显示Circle Avatar。

这是我的代码

AppBar(
    ...
    actions: <Widget>[
        CircleAvatar(
            radius: 14,
            backgroundImage: userProfilePictureValue != null
                ? NetworkImage(
                    userProfilePictureValue,
                )
                : Icon(Icons.add), 
        )
)

这是我尝试的第二种方法

AppBar(
    ...
    actions: <Widget>[
        Container(
            width: 20,
            height: 20,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color:Colors.blueGrey
            ),
            child: StreamBuilder<String>(
                stream: userProfilePicture,
                builder: (context, snapshot) {
                    return ClipOval(
                        child: userProfilePictureValue != null
                            ? CachedNetworkImage(
                                imageUrl:
                                    "${userProfilePictureValue}",
                                fit: BoxFit.fill,
                             )
                            : Icon(
                                Icons.person,
                                size: 40,
                                color: Colors.white,
                            ),
                    );
            }),
    )]
)

在第一种情况下，图像不显示为圆形，在第二种情况下，图像显示为蛋形而不是圆形。

Answer 1

您可以将其包装在FlatButton之类的

中

FlatButton(
  child: CircleAvatar(
    backgroundImage: AssetImage("your_image"),
  ),
)

Answer 2

您的第一个选择是正确的方法。其不显示为圆形的原因是由于您定义的半径和所使用的图像大小。这是live的示例，根据图片具有正确的半径。

您的选择是

1. 根据您使用的图像尺寸定义正确的半径。
2. 根据需要重新缩放图像。
3. 当您的网络映像为空时，请勿将图标传递给backgroundImage，因为它期望ImageProvider而不是Icon。因此，在这种情况下将失败。