# Badge

Small numerical value or status descriptor for UI elements.

# FLBadge

FLBadge provides the ability to display and hide badges for sub-widget, and you can also configure the badge color, text, and position.

BottomNavigationBar(
  items: [
    BottomNavigationBarItem(
        icon: FLBadge(
          child: Icon(Icons.home),
          hidden: !_showBadge,
          shape: FLBadgeShape.circle,
        ),
        title: Text('home')
    ),
    BottomNavigationBarItem(
        icon: FLBadge(
          child: Icon(Icons.chat),
          hidden: !_showBadge,
          text: '99+',
        ),
        title: Text('chat')
    ),
    BottomNavigationBarItem(
        icon: FLBadge(
          child: Icon(Icons.shopping_cart),
          hidden: !_showBadge,
          position: FLBadgePosition.topLeft, // default is topRight
          shape: FLBadgeShape.spot,
        ),
        title: Text('cart'),
    )
  ],
)

Tips

If text is not set, the shape property will become FLBadgeShape.spot.

# API

# FLBadge

property	description	type	default value
color	main color	Color	Colors.red
shape	shape	FLBadgeShape	FLBadgeShape.circle
textStyle	text style	TextStyle	TextStyle(color: Colors.white, fontSize: 8)
position	badge position	FLBadgePosition	FLBadgePosition.topRight
hidden	show or hidden	bool	false
radius	radius of badge	double	9
text	text	String
child	child widget	Widget

← Avatar Image →