Flutter 2 - How to make rounded corners in the new TextButton and give it a height

user_14194418 0
Viewed 3152

How do i add give height and make its corner rounded in the new TextButton

This is how to do it in FlatButton which is now deprecated.

FlatButton(
    height: 44,
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
    color: Colors.green[900],
    minWidth: double.infinity,
    onPressed: () => cart.gtynAddToCart(productID),
    child: Text(
      'Button',
      style: TextStyle(color: Colors.white),
    ));
flutter
3 Answers

Since FlatButton is deprecated in Flutter 2.0, you can use TextButton

try

TextButton(
        onPressed: () => cart.gtynAddToCart(productID),
        child: Container(
            alignment: Alignment.center,
            height: 44,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(4)),
              color: Colors.green[900],
            ),
            style:ButtonStyle(tapTargetSize:MaterialTapTargetSize.shrinkWrap,
            ),
            // minWidth: double.infinity,
            child: Text(
              'Button',
              style: TextStyle(color: Colors.white),
            )))

I also find out another way to achieve, maybe you are interested in

TextButton(
                onPressed: () => cart.gtynAddToCart(productID),
                style: ButtonStyle(
                    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                    minimumSize:
                        MaterialStateProperty.all(Size(double.infinity, 44)),
                    shape: MaterialStateProperty.all(
                      RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(4.0)),
                    ),
                    backgroundColor:
                        MaterialStateProperty.all(Colors.green[900])),
                child: Text(
                  'Button',
                  style: TextStyle(color: Colors.white),
                  textAlign: TextAlign.center,
                ))
user_142330040

Use instead RawMaterialButton:

RawMaterialButton(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(
                      Radius.circular(22),
                    ),
                    side: BorderSide(color: Colors.white, width: 0.5)),
                onPressed: () {},
                child:
                    Text("Sign UP", style: TextStyle(color: Colors.white)),
              ),

the new TextButton widget is difficult to style :)

user_145720760

for the corner radius you have to use shape properties inside you can set something like below and for the height and width just give it padding.

FlatButton(
                child: Text('Rounded Rectangle Border'),
                onPressed: () {},
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15)),
                color: Colors.pink,
                textColor: Colors.white,
                padding: EdgeInsets.symmetric(horizontal: 50, vertical: 30),
              )
user_109318600
Related