Виджет Badge

Виджет Badge накладывает счётчик или точку на иконку или аватар. Оборачиваемый виджет передают в child, число или подпись - в label, цвет метки - в backgroundColor, смещение - в offset. Без label показывают маленькую точку.

Синтаксис

Badge(
	label: Text('3'),
	child: Icon(Icons.mail),
)

Параметры

Параметр	Описание
`child`	Виджет под меткой, обычно `Icon`.
`label`	Текст внутри метки. Null даёт точку.
`backgroundColor`	Цвет фона метки.

Пример

Давайте пометим иконку письма:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: Badge(
						label: Text('5'),
						child: Icon(Icons.mail, size: 48),
					),
				),
			),
		),
	);
}

На иконке конверта красная метка с цифрой 5.

Пример

Давайте покажем Badge без label:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				appBar: AppBar(
					actions: [
						Badge(
							child: IconButton(
								onPressed: () {},
								icon: Icon(Icons.notifications),
							),
						),
					],
				),
				body: Center(child: Text('abcde')),
			),
		),
	);
}

На колокольчике в AppBar видна маленькая точка уведомления.

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

виджет IconButton,
который часто оборачивают Badge
виджет CircleAvatar,
на который тоже ставят метку
виджет BottomNavigationBar,
где Badge помечают вкладки
виджет NavigationBar,
куда метки добавляют в Material 3