Flutter FlatButton is deprecated - alternative solution with width and height

user_15382543 0
Viewed 38546

After Flutter Upgrade "FlatButton" is deprecated and I have to use TextButton instead. I didn't find a solution for a new button-type with width and height.

This is my working FlatButton. How can I solve it with textButton or elevatedButton?

_buttonPreview(double _height, double _width) {
    return FlatButton(
      onPressed: () {  },
      height: _height,
      minWidth: _width,
      color: Colors.grey,
      padding: EdgeInsets.all(0),
      child: Text(
        "some text",
        style: TextStyle(color: Colors.white),
      ),
    );
  }
flatbutton flutter deprecated
6 Answers

I followed the guide here: https://flutter.dev/docs/release/breaking-changes/buttons.

_buttonPreview(double _height, double _width) {
  final ButtonStyle flatButtonStyle = TextButton.styleFrom(
    minimumSize: Size(_width, _height),
    backgroundColor: Colors.grey,
    padding: EdgeInsets.all(0),
  );
  return TextButton(
    style: flatButtonStyle,
    onPressed: () {},
    child: Text(
      "some text",
      style: TextStyle(color: Colors.white),
    ),
  );
}
user_67215490

You could do something like this.

FlatButton To TextButton Migration

    final ButtonStyle flatButtonStyle = TextButton.styleFrom(
      primary: Colors.white,
      minimumSize: Size(88, 44),
      padding: EdgeInsets.symmetric(horizontal: 16.0),
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(2.0)),
      ),
      backgroundColor: Colors.blue,
    );

    return TextButton(
      style: flatButtonStyle,
      onPressed: () {
        print('Button pressed');
      },
      child: Text('FlatButton To TextButton Migration'),
    );
  }

Sample Buttons

enter image description here

Reference

Migrating to the New Material Buttons and their Themes

New Buttons and Button Themes

user_50287150

FlatButton is deprecated, so the best option is ElevatedButton.

Here is the code:

ElevatedButton(
  style: ElevatedButton.styleFrom(
    primary: Colors.teal,
    fixedSize: Size.fromWidth(100),
    padding: EdgeInsets.all(10),
  ),
  child: Text("Press Here"),
  onPressed: () {
    //Code Here
  },
)
user_164554210

Create a style that you might use for the button like this:

final ButtonStyle flatButtonStyle = TextButton.styleFrom(
  backgroundColor: Colors.blue,
  padding: EdgeInsets.all(8),
  //few more styles 
);

Then use the above style while replacing your flatButton

return TextButton(
  style: flatButtonStyle,
  onPressed: () {},
  child: Text(
    "some text",
    style: TextStyle(color: Colors.white),
  ),
);
user_144162720 
_buttonPreview(double _height, double _width) {
    return MaterialButton(
      onPressed: () {  },
      height: _height,
      minWidth: _width,
      color: Colors.grey,
      padding: EdgeInsets.all(0),
      child: Text(
        "some text",
        style: TextStyle(color: Colors.white),
      ),
    );
  }
user_140865060

This worked for me, Use:

ElevatedButton(
  onPressed: () {},
  child: Text('Simple FlatButton'),
)

Instead of:

FlatButton(
  onPressed: () {},
  child: Text('Simple FlatButton'),
)
user_45397290
Related