Flutter – Widget CircleAvatar

El widget CircleAvatar viene integrado con el SDK de flutter. Es simplemente un círculo en el que podemos agregar color de fondo, imagen de fondo o simplemente algún texto. Suele representar a un usuario con su imagen o con sus iniciales. Aunque podemos hacer un widget similar desde cero, este widget es útil en el desarrollo rápido de una aplicación.

Constructor de la clase CircleAvatar: 

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}
)

Propiedades del widget CircleAvatar:

• backgroundColor: Esta propiedad toma la clase Color ( final) como parámetro. Esta propiedad decide el color de fondo del círculo y, de forma predeterminada, se establece en ThemeData.primaryColorLight.
• backgroundImage: esta propiedad contiene la clase ImageProvider<T extends Object> (final) como parámetro. Esta propiedad aplica una imagen de fondo al widget CircleAvatar .
• child: la propiedad child toma el widget para colocarlo debajo del widget CircleAvatar dentro del árbol de widgets o el widget para mostrarlo dentro del círculo.
• color de primer plano: esta propiedad contiene la clase de color ( final) como valor del parámetro. Decide el color predeterminado del texto dentro del CircleAvatar.
• maxRadius: esta propiedad toma un valor doble para decidir el tamaño máximo que puede alcanzar el CircleAvatar .
• minRadius: Esta propiedad minRadius también toma un valor doble como parámetro y decide el tamaño mínimo del CircleAvatar.
• onBackgroundImageError: esta propiedad controla qué hacer si falta la imagen de fondo por algún motivo.
• radio: la propiedad de radio también tiene un valor doble como parámetro para decidir el tamaño de CircleAvatar en términos de su radio.

Sintaxis:

void Function(
dynamic exception,
StackTrace stackTrace
) onBackgroundImageError

Ejemplo 1: En este ejemplo, hemos mostrado un círculo verde que contiene texto.

dardo principal

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
  );
}

Producción: 

Nota: También podemos usar la propiedad de color de primer plano para 
asignar el color de texto predeterminado en lugar de hacerlo en TextStyle.

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

Explicación: en el widget de CircularAvatar hemos establecido el radio en 100 , de vuelta backgroundColor como greenAccent[400] . CircleAvatar toma el widget de texto como un niño. El texto es ‘GeeksforGeeks’. Y también hemos aplicado estilo al texto dándole un tamaño de fuente de 25 y color de texto blanco.

Ejemplo 2: aquí hemos agregado una imagen en CircleAvatar de Internet. 

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

Producción:

Explicación: En este ejemplo, hemos establecido una imagen dentro del widget CircleAvatar usando la propiedad backgroundImage . La imagen es el logotipo de geekforgeeks cuya dirección se proporciona dentro del argumento de NetworkImages . Y por último, le hemos asignado 100 como valor al radio del CircleAvatar.

Ejemplo 3: En este ejemplo, hemos agregado un borde alrededor de 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
        ...

Producción:

Explicación: aquí hemos agregado dos bordes alrededor de NetworkImage que agregamos en el ejemplo anterior. Esencialmente, lo que tenemos abajo es que hemos envuelto el CircleAvatar que contiene una imagen y tiene un radio de 100 px, con dos widgets más de CircleAvatar de mayor tamaño. Ahora, el CircleAvatar superior tiene un fondo de color verde y un radio de borde de 115 px. Y en el CircleAvatar debajo de eso, hemos establecido backgroundColor como greenAccent [400] y el radio es de 110 px.

Entonces, así es como podemos usar el widget CircleAvatar en flutter y para ver el código completo de estos ejemplos, puede hacer clic aquí .