Displaying notification badge on BottomNavigationBar's Icon
One more variation of counting badge (implemented with Stack of Icon and wrapped in Container Text, which stretched when counter increase):
BottomNavigationBarItem(
icon: new Stack(
children: <Widget>[
new Icon(Icons.notifications),
new Positioned(
right: 0,
child: new Container(
padding: EdgeInsets.all(1),
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(6),
),
constraints: BoxConstraints(
minWidth: 12,
minHeight: 12,
),
child: new Text(
'$_counter',
style: new TextStyle(
color: Colors.white,
fontSize: 8,
),
textAlign: TextAlign.center,
),
),
)
],
),
title: Text('Notifications'),
),
Yes. It can be done by stacking two icons using the Stack
and Positioned
widget.
new BottomNavigationBarItem(
title: new Text('Home'),
icon: new Stack(
children: <Widget>[
new Icon(Icons.home),
new Positioned( // draw a red marble
top: 0.0,
right: 0.0,
child: new Icon(Icons.brightness_1, size: 8.0,
color: Colors.redAccent),
)
]
),
)
You can also nest the Stacks. For instance, if you would like to add item_count on the shopping_cart icon, you can do this:
icon: new Stack(
children: <Widget>[
new Icon(Icons.shopping_cart),
new Positioned(
top: 1.0,
right: 0.0,
child: new Stack(
children: <Widget>[
new Icon(Icons.brightness_1,
size: 18.0, color: Colors.green[800]),
new Positioned(
top: 1.0,
right: 4.0,
child: new Text(item_count,
style: new TextStyle(
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.w500)),
)
],
),
)
],
)