Skip to main content

Set CircleAvatar Size in Flutter

CircleAvatar is a widget in Flutter that allows users to create circular images. It is useful for creating profile pictures or avatars, as it ensures that the image will always be displayed as a circle. To create a CircleAvatar, simply provide an imageBackground property and specify the radius of the circle. Alternatively, you can provide a child widget, which will be automatically clipped to a circle. CircleAvatar also supports placeholder widgets, which can be useful when loading images from the network.

In most cases, you need to change the size of the avatar. To do this, you can use the radius property. The default radius of the avatar is 20, but you can change it to any value you want. This is particularly useful if you want to create avatars of different sizes for different purposes.

If you are creating a profile picture for a user, you may want to consider using the Material Design guidelines, which recommend using an image that is at least 120×120 pixels. In addition, you should make sure that the image is cropped to a square before passing it to the CircleAvatar widget. This will ensure that it is correctly displayed as a circle.

CircleAvatar(
    backgroundImage: NetworkImage('https://cdn.pixabay.com/photo/2022/04/18/16/16/ship-7140939_960_720.jpg'),
    radius: 200
)

Other properties which can be used are minRadius and maxRadius.

CircleAvatar(
    backgroundImage: NetworkImage('https://cdn.pixabay.com/photo/2022/04/11/09/32/glacier-7125359_960_720.jpg'),
    minRadius: 100,
    maxRadius: 200,
),

By continuing to use the site, you agree to the use of cookies.