How to convert a "FlatButton" to "TextButton" in Flutter?

Question

I got following code:

      FlatButton.icon(
        minWidth: double.infinity,
        padding: EdgeInsets.symmetric(
          vertical: kDefaultPadding,
        ),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ),
        color: kPrimaryColor,
        onPressed: () {},
        icon: WebsafeSvg.asset("assets/Icons/Edit.svg", width: 16),
        label: Text(
          "New message",
          style: TextStyle(color: Colors.white),
        ),
      ).addNeumorphism(
        topShadowColor: Colors.white,
        bottomShadowColor: Color(0xFF234395).withOpacity(0.2),
      ),

It seems the FlatButtun is now deprecated and I must convert it to TextButton but when I try that, it gives me errors for minWith parameter. When I try to wrap it with ConstrainedBox I get other errors for padding shape, etc.

I don't know how make this old code work as expected before?

I think you'll have to use `TextButton.icon` and then wrap it with the correct corresponding widgets, such as `Padding`/`SizedBox`. Regarding styling, you can use the `style` parameter. — MendelG, Dec 28 '22 at 00:07
Here the changes are explained https://docs.flutter.dev/release/breaking-changes/buttons. Can you show us the TextButton code that you have tried? — MaLa, Dec 28 '22 at 00:07

MendelG · Accepted Answer · 2022-12-28T01:37:56.147

As I've commented, you can't just "convert" a FlatButton.icon to a TextButton.icon. The changes in the buttons are breaking changes made to Flutter:

A new set of basic material button widgets and themes have been added to Flutter. The original classes have been deprecated and will eventually be removed. The overall goal is to make buttons more flexible, and easier to configure via constructor parameters or themes.

So, to solve your problem, you'll have to compose your own widgets to get close to FlatButton.icon.

For your example, you can use the Padding widget for padding, and SizedBox for the width. for rounded corners, you can use the style property.

Your button code can look something like this using TextButton.icon:

SizedBox(
      width: double.infinity,
      child: Padding(
        padding: EdgeInsets.symmetric(
          vertical: 10,
        ),
        child: TextButton.icon(
          //rounded corners
          style: ButtonStyle(
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
              RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(18.0),
              ),
            ),
          ),

          onPressed: () {},
          icon: WebsafeSvg.asset("assets/Icons/Edit.svg", width: 16),
          label: Text(
            "New message",
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    )

Thank you for your help but it still says: `The named parameter 'child' isn't defined. Try correcting the name to an existing named parameter's name, or defining a named parameter with the name 'child'.` in this line of the code `child: TextButton.icon(` — best_of_man, Dec 28 '22 at 01:14

How to convert a "FlatButton" to "TextButton" in Flutter?

1 Answers1