Как добавить ярлык вверху кнопки в флаттере

Question

Я просто пробовал флаттер для развития android, и у меня есть кнопка с именем Play Online. Я хочу добавить диагональную метку с надписью Coming soon!. Я перепробовал все возможные способы и тоже погуглил, но решения не нашел.

Кнопка выглядит так:

Мой код для этой кнопки приведен ниже:

           Padding(
              padding: const EdgeInsets.all(0),
              child: ButtonTheme(
                minWidth: MediaQuery.of(context).size.width * 0.7,
                height: 50.0,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(100.0)),
                child: RaisedButton(
                  child: Text(
                    'Play Online',
                    style: TextStyle(color: Colors.white, fontSize: 20.0),
                  ),

                  onPressed: () { },
                ),
              ),
            ),

Я хочу, чтобы моя кнопка выглядела следующим образом.

Answer 1

Вы можете попробовать использовать виджет Stack, чтобы добавить Text поверх кнопки, а затем оберните Text с помощью Transform, чтобы повернуть его, это небольшой пример, который вы можете настроить по мере необходимости. Wi sh. Вам нужно импортировать dart:math для значения pi.

Padding(
          padding: const EdgeInsets.all(0),
          child: Stack(
            alignment: AlignmentDirectional.topEnd,
            children: <Widget>[
              ButtonTheme(
                minWidth: MediaQuery.of(context).size.width * 0.7,
                height: 50.0,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(100.0)),
                child: RaisedButton(
                  child: Text(
                    'Play Online',
                    style: TextStyle(color: Colors.white, fontSize: 20.0),
                  ),
                  onPressed: () {},
                ),
              ),
              Transform.rotate(
                angle: 2*pi / 12.0,
                child: Text(
                  "coming soon",
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.red, fontSize: 18),
                ),
              ),
            ],
          ),
        ),