Flutter FlatButton is deprecated - alternative solution with width and height

Question

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

Answer 1

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

Answer 2

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

Reference

Migrating to the New Material Buttons and their Themes

New Buttons and Button Themes

Answer 3

Use TextButton instead of FlatButton in newer versions of flutter. It looks the same. for more info please read this Document.

TextButton(
           onPressed: () {/*what happened when tapped...*/},
           child: /*you can pass the widget you want to show in button, Usually use : Icon & Text*/
          ),

Answer 4

from flutter docs -

Migration guide

Use the following information to migrate your buttons to the new API.

Restoring the original button visuals In many cases it’s possible to just switch from the old button class to the new one. That’s assuming that the small changes in size/shape and the likely bigger change in colors, aren’t a concern.

To preserve the original buttons’ appearance in these cases, one can define button styles that match the original as closely as you like. For example, the following style makes a TextButton look like a default FlatButton:

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

TextButton(
  style: flatButtonStyle,
  onPressed: () { },
  child: Text('Looks like a FlatButton'),
)

Answer 5

This worked for me, Use:

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

Instead of:

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

Answer 6

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

Answer 7

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

Answer 8

Customizable flat button widget.

xflat_button.dart

import 'package:flutter/material.dart';

class XFlatButton extends StatelessWidget {
  final String text;
  final void Function()? onPressed;
  final double width;
  final double height;
  final IconData? iconData;
  final Color bgColor;
   final Color fgColor;

  const XFlatButton(
      {required this.text,
      this.onPressed,
      this.width = 200,
      this.height = 40,
      super.key,
      this.iconData,
      this.bgColor = Colors.blue,
      this.fgColor = Colors.white});
  @override
  Widget build(BuildContext context) {
    final ButtonStyle flatButtonStyle = TextButton.styleFrom(
      padding: EdgeInsets.symmetric(horizontal: 16.0),
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(20.0)),
      ),
      backgroundColor: bgColor,
      foregroundColor: fgColor
    );
    return SizedBox(
      width: width,
      height: height,
      child: TextButton(
          onPressed: onPressed,
          style: flatButtonStyle,
          //child: Text(text),
          child: iconData == null
              ? Text(text, style: TextStyle(color: fgColor),)
              : Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                  Icon(iconData, color: fgColor,),
                  SizedBox(
                    width: 10,
                  ),
                  Text(text, style: TextStyle(color: fgColor),),
                ])),
    );
  }
}

Call it like this:

XFlatButton(
            text: 'Восстановить тему по умолчанию',
            width: 350,
            iconData: Icons.restore,
            bgColor: Theme.of(context).colorScheme.primary, 
            fgColor: Theme.of(context).colorScheme.onPrimary,
            onPressed: (){
              ref.read(themeProvider.notifier).setState(defaultTheme);
            },
          ),

Answer 9

FlatButton also can replace with MaterialButton

  MaterialButton(
                 onPressed: () {  },
                 height: _height,
                 minWidth: _width,
                 color: Colors.grey,
                 padding: EdgeInsets.all(0),
                 child: Text(
                     "some text",
                     style: TextStyle(color: Colors.white),
                   ),
                 ),

Answer 10

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