Counter not shown in full circle on bottomnavigationbar

Question

I want to show the red counter in full circle on the farthest right and on the farthest top in stack with chat icon of bottomNavigationBar, but I only get this;

Here is my code;

 BottomNavigationBarItem(
                icon: Stack(children: [
                          Icon(Icons.chat),
                          Positioned(
                            top: -3,
                            right: -3,
                            child: Container(
                              width: 16,
                              height: 16,
                              decoration: BoxDecoration(
                                  shape: BoxShape.circle,
                                  color: Colors.red),
                              child: Center(
                                child: Text(
                                  '1'
                                  style: TextStyle(
                                      fontSize: 13,
                                      color: Colors.white,
                                ),
                              ),
                            ),
                          )
                        ]);
                     ),
                label: '채팅'),    

How can I show the red counter in full circle at the farthest right and the farthest top in the stack?

Answer 1

Just add sizedbox and re-position your Positioned widget like below:

BottomNavigationBarItem(
          icon: Stack(children: [
            SizedBox(height: 30, width: 40, child: Icon(Icons.chat)),
            Positioned(
                top: 0,
                right: -2,
                child: Container(
                  width: 20,
                  height: 16,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle, color: Colors.red),
                  child: Center(
                    child: Text(
                      '1',
                      style: TextStyle(
                        fontSize: 13,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ))
          ]),
          label: '채팅'),

The left one is the new edited icon and the right icon is your icon. Cheers