Флаттер: Как переполнить кнопку внутри коробки?

Question

Я пытаюсь воспроизвести эту кнопку макета

Я создал стек с контейнером и позиционированной кнопкой, но не могу выбрать кнопку из box.

                  Stack(children: <Widget>[
                    Container(
                      decoration: new BoxDecoration(
                        shape: BoxShape.rectangle,
                        border: new Border.all(
                        color: Colors.black,
                        width: 1 
                        )
                      ),
                      child: Text("League of legends")
                    ),
                    Positioned(
                      right: 0,
                      bottom: 0,
                      child: Container(
                        width: 9,
                        height: 9,
                        child: new Container(
                          width: 9,
                          height: 9,
                          decoration: new BoxDecoration(
                            color: Colors.white,
                            shape: BoxShape.circle,
                          ),
                        ),
                      )
                    )
                  ])

Я пытался добавить Padding, но безуспешно.

Результат моего кода такой:

Answer 1

Конструктор Stack имеет аргумент overflow, который позволяет вам выбирать, рисовать ли его дочерние элементы за пределами его границы.

Передав Overflow.visible в overflow и установив отрицательный значения в right и bottom в Positioned(), вы можете сделать круг из коробки.

Stack(
  overflow: Overflow.visible,
  children: <Widget>[
    Container(
      decoration: ...,
      child: ...,
    ),
    Positioned(
      right: -4,
      bottom: -4,
      child: Container(
        width: 9,
        height: 9,
        decoration: new BoxDecoration(
          color: Colors.white,
          shape: BoxShape.circle,
        ),
      ),
    )
  ],
)

Я сократил избыточно вложенные контейнеры в один.