How To Draw A Circle Flutter

CircleAvatar widget comes built-in with the palpitate SDK. It is simply a circle in which we tin can add together background color, background image, or only some text. It usually represents a user with his image or with his initials. Although nosotros can make a like widget from the basis up, this widget comes in handy in the fast development of an application.

Constructor Of CircleAvatar Class:

const CircleAvatar( {Primal key, Widget child, Colour 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 grade (final) as the parameter. This property decides the background colour of the circle and past default, information technology 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.
kid: The kid holding takes the widget to be placed below the CircleAvatar widget inside the widget tree or the widget to be displayed within the circle.
foregroundColor: This property holds the Color class (final) as the parameter value. Information technology decides the default color of the text inside the CircleAvatar.
maxRadius: This holding takes in a double value to make up one's mind the maximum size the CircleAvatar can get to.
minRadius: This minRadius belongings as well 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 belongings also holds a double value as the parameter to decide the size of CircleAvatar in terms if its radius.

Syntax:

void Part( dynamic exception, StackTrace stackTrace ) onBackgroundImageError

Case 1: In this example, nosotros have shown a green circle, property some text.

chief.sprint

Dart

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

Output:

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

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

Explanation: In the CircularAvatar widget we accept set the radius to exist 100, dorsum backgroundColor as greenAccent[400]. CircleAvatar takes Text widget as a kid. The text is 'GeeksforGeeks'. And we have also way text a bit by giving it a font-size of 25 and text-colour white.

Instance ii: Hither we have added an prototype in CircleAvatar from the internet.

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

Output:

Caption: In this example, we accept set an prototype inside the CircleAvatar widget using the backgroundImage property. The image is geekforgeeks logo whose address is provided inside the NetworkImages's argument. And at concluding, we have assigned 100 as value to the radius of the CircleAvatar.

Example three: In this instance, we have added a border around the CircleAvatar.

          // Lawmaking snippet of CircleAvatar                      ...          body: Center(           child: CircleAvatar(             backgroundColor: Colors.green,             radius: 115,             child: CircleAvatar(               backgroundColor: Colors.greenAccent[100],               radius: 110,               kid: 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. Substantially what nosotros take down is we have wrapped the CircleAvatar which contains an paradigm and has a radius of 100 px, with ii more CircleAvatar widgets of a bigger size. Now, the top-most CircleAvatar is given a background of green colour and a edge-radius of 115 px. And in the CircleAvatar below that, nosotros have set backgroundColor as greenAccent[400] and the radius for it is 110 px.

Then, this is how we can use CircleAvatar widget in flutter and for total code of these examples, y'all can click here.