CODEWITHSUNDEEP
androidflutterdart
Deepak Kumar
Deepak Kumar

Reputation: 1294

How to add a label on the top of button in flutter

I was just trying flutter for android development and I have a button called Play Online. I want to add a diagonal label on it saying Coming soon!. I tried all the possible ways and I googled also but won't get any solution.

The button looks like this:

existing

My code for this button is like below:

           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: () { },
                ),
              ),
            ),

I want my button to look like this.

desired

Upvotes: 0

Views: 1762

Answers (1)

Abbas.M
Abbas.M

Reputation: 3384

You can try using a Stack widget to add a Text on top of the button and then wrap the Text with a Transform to rotate it, this is a small example you can tweak it as you wish. You need to import dart:math for the pi value.

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

Upvotes: 3

Related Questions