Как мне абсолютно разместить значок в BottomNavigationBarItem

Question

Я использую BottomNavigationBarItem для отображения нижнего интерфейса навигации с иконками и текстом. Я хотел бы иметь возможность добавлять значки с числовыми значениями на них. Вот моя текущая попытка:

  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

Если это кому-нибудь пригодится, я сделал тот, который работает в 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),
              ),
            )
          ],
        ),
      ),
    );
  }

Answer 2

убедитесь, что позиция значка правильная, а переполненные дочерние элементы должны быть видны

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