如何在 Flutter 中為 BottomNavigationBarItem 添加徽章？

Question

我有一個底部導航欄

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

我想為 MyCart 圖標添加徽章，我看到 Stack 被用於 BottomNavigationBar 的圖標，如下所示：

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

但是當我使用它時，我收到此錯誤：

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

Answer 1

在聲明BottomNavigationBar內的項目之前刪除const關鍵字

Answer 2

MyCart的類型是<Widget>並且您將BottomNavigationBar上的items屬性設置為List<BottomNavigationBarItem>將其設置為List<Widget>不要將其設置為List<dynamic>因為所有孩子都必須是 flutter widgets.If你這樣做並再次調用MyCart()你將顯示到以下小部件樹：

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

可能是其他解決方案

Answer 3

您不需要使用 new/const 等。請參閱下面的代碼...

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