How can I change the background color of a textbutton in flutter?

Question

I'm trying to migrate my FlatButton to TextButton. Since FlatButtons are deprecated since I upgraded my flutter version. I'm currently struggling with adapting the background color.

Old button:

FlatButton(
        height: height,
        onPressed: onPressed,
        shape: baseButtonBorder,
        color: Colors.red,
        child: Text(label, style: TextStyle(color: fontColor, fontWeight: boldLabel ? FontWeight.bold : FontWeight.normal)),
      )`

New Button:

TextButton(
        onPressed: onPressed,
        style: ButtonStyle(backgroundColor: Colors.red), // <-- Does not work
        child: Text(label, style: TextStyle(color: fontColor, fontWeight: boldLabel ? FontWeight.bold : FontWeight.normal)),
      ),

The flat button does not have a color attribute so I tried to use the style attribute and add a ButtonStyle. How ever dart says:

The argument type 'MaterialColor' can't be assigned to the parameter type 'MaterialStateProperty<Color>'.

How can I style my TextButton with the color red like I used to do with my FlatButton? Do I need to create a MaterialStateProperty<Color> with red?

Answer 1

backgroundColor property is MaterialStateProperty<Color?> type. You can check in Flutter documentation.

So you have to use MaterialStateProperty class to apply color. A quick example :

TextButton(
    child: Text('test'),
    style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.red)),
    onPressed: () {},
),

Answer 2

For people looking for a clearer and easier way to do this, you can use TextButton.styleFrom(). Example:

TextButton(
  child: Text('Example'),
  onPressed: () {},
  style: TextButton.styleFrom(backgroundColor: Colors.red),
)

You can customize almost anything you want in styleFrom. This works for other buttons too, like ElevatedButton and OutlinedButton.

Answer 3

Try this way,

TextButton(
  onPressed: () {},
  child: Container(
    padding: EdgeInsets.fromLTRB(30, 10, 30, 10),
    color: Colors.red,
    child: Text(""),
  ),
)