Flutter - Using CircleAvatar Widget Examples

This tutorial gives you examples of how to use CircleAvatar in Flutter.

If you need to display avatar of a user, Flutter has already provides a widget for it. The CircleAvatar is designed for that purpose. It creates a circle avatar where you can set the image to be used. This tutorial shows you how to use CircleAvatar including how to customize the look of it.

Setting Image and Background Color

An avatar usually has a picture. To set the picture, you can use backgroundImage property which is of type ImageProvider. The below example uses NetworkImage to load the image. But you can also use other classes that extend ImageProvider such as MemoryImage, FileImage, and ResizeImage.

  CircleAvatar(
    backgroundImage: NetworkImage('https://www.woolha.com/media/2020/03/eevee.png'),
  )

Output:

 

The image used in the above example has transparent background. Actually the blue color comes from the ThemeData. By default, if you don't set the backgroundColor, it will use ThemeData.primaryColorLight with dark foreground colors and ThemeData.primaryColorDark with light foreground colors. To change the color, just set the backgroundColor with the color you want.

  CircleAvatar(
    backgroundImage: NetworkImage('https://www.woolha.com/media/2020/03/eevee.png'),
    backgroundColor: Colors.red,
  )

Output:

 

Setting Size

The default radius of the avatar, if you don't specify it, it defaults to 20. To change the avatar size, you can use radius property.

  CircleAvatar(
    backgroundImage: NetworkImage('https://www.woolha.com/media/2020/03/eevee.png'),
    radius: 50,
  )

Output:

 

There are two other properties related to size: minRadius and maxRadius. The are used to set the minimum and maximum radius respectively. If you alredy use radius, you are not allowed to use minRadius and/or maxRadius. On the contrary, if either minRadius or maxRadius is set, you are not allowed to use radius.

  CircleAvatar(
    backgroundImage: NetworkImage('https://www.woolha.com/media/2020/03/eevee.png'),
    minRadius: 50,
    maxRadius: 75,
  )

Output:

 

Setting Child And Foreground Color

On top of the avatar, you can add any Widget in child property. The maximum width and height are the same as the avatar diameter. It supports any kind of Widget. One of the most common things to add is a Text.

For text color, it can be set using foregroundColor property, though you can override by setting style on the Text.

  CircleAvatar(
    backgroundImage: NetworkImage('https://www.woolha.com/media/2020/03/eevee.png'),
    radius: 50,
    child: Text('Eevee'),
    foregroundColor: Colors.red,
  )

Output:

Because the foregroundColor is set to a dark color and the backgroundColor is not specified, ThemeData.primaryColorLight is used as the backgroundColor.

 

CircleAvatar Properties

Below are the available properties you can pass in the constructor.

• Key key: The widget key, used to control if it's should be replaced.
• Widget child: The widget below this widget in the tree.
• Color backgroundColor: The color to fill the circle. If not specified, ThemeData.primaryColorLight is used with dark foreground colors, and ThemeData.primaryColorDark with light foreground colors.
• Color foregroundColor: The default text color for text in the circle. If this and backgroundColor are not specified, defaults to the primary text theme color. If not specified, but backgroundColor is specified, ThemeData.primaryColorLight is used for dark background colors and ThemeData.primaryColorDark for light background colors.
• ImageProvider backgroundImage: The background image of the circle.
• double radius: Raidus of the avatar. If this is specified, neither minRadius nor maxRadius may be specified. If neither this, minRadius nor maxRadius is specified, defaults to 20.
• double minRadius: The minimum size of the avatar.If this is specified, raidus may not be specified. Defaults to 0.
• double maxRadius: he maximum size of the avatar. If this is specified, raidus may not be specified. Defaults to double.infinity.