How to add badge to BottomNavigationBarItem in Flutter?

Question

I have a BottomNavigationBar

BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_cart),
            label: 'MyCart',
          ),
          .
          .
          .
          ])

I want add badge to MyCart icon, i saw Stack was used for BottomNavigationBar's icon like this:

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

but when I use it I get this error:

The values in a const list literal must be constants.
Try removing the keyword 'const' from the list literal.

What's unclear about the error? It tells you exactly how to fix it. — Christopher Moore, Oct 09 '20 at 14:53
I overlooked it when you answered I checked again and saw that const is before items — Baran Gungor, Oct 09 '20 at 14:57

score 3 · Accepted Answer · answered Oct 09 '20 at 14:54

3

Remove the const keyword before declaring the items inside BottomNavigationBar

answered Oct 09 '20 at 14:54

Stale Noobs

130
1
7

1

also you dont need to add `new` everytime you create a new widget :) – Stale Noobs Oct 09 '20 at 15:04
Thanks for help bro , i overlooked :/ – Baran Gungor Oct 09 '20 at 15:20

score 0 · Answer 2 · answered Oct 09 '20 at 14:57

The type of MyCart is <Widget> and you set the items property on BottomNavigationBar to type List<BottomNavigationBarItem> set it to List<Widget>.Don't set it to List<dynamic> because all the children must be flutter widgets.If you do that and again call MyCart() you will display to following Widget tree:

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

could be other solutions

dGoran · Answer 3 · 2020-10-09T15:09:34.307

you do not need to use new/const, etc. see code below...

 bottomNavigationBar: BottomNavigationBar(items: [
          BottomNavigationBarItem(
            label: 'aaaaaa',
            icon: Stack(children: <Widget>[
              Icon(Icons.home),
              Positioned(
                // draw a red marble
                top: 0.0,
                right: 0.0,
                child: Icon(Icons.brightness_1, size: 8.0, color: Colors.redAccent),
              )
            ]),
          ),
          BottomNavigationBarItem(
            label: 'dddddd',
            icon: Stack(children: <Widget>[
              Icon(Icons.home),
              Positioned(
                // draw a red marble
                top: 0.0,
                right: 0.0,
                child: Icon(Icons.brightness_1, size: 8.0, color: Colors.redAccent),
              )
            ]),
          )
        ]),

Thanks for help bro, i overlooked :/ – Baran Gungor Oct 09 '20 at 15:03 — Baran Gungor, Oct 09 '20 at 15:03

How to add badge to BottomNavigationBarItem in Flutter?

3 Answers3