在 BottomNavigationBarItem 图标上添加文本小部件

Question

I want to show a small text widget containing a number representing the number of messages that a user received on the bottom right side of the Bottom NavigationBarItem. So if the user has no new messages the text does not appear, and if he has 3 new messages for example, a small circle widget containing "3" appears on the Messages icon.

BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.message,
            ),
            title: Text('Messages'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_box),
            title: Text('Profile'),
          ),
        ],
        currentIndex: 1,
        onTap: (_onItemTapped),
      )

Answer 1

Instead of an icon, you can put any widget. I put there a regular stack with two icons and It works fine:

BottomNavigationBar(
    items: <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        title: Text('Home'),
      ),
      BottomNavigationBarItem(
        icon: Stack(
          children: <Widget>[
            Icon(Icons.message),
            Positioned(
              top: 0.0,
              right: 0.0,
              child: Icon(
                Icons.brightness_1,
                size: 8.0,
                color: Colors.redAccent,
              ),
            ),
          ],
        ),
        title: Text('Messages'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.account_box),
        title: Text('Profile'),
      ),
    ],
    currentIndex: 1,
  ),

Answer 2

Use this code. May your problem will be solved. After v1.19.0 title was replaced with the label. so use this.

BottomNavigationBar(
    items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(icon: Icon(Icons.home), label: "home"),
      BottomNavigationBarItem(icon: Icon(Icons.search), label: "explore"),
      BottomNavigationBarItem(
          icon: Icon(Icons.notifications), label: "notification"),
    ],
  ),