Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter FlatButton is deprecated - alternative solution with width and height

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),
      ),
    );
  }
like image 869
Moo Avatar asked Mar 25 '21 18:03

Moo


People also ask

What can I use instead of FlatButton in Flutter?

The FlatButton , RaisedButton and OutlineButton widgets have been replaced by TextButton , ElevatedButton , and OutlinedButton respectively.

How do you use FlatButton in Flutter?

In Flutter, FlatButton is usually used to display buttons that lead to secondary functionalities of the application like viewing all files of Gallery, opening Camera, changing permissions etc. FlatButton has been depreciated. Please use TextButton instead. FlatButton does not have an elevation unlike Raised Button.

What can I use instead of a flat button?

This class is deprecated, please use TextButton instead. FlatButton and RaisedButton have been replaced by TextButton and ElevatedButton respectively.


2 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),
    ),
  );
}
like image 127
Patrick O'Hara Avatar answered Sep 20 '22 14:09

Patrick O'Hara


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

like image 20
hbamithkumara Avatar answered Sep 22 '22 14:09

hbamithkumara