dart - Displaying notification badge on BottomNavigationBar's Icon

Question

I'd like to display notification badge (a colored marble) on the top right corner of BottomNavigationBar's Icon widget when a new message has arrived in the inbox tab. It is similar to https://developer.android.com/preview/features/notification-badges.html but for my case it is displayed in-app.

Any tips to paint the overlay on existing icon to create a custom Icon class?

Answer 1

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'),
),