Flutter – CircleAvatar Widget

Last Updated : 23 Sep, 2022

CircleAvatar widget comes built-in with the flutter SDK. It is simply a circle in which we can add background color, background image, or just some text. It usually represents a user with his image or with his initials. Although we can make a similar widget from the ground up, this widget comes in handy in the fast development of an application.

Constructor Of CircleAvatar Class:

const CircleAvatar(
{Key key,
Widget child,
Color backgroundColor,
ImageProvider<Object> backgroundImage,
void onBackgroundImageError(
dynamic exception,
StackTrace stackTrace
),
Color foregroundColor,
double radius,
double minRadius,
double maxRadius}
)

Properties Of CircleAvatar Widget:

backgroundColor: This property takes in Color class (final) as the parameter. This property decides the background color of the circle and by default, it is set to ThemeData.primaryColorLight.
backgroundImage: This property holds ImageProvider<T extends Object> class (final) as the parameter. This property applies a background image to the CircleAvatar widget.
child: The child property takes the widget to be placed below the CircleAvatar widget inside the widget tree or the widget to be displayed inside the circle.
foregroundColor: This property holds the Color class (final) as the parameter value. It decides the default color of the text inside the CircleAvatar.
maxRadius: This property takes in a double value to decide the maximum size the CircleAvatar can get to.
minRadius: This minRadius property also takes in a double value as the parameter and it decided the minimum size of the CircleAvatar.
onBackgroundImageError: This property controls what to do if the background image is missing due to some reason.
radius: The radius property also holds a double value as the parameter to decide the size of CircleAvatar in terms if its radius.

Syntax:

void Function(
dynamic exception,
StackTrace stackTrace
) onBackgroundImageError

Example 1: In this example, we have shown a green circle, holding some text.

main.dart

Dart

import 'package:flutter/material.dart';
 
void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Menu',
            onPressed: () {},
          ), //IconButton
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.comment),
              tooltip: 'Comment',
              onPressed: () {},
            ), //IconButton
          ], //<Widget>[]
        ), //AppBar
        body: Center(
          child: CircleAvatar(
            backgroundColor: Colors.greenAccent[400],
            radius: 100,
            child: Text(
              'GeeksForGeeks',
              style: TextStyle(fontSize: 25, color: Colors.white),
            ), //Text
          ), //CircleAvatar
        ), //Center
      ), //Scaffold
      debugShowCheckedModeBanner: false,
    ), //MaterialApp
  );
}

Output:

Note: We can also use foregroundColor property to
assign default text color instead of doing it in TextStyle.

   ...
foregroundColor: Colors.white,
   ...

Explanation: In the CircularAvatar widget we have set the radius to be 100, back backgroundColor as greenAccent[400]. CircleAvatar takes Text widget as a child. The text is ‘GeeksforGeeks’. And we have also style text a bit by giving it a font-size of 25 and text-color white.

Example 2: Here we have added an image in CircleAvatar from the internet.

       // Code snippet of CircleAvatar
       ...     
          body: Center(
          child: CircleAvatar(
            backgroundImage: NetworkImage(
                "https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"),
            radius: 100,
          ), //CircleAvatar
          ...

Output:

Explanation: In this example, we have set an image inside the CircleAvatar widget using the backgroundImage property. The image is geeksforgeeks logo whose address is provided inside the NetworkImage’s argument. And at last, we have assigned 100 as value to the radius of the CircleAvatar.

Example 3: In this example, we have added a border around the CircleAvatar.

          // Code snippet of CircleAvatar
        ...
        body: Center(
          child: CircleAvatar(
            backgroundColor: Colors.green,
            radius: 115,
            child: CircleAvatar(
              backgroundColor: Colors.greenAccent[100],
              radius: 110,
              child: CircleAvatar(
                backgroundImage: NetworkImage(
                    "https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"), //NetworkImage
                radius: 100,
              ), //CircleAvatar
            ), //CircleAvatar
          ), //CircleAvatar
        ), //Center
        ...

Output:

Explanation: Here we have added two borders around the NetworkImage that we added in the previous example. Essentially what we have down is we have wrapped the CircleAvatar which contains an image and has a radius of 100 px, with two more CircleAvatar widgets of a bigger size. Now, the top-most CircleAvatar is given a background of green color and a border-radius of 115 px. And in the CircleAvatar below that, we have set backgroundColor as greenAccent[400] and the radius for it is 110 px.

So, this is how we can use CircleAvatar widget in flutter and for full code of these examples, you can click here.