flutter - 如何在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"),
  ),
)