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?

Answer 1

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