Show network image in Circle Avatar in Flutter

A circular avatar typically refers to a circular-shaped user profile picture or image. The CircleAvatar widget in Flutter is commonly used to create circular avatars. This widget allows us to display an image or icon within a circular container.

Today we will see how to display a network image in circle avatar in proper way.

Network Image in CircleAvatar

CircleAvatar(
  radius: 100,
  backgroundImage: NetworkImage(imageUrl),
)

backgroundImage property of a CircleAvatar is used to set the background image of the circular avatar. This property takes an instance of ImageProvider, such as AssetImage or NetworkImage, allowing you to load an image from different sources. The background image is displayed within the circular boundary of the CircleAvatar and can be used to represent a user’s profile picture or any other relevant image in a circular form.

Output

Here we set image as background of CircleAvatar. This is the best way to display image in CircleAvatar. If we had used Image.network as the child of CircleAvatar, the image wouldn’t have fit properly within the circle. Then it would have appeared like this.

There are also other ways to show network image in circle avatar, We can use ClipOval as a child of CircleAvatar, instead of background image property.

CircleAvatar(
  child: ClipOval(
    child: Image.network(
      imageUrl,
      fit: BoxFit.cover,
      width: 100,
      height: 100,
    ),
  ),
)

This will also show the same result.

You can also learn how to show placeholder image while loading a network image in flutter