Виджет CircleAvatar

Виджет CircleAvatar показывает круглый значок пользователя или категории. Фон задают в backgroundColor, картинку - в backgroundImage, иконку или текст - в child, радиус - в radius. Часто стоят в leading у ListTile.

Синтаксис

CircleAvatar(
	radius: 24,
	backgroundColor: Colors.blue,
	child: Text('A'),
)

Параметры

Параметр	Описание
`radius`	Радиус круга в логических пикселях.
`backgroundColor`	Цвет заливки круга.
`backgroundImage`	Картинка на фоне круга.
`child`	Иконка или буква поверх фона.

Пример

Давайте покажем аватар с буквой:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: CircleAvatar(
						child: Text('abcde'),
					),
				),
			),
		),
	);
}

По центру круг с инициалами из текста.

Пример

Давайте поставим CircleAvatar в ListTile:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: ListTile(
					leading: CircleAvatar(
						backgroundColor: Colors.green,
						child: Icon(Icons.person),
					),
					title: Text('12345'),
				),
			),
		),
	);
}

Слева от строки зелёный круг с иконкой человека.

Смотрите также

виджет ListTile,
в leading которого ставят CircleAvatar
виджет UserAccountsDrawerHeader,
который рисует аватар в шапке drawer
виджет DrawerHeader,
куда тоже кладут круглое фото
виджет Badge,
которым помечают аватар счётчиком