58

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?

4 Answers 4

106

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: () {},
),

2022 Update

Since version 3.0.1, we can use MaterialStatePropertyAll as const.

So it's a better approach, to use it :

TextButton(
    child: Text('test'),
    style: const ButtonStyle(
        backgroundColor: MaterialStatePropertyAll(Colors.red),
    ),
    onPressed: () {},
),
2
  • 3
    May I ask why I have to use MaterialStateProperty.all ? Why can't 'I use Colors.red directly? Mar 10, 2021 at 7:45
  • 4
    As documentation says, bacgroundColor isn't Colortype, so you can't use Colors.red. You can find more details about MaterialStatePropertyin Flutter documentation: api.flutter.dev/flutter/material/…
    – Jouby
    Mar 10, 2021 at 8:29
36

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.

0
3

Try this way,

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

most Easy Way to add a BackGroundColor to Textbutton

TextButton(
    style: TextButton.styleFrom(backgroundColor: Colors.red),
),

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.