如何在 BottomNavigationBarItem 中绝对定位徽章答案

【问题标题】：How do I absolutely position a badge in a BottomNavigationBarItem如何在 BottomNavigationBarItem 中绝对定位徽章
【发布时间】：2018-05-05 03:43:14
【问题描述】：

我正在使用 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 小部件来实现这一点？如果没有，什么是好的解决方法？

【问题讨论】：

标签： dart flutter

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如果它对任何人有用，我制作了一个可以在 AppBar 中使用的。

static Widget makeIconWithBadge(String badgeText, GestureTapCallback onTap) {
    return Container(
      padding: EdgeInsets.only(right: 16.0),
      child: Center(
        child: new Stack(
          overflow: Overflow.visible,
          children: <Widget>[
            const Icon(Icons.inbox),
            new Positioned(
              top: -6.0,
              right: -6.0,
              child: Container(
                padding: EdgeInsets.all(2.0),
                decoration: new BoxDecoration(
                  borderRadius: new BorderRadius.circular(99.0),
                  color: Colors.white,
                ),
                child: new Container(
                  padding: EdgeInsets.symmetric(vertical: 1.0, horizontal: 4.0),
                  decoration: new BoxDecoration(
                      borderRadius: new BorderRadius.circular(99.0),
                      color: Colors.red),
                  child: Center(
                    child: new Text(
                      "12",
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.white, fontSize: 12.0,),
                    ),
                  ),
                ),
              ),
            ),
            Positioned.fill(
              child: Material(
                borderRadius: BorderRadius.all(Radius.circular(99.0)),
                color: Colors.transparent,
                child: InkWell(onTap: onTap),
              ),
            )
          ],
        ),
      ),
    );
  }

【讨论】：