Flutter Badge Widget

CodeWithFlutter
2 Min Read

The Badge widget in Flutter is a small graphical element used to represent a notification, status, or count. Badges are often used to show a count, such as the number of unread notifications, or to indicate a status, such as a pending task.

Here’s an example of using the Badge widget in Flutter:

Badge(
  badgeContent: Text('3'),
  child: Icon(Icons.notifications),
)

In this example, the Badge widget is used to wrap an Icon widget. The badgeContent property is set to a Text widget that displays the count of unread notifications.

Here are some of the key properties of the Badge widget:

  • badgeContent: The content to display in the badge. This can be any widget, but it’s usually a Text widget.
  • child: The child widget to wrap in the badge. This is usually an Icon widget.
  • shape: The shape of the badge. By default, the badge is circular. You can also use other shapes, such as CircleBorder or RoundedRectangleBorder.
  • padding: The padding around the badge content.
  • position: The position of the badge relative to the child widget. You can use the BadgePosition enumeration to choose from several positions, such as topRight, bottomLeft, and bottomRight.
  • color: The color of the badge background. By default, the color is red.
Share this Article
Leave a comment