CODEWITHSUNDEEP
flutter
LOLWTFasdasd asdad
LOLWTFasdasd asdad

Reputation: 2943

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

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?

Upvotes: 61

Views: 80214

Answers (4)

Jouby
Jouby

Reputation: 2471

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

2024 Update

Since version 3.19, MaterialStateProperty is deprecated. We need to use WidgetStateProperty instead.

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

Upvotes: 121

Kesselly Kamara
Kesselly Kamara

Reputation: 201

most Easy Way to add a BackGroundColor to Textbutton

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

Upvotes: 3

Luke Olender
Luke Olender

Reputation: 606

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.

Upvotes: 41

xahid_rocks
xahid_rocks

Reputation: 702

Try this way,

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

Upvotes: 3

Related Questions