How to display circle avatar on AppBar?

Question

I am trying to display Circle Avatar on AppBar.

Here is my code

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

Here is the second way which I tried

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

In first case the image is not displayed as circular and in second case it is displayed as egg shaped instead of circular.

Answer 1

You can wrap it in a FlatButton like

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

Answer 2

Your first option is the correct approach. The reason its not appearing circular is because of the radius you defined and image size you are using. Here is a live example of the same with correct radius according to image.

Your options are

1. define correct radius according to the image size you are using.
2. Re-scale the image if required.
3. When your network image is null dont pass an icon to backgroundImage since it expects and ImageProvider and not Icon. So it will fail in this case.