CircleAvatar插件自带内置与flutterSDK。它只是一个圆圈，我们可以在其中添加背景颜色，背景图像或仅添加一些文本。它通常用其图像或首字母代表用户。尽管我们可以从头开始制作一个类似的小部件，但是该小部件在应用程序的快速开发中非常有用。
CircleAvatar类的构造方法：
const CircleAvatar(
{Key key,
Widget child,
Color backgroundColor,
ImageProviderCircleAvatar小部件的属性：
- backgroundColor：此属性采用Color类(最终)作为参数。此属性确定圆的背景颜色，默认情况下，它设置为ThemeData.primaryColorLight。
- backgroundImage：此属性保存ImageProvider
类(最终) 作为参数。此属性将背景图像应用于CircleAvatar小部件。 - child： child属性将窗口小部件放置在窗口小部件树内的CircleAvatar小部件下方，或将其显示在圆内。
- 前景色：此属性将Color类(最终)保存为参数值。它决定CircleAvatar中文本的默认颜色。
- maxRadius：此属性采用双精度值来确定CircleAvatar可以达到的最大大小。
- minRadius：此minRadius属性还接受一个双精度值作为参数，它决定了CirculAvatar的最小大小。
- onBackgroundImageError：此属性控制如果由于某些原因缺少背景图像该怎么办。
- radius： radius属性还包含一个双精度值作为参数来确定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
);
} 输出：
注意：我们也可以使用前景色属性
指定默认的文本颜色，而不是在TextStyle中进行设置。
...
foregroundColor: Colors.white,
...
说明：在CircularAvatar小部件中，我们将半径设置为100 ，将backgroundColor设置为greenAccent [400] 。 CircleAvatar将“文本”小部件作为一个子级。文本为“ 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周围添加了两个边框。从本质上讲，我们要包装的CircleAvatar包含一个图像，该图像的半径为100 px，另外还有两个更大的CircleAvatar小部件。现在，最顶层的CircleAvatar具有绿色背景和115 px的边框半径。在下面的CircleAvatar中，我们将backgroundColor设置为greenAccent [400]，其半径为110 px。
因此，这是我们如何在flutter使用CircleAvatar小部件的方法，有关这些示例的完整代码，请单击此处。