Flutter FlatButton is deprecated – alternative solution with width and height – Flutter

The Problem:

In Flutter, the FlatButton widget has been deprecated and is replaced with TextButton. The challenge is to find an alternative way to create a button with specified width and height using TextButton or ElevatedButton while maintaining the functionality of the deprecated FlatButton.

The Solutions:

Solution 1: Create a Custom ButtonStyle to Customize the Button Size

To create a custom button that has a specific width and height using `TextButton`, you can follow these steps:

1. Define a ButtonStyle Object:

   • Create a ButtonStyle object named flatButtonStyle using the TextButton.styleFrom constructor.
   • Set the minimumSize property to specify the minimum size of the button. Use Size(_width, _height) to set the desired width and height.
   • Set the backgroundColor property to the desired color for the button.
   • Set the padding property to EdgeInsets.all(0) to remove any default padding around the button’s text.

2. Apply the Custom ButtonStyle to the TextButton:

   • In the TextButton widget, set the style property to the flatButtonStyle object you created in step 1.

3. Add the Text and OnPressed Handler:

   • Add the desired text inside the TextButton widget using the Text widget.
   • Specify the onPressed callback handler for the button.

Here’s an example of how you can implement this solution:

_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),
    ),
  );
}

With this approach, you can create a custom button with a specific width and height using TextButton.

Solution 2: FlatButton to TextButton migration

To migrate from FlatButton to TextButton with specified width and height, you can use the TextButton.styleFrom constructor to define the button’s style. Here’s an example implementation:

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

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

With this approach, you can create a TextButton with specific dimensions and style, similar to the deprecated FlatButton.

Solution 4: Use MaterialButton for a button with width and height

Flutter’s FlatButton widget has been deprecated and TextButton doesn’t offer a straightforward way to specify the button’s width and height. MaterialButton, however, can be used as a replacement for FlatButton, providing similar functionality with the ability to set both width and height.

To switch from FlatButton to MaterialButton, follow these steps:

1. Import the MaterialButton widget from the ‘material.dart’ package.
2. In your code, replace the FlatButton widget with MaterialButton.
3. Set the desired width and height for the button using the ‘height’ and ‘minWidth’ properties, respectively.
4. Customize the button’s appearance by setting properties like ‘color’ and ‘padding’.
5. Add a child widget, such as a Text widget, to specify the button’s content.

Here’s an example of how to use MaterialButton with specified width and height:

MaterialButton(
  onPressed: () {},
  height: 50,
  minWidth: 100,
  color: Colors.blue,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
  textColor: Colors.white,
  child: Text('Submit'),
);

This code creates a blue button with rounded corners, a height of 50, a minimum width of 100, and the text “Submit” in white.

By using MaterialButton instead of FlatButton, you can achieve a similar button behavior with the added flexibility of controlling the button’s width and height.

Solution 5: Use TextButton with height and minWidth arguments

To create a button with a specific width and height using `TextButton`, you can use the `height` and `minWidth` arguments. Here’s an example:

TextButton(
  onPressed: () { /* your code */ },
  style: ButtonStyle(
    minimumSize: MaterialStateProperty.all(Size(width, height)),
  ),
  child: Text('Your text'),
);

This will create a `TextButton` with the specified width and height. The `onPressed` callback will be called when the user taps the button.

You can also use the `ElevatedButton` widget to create a raised button with a shadow. The `ElevatedButton` widget has similar `height` and `minWidth` arguments that you can use to specify the size of the button.

ElevatedButton(
  onPressed: () { /* your code */ },
  style: ButtonStyle(
    minimumSize: MaterialStateProperty.all(Size(width, height)),
  ),
  child: Text('Your text'),
);

Both `TextButton` and `ElevatedButton` are Material Design widgets, so they will look consistent with the rest of your Flutter app.