CODEWITHSUNDEEP
flutterdart
mcarlomagno
mcarlomagno

Reputation: 1861

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

I have a question related with the new ElevatedButtonThemeData widget, basically I want to set the background color for all ElevatedButtons in my app, I'm struggling trying to set it up in the ThemeData definition by doing:

      theme: ThemeData(
        ...
        elevatedButtonTheme: ElevatedButtonThemeData(
            style: ButtonStyle(backgroundColor: Colors.red)), // Here Im having the error
        ...
        ),
      ),

Error:

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

Upvotes: 64

Views: 59402

Answers (7)

Diego Mendoza
Diego Mendoza

Reputation: 1

MaterialStateProperty is deprecated try this (Works on any button)

ElevatedButton(
  style: ButtonStyle(
    backgroundColor: const WidgetStatePropertyAll<Color>(
      Color.fromRGBO(234, 242, 255, 1),
    ),
  ),
  onPressed: () {},
  child: const Text(
    "Professional",
    style: TextStyle(
      fontWeight: FontWeight.w900,
      color: Color.fromRGBO(0, 111, 253, 1),
    ),
  ),
);

Upvotes: 0

navalega0109
navalega0109

Reputation: 392

Solution

backgroundColor returns the data type of MaterialStateProperty inside the ElevatedButton therefore use MaterialStateProperty.all(Colors.red)) OR

e.g.

child: ElevatedButton(
          style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(Colors.red)),
          child: Text('Go Forwards To Screen 1'),
          onPressed: () {},
        ),

Use

style: ElevatedButton.styleFrom(backgroundColor: Colors.red)

Upvotes: 0

Abdullah Opadeji
Abdullah Opadeji

Reputation: 236

Before:

backgroundColor: Colors.green,

After:

backgroundColor: MaterialStateProperty.all<Color>(Colors.green),

Upvotes: 5

Rashid Wassan
Rashid Wassan

Reputation: 764

Here is a code snippet that shows how I have styled a text button, by using material state properties.

You can see how can you add different types of values:

TextButton(style: ButtonStyle(
      padding: MaterialStateProperty.all(const EdgeInsets.all(0)),
      elevation: MaterialStateProperty.all(8),
      shape: MaterialStateProperty.all(
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(50))),
      backgroundColor: MaterialStateProperty.all(Colors.blue),
      shadowColor: MaterialStateProperty.all(
          Theme.of(context).colorScheme.onSurface),
    ),),

I hope this gives you an idea.

To know more about MaterialStateProperty, you can go for this official video: MaterialStateProperties | Decoding Flutter

Upvotes: 32

Kulpas
Kulpas

Reputation: 394

Instead of using ButtonStyle() try:

style: ElevatedButton.styleFrom(backgroundColor: Colors.red)

Upvotes: 14

Broteen Das
Broteen Das

Reputation: 502

MaterialStateProperty.all<Color>(Colors.red)

This returns MaterialStateProperty<Color?> data type.

Upvotes: 8

mcarlomagno
mcarlomagno

Reputation: 1861

After reading the documentation I found the way to set the color.

  theme: ThemeData(
    ...
    elevatedButtonTheme: ElevatedButtonThemeData(
        style: ButtonStyle(backgroundColor: MaterialStateProperty.all<Color>(Colors.red))), // Here Im having the error
    ...
    ),
  ),

Upvotes: 111

Related Questions