CircleAvatar小部件内置于flutter SDK 中。它只是一个圆圈，我们可以在其中添加背景颜色、背景图像或一些文本。它通常用他的图像或他的姓名首字母代表用户。虽然我们可以从头开始制作一个类似的小部件，但这个小部件在应用程序的快速开发中会派上用场。
CircleAvatar 类的构造函数：
const CircleAvatar(
{Key key,
Widget child,
Color backgroundColor,
ImageProviderCircleAvatar 小部件的属性：
- backgroundColor：该属性以颜色类( final)为参数。此属性决定圆圈的背景颜色，默认情况下，它设置为ThemeData.primaryColorLight。
- backgroundImage：此属性将ImageProvider
类(最终) 作为参数。此属性将背景图像应用于CircleAvatar小部件。 - child： child属性将小部件放置在小部件树中的CircleAvatar小部件下方或将小部件显示在圆圈内。
- foregroundColor：此属性将Color类 ( final)作为参数值。它决定了CircleAvatar 中文本的默认颜色。
- maxRadius：此属性采用双精度值来决定CircleAvatar可以达到的最大尺寸。
- minRadius：这个minRadius属性也接受一个 double 值作为参数，它决定了CirculAvatar的最小尺寸。
- onBackgroundImageError：此属性控制如果由于某种原因缺少背景图像时要执行的操作。
- radius： radius属性也有一个double值作为参数来决定CircleAvatar的大小，如果它的半径。
句法：
void Function(
dynamic exception,
StackTrace stackTrace
) onBackgroundImageError示例 1：在此示例中，我们显示了一个绿色圆圈，其中包含一些文本。
主要的。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: () {},
), //IcoButton
actions: [
IconButton(
icon: Icon(Icons.comment),
tooltip: 'Comment',
onPressed: () {},
), //IconButton
], //[]
), //AppBar
body: Center(
child: CircleAvatar(
backgroundColor: Colors.greenAccent[400],
radius: 100,
child: Text(
'GeeksForGeeks',
style: TextStyle(fontSize: 25, color: Colors.white),
), //Text
), //CirlceAvatar
), //Center
), //Scaffold
debugShowCheckedModeBanner: false,
), //MaterialApp
);
} 输出：
注意：我们也可以使用foregroundColor属性来
指定默认文本颜色，而不是在 TextStyle 中执行。
...
foregroundColor: Colors.white,
...
说明：在CircularAvatar小部件中，我们将半径设置为100 ，背景色设置为greenAccent[400] 。 CircleAvatar将Text小部件视为子项。文字是“GeeksforGeeks”。我们还通过将字体大小设置为 25 和文本颜色为白色来对文本进行样式设置。
示例 2：这里我们在CirlceAvatar 中添加了来自互联网的图像。
// Code snippet of CircleAvatar
...
body: Center(
child: CircleAvatar(
backgroundImage: NetworkImage(
"https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"),
radius: 100,
), //CircleAvatar
...
输出：
说明：在本例中，我们使用backgroundImage属性在CircleAvatar小部件内设置了一个图像。该图像是 geekforgeeks 徽标，其地址在NetworkImages的参数中提供。最后，我们为 CircleAvatar 的半径指定了 100 作为值。
示例 3：在此示例中，我们在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
...
输出：
说明：这里我们在上一个示例中添加的NetworkImage周围添加了两个边框。从本质上讲我们有什么下来是我们包裹其中包含图像，具有100像素的半径，具有更大的尺寸的两个CircleAvatar小部件CircleAvatar。现在，最顶部的 CircleAvatar 被赋予绿色背景和 115 像素的边框半径。在其下方的CircleAvatar中，我们将backgroundColor设置为greenAccent [400]，其半径为 110 px。
所以，这是我们如何能够在小部件flutter和这些例子完整的代码使用CircleAvatar，您可以点击这里。