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

Does this answer your question? [RaisedButton vs ElevatedButton, FlatButton vs TextButton and OutlineButton vs OutlinedButton](https://stackoverflow.com/questions/64179998/raisedbutton-vs-elevatedbutton-flatbutton-vs-textbutton-and-outlinebutton-vs-ou) — iDecode, May 18 '21 at 12:40

score 32 · Accepted Answer · answered Mar 25 '21 at 18:46

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

hbamithkumara · Answer 2 · 2021-05-23T17:49:35.500

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

score 16 · Answer 3 · edited Jun 17 '22 at 02:18

16

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

edited Jun 17 '22 at 02:18

Stacky

875
9
24

answered Jan 11 '22 at 13:34

Vishal_VE

1,852
1
6
9

Sanka Werapitiya · Answer 4 · 2022-10-25T15:09:58.213

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

score 2 · Answer 5 · edited Mar 17 '23 at 21:51

2

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*/
          ),

edited Mar 17 '23 at 21:51

Khamidjon Khamidov

6,783
6
31
62

answered Jan 30 '23 at 08:04

Majid Ebrahimi

21
2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 02 '23 at 09:52

score 1 · Answer 6 · edited Jun 18 '22 at 09:48

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

score 0 · Answer 7 · answered Feb 27 '23 at 06:23

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

score 0 · Answer 8 · answered May 31 '23 at 11:52

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

score -1 · Answer 9 · answered Jul 31 '21 at 10:22

-1

This worked for me, Use:

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

Instead of:

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

answered Jul 31 '21 at 10:22

Umair Sultan

618
6
10

ElevatedButton is not a FlatButton as it has an elevation property! – Delicia Fernandes Nov 12 '21 at 16:34

score -1 · Answer 10 · edited Sep 08 '22 at 06:46

-1

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

edited Sep 08 '22 at 06:46

pmatatias

3,491
3
10
30

answered Sep 01 '22 at 11:10

elrick edward

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – lepsch Sep 08 '22 at 22:20

Flutter FlatButton is deprecated - alternative solution with width and height

10 Answers10

Linked