Flutter – CircleAvatar Widget

22 Feb, 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.
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 geekforgeeks logo whose address is provided inside the NetworkImages’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.
simranarora5sos
arorakashish0911
android
Flutter
Flutter-widgets
Android
Dart
Flutter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Android SDK and it's Components
Android RecyclerView in Kotlin
Android Project folder Structure
Broadcast Receiver in Android With Example
Flutter - Custom Bottom Navigation Bar
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
Flutter - Asset Image
Splash Screen in Flutter
Flutter - Checkbox Widget