Flutter UI Essentials — Badges

Displaying a badge is a cool way to deliver a small amount of information about its child component in mobile applications. Flutter has a Badge widget that we can use in an easy way. Badge is one of the communication widgets that changed with Material 3.

Badges are placed on the ending edge of icons, normally within other components.

Components which use badges

• Navigation bar
• Navigation rail
• Top app bars
• Tabs

Flutter Badge widget

Flutter Badge is a Material Design badge component. We can use it to show data about the child widget, such as status or count. Using them as decorators for navigation bar item icons is a typical implementation of the Badge widget.

The default values of a badge will work well with a default icon of size 24.

If the label is null, the default badge will be a filled circle with smallSize diameter. If we don’t specify the size in the theme data, it will be 6 by default. Otherwise it will be a StadiumBorder shaped “large” badge with height largeSize.

Material 3 Badge component

There are 2 types of badges.

• Small — simple circle to indicate an unread notification