dart - 如何在 BottomNavigationBarItem 中绝对定位徽章

Question

我正在使用 BottomNavigationBarItem 来显示带有图标和文本的底部导航 UI。我希望能够在这些徽章上添加带有数值的徽章。这是我目前的尝试:

  bottomNavigationBar:
      new BottomNavigationBar(items: <BottomNavigationBarItem>[
        new BottomNavigationBarItem(
        icon: new Stack(
          children: <Widget>[
            const Icon(Icons.home),
            new Positioned(
                top: 0.0,
                left: 0.0,
                child: new Container(
                  decoration: new BoxDecoration(
                      borderRadius: new BorderRadius.circular(4.0),
                      color: Colors.red),
                  width: 16.0,
                  child: new Text(
                    "12",
                    style: const TextStyle(color: Colors.white),
                  ),
                ))
          ],
        ),
        title: new Text("Home")),
        new BottomNavigationBarItem(
        icon: const Icon(Icons.star), title: new Text("Star")),
      ],
      type: BottomNavigationBarType.fixed),

但是，徽章位于图标的边界框内，因此它与图标严重重叠:

相反，我想要的是这样的东西:

是否可以使用 BottomNavigationBarItem 小部件实现此目的？如果不是，什么是好的解决方法？

Answer 1

确保徽章位置正确，溢出的 child 应该是可见的

icon: new Stack(
              overflow: Overflow.visible,
              children: <Widget>[
                const Icon(Icons.home),
                new Positioned(
                    top: -1.0,
                    right: -6.0,
                    child: new Container(
                      decoration: new BoxDecoration(
                          borderRadius: new BorderRadius.circular(4.0), color: Colors.red),
                      width: 16.0,
                      child: new Text(
                        "12",
                        style: const TextStyle(color: Colors.white),
                      ),
                    ))
              ],
            ),