How can I change the background color of Elevated Button in Flutter from function?

Question

I am new to Flutter, and I started Flutter last week. And now I want to make a simple Xylophone application. I created the UI successfully and made a function playSound(int soundNumber), but when I call this function for playing sound, it gives me this error.

The following _TypeError was thrown building Body(dirty, state: _BodyState#051c2):
type '_MaterialStatePropertyAll' is not a subtype of type 'MaterialStateProperty<Color?>?'

Here's the code I wrote for the playSound(int soundNumber) function.

void playSound(int soundNumber) {
  final player = AudioCache();
  player.play('note$soundNumber.wav');
}

Expanded buildPlayButton({MaterialStateProperty color, int soundNumber}) {
  return Expanded(
    child: ElevatedButton(
      onPressed: () {
        playSound(soundNumber);
      },
      style: ButtonStyle(
        backgroundColor: color,
      ),
    ),
  );
}

Here is the point where I am calling this function.

Widget build(BuildContext context) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      buildPlayButton(color: MaterialStateProperty.all(Colors.red), soundNumber: 1),
      buildPlayButton(color: MaterialStateProperty.all(Colors.orangeAccent), soundNumber: 2),
      buildPlayButton(color: MaterialStateProperty.all(Colors.yellow), soundNumber: 3),
      buildPlayButton(color: MaterialStateProperty.all(Colors.indigo), soundNumber: 4),
      buildPlayButton(color: MaterialStateProperty.all(Colors.blue), soundNumber: 5),
      buildPlayButton(color: MaterialStateProperty.all(Colors.lightGreenAccent), soundNumber: 6),
      buildPlayButton(color: MaterialStateProperty.all(Colors.green), soundNumber: 7),
    ],
  );
}

How can I call this function, because it gives me the above-mentioned error?

Answer 1

You can style ElevatedButton by using the styleFrom static method or the ButtonStyle class. The first one is more convenient than the second one.

Using styleFrom to style an ElevatedButton:

ElevatedButton(
      child: Text('Button'),
      onPressed: () {},
      style: ElevatedButton.styleFrom({
           Color backgroundColor, // set the background color
           Color foregroundColor,
           Color disabledForegroundColor,
           Color shadowColor,
           double elevation,
           TextStyle textStyle,
           EdgeInsetsGeometry padding,
           Size minimumSize,
           BorderSide side,
           OutlinedBorder shape,
           MouseCursor enabledMouseCursor,
           MouseCursor disabledMouseCursor,
           VisualDensity visualDensity,
           MaterialTapTargetSize tapTargetSize,
           Duration animationDuration,
           bool enableFeedback
     }),
),

Example:

ElevatedButton(
            child: Text('Button'),
            onPressed: () {},
            style: ElevatedButton.styleFrom(
                backgroundColor: Colors.purple,
                padding: EdgeInsets.symmetric(horizontal: 50, vertical: 20),
                textStyle: TextStyle(
                fontSize: 30,
                fontWeight: FontWeight.bold)),
),

Using ButtonStyle to style an ElevatedButton:

style: ButtonStyle({
  MaterialStateProperty<TextStyle> textStyle,
  MaterialStateProperty<Color> backgroundColor,
  MaterialStateProperty<Color> foregroundColor,
  MaterialStateProperty<Color> overlayColor,
  MaterialStateProperty<Color> shadowColor,
  MaterialStateProperty<double> elevation,
  MaterialStateProperty<EdgeInsetsGeometry> padding,
  MaterialStateProperty<Size> minimumSize,
  MaterialStateProperty<BorderSide> side,
  MaterialStateProperty<OutlinedBorder> shape,
  MaterialStateProperty<MouseCursor> mouseCursor,
  VisualDensity visualDensity,
  MaterialTapTargetSize tapTargetSize,
  Duration animationDuration,
  bool enableFeedback
})

Example

ElevatedButton(
            child: Text('Button'),
            onPressed: () {},
            style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.red),
                padding: MaterialStateProperty.all(EdgeInsets.all(50)),
                textStyle: MaterialStateProperty.all(TextStyle(fontSize: 30))),
),

Answer 2

ElevatedButton( style: ButtonStyle(backgroundColor: MaterialStatePropertyAll(Colors.orange)), onPressed: null,);

Answer 3

style: ButtonStyle({  
  MaterialStateProperty.all(backgroundColor),   
),

Similarly, you can add MaterialStateProperty.all(<Value here>) to most properties of elevated button(elevation, padding, border etc).

Answer 4

style: ElevatedButton.styleFrom(primary : Colors.black),

Answer 5

Screenshot:

---

Code:

class _MyState extends State<MyPage> {
  bool _flag = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () => setState(() => _flag = !_flag),
          child: Text(_flag ? 'Red' : 'Green'),
          style: ElevatedButton.styleFrom(
            backgroundColor: _flag ? Colors.red : Colors.teal, // This is what you need!
          ),
        ),
      ),
    );
  }
}

Answer 6

 style: ElevatedButton.styleFrom(
                        shape: RoundedRectangleBorder(
                          borderRadius: new BorderRadius.circular(30.0),
                        ),
                          primary: HexColor(HexColor.primarycolor),
                          textStyle: TextStyle(fontWeight: FontWeight.bold)),

Answer 7

Suppose we need to change Elevated Button Background color then? Elevated Button has a style Property And style property need ButtonStyle(). ButtonStyle has backgroundColor property which requires MaterialStateProperty. You can simply assign background color by MaterialStateProperty.all(Colors.green). Let’s explore examples of Background color of Elevated Button in Flutter.

ElevatedButton(
          onPressed: () {
            print('Button Pressed');
          },
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
          ),
          child: Text('Send'),
        ),

Answer 8

body:Center(

  child: ElevatedButton(
    onPressed: () {},
     child: Text("click me"),
      style:ButtonStyle(
        backgroundColor: MaterialStateProperty.all(Colors.green))
     ),


  ),

} }

Answer 9

Make sure to add onPressed: () {},

Otherwise the color will be gray.

Answer 10

Pass color as parameter and use MaterialStateProperty.all<Color>(color) to specify the color.

buildPlayButton(color: Colors.red, soundNumber: 1)

Expanded buildPlayButton({Color color, int soundNumber}){
  return Expanded(
    child: ElevatedButton(
      onPressed: () {
        playSound(soundNumber);
      },
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all<Color>(color),
      ),
    ),
);}

Sample button

In general

ElevatedButton(
  style: ElevatedButton.styleFrom(
    primary: Colors.red, // background
    onPrimary: Colors.yellow, // foreground
  ),
  onPressed: () {},
  child: Text('ElevatedButton with custom foreground/background'),
)

Sample button

Reference:

ElevatedButton class

Answer 11

ElevatedButton(onPressed: resetHandler,
               child: Text("button"),
               style: ElevatedButton.styleFrom(primary: Colors.amber),),

Answer 12

ElevatedButton(
          onPressed: (){},
          child: Text('comprar'),
          style: ElevatedButton.styleFrom(
            primary: Theme.of(context).primaryColor
          )
        )

Answer 13

You have three options to change the background color:

ElevatedButton.styleFrom:

If you just want to change the background color and foreground color irrespective of the states then you can do as given below.

ElevatedButton(
  style: ElevatedButton.styleFrom(
    primary: Colors.red, // Background
    onPrimary: Colors.white, // Foreground
  ),
  onPressed: () { },
  child: Text('custom foreground/background'),
)

MaterialStateProperty.all:

to override a ElevatedButtons default background(text/icon) color for all states.

 ElevatedButton(style:
    ButtonStyle(
      backgroundColor: MaterialStateProperty.all(Colors.red),
    onPressed: () { },
    child: Text('custom foreground/background'),
    ));

MaterialStateProperty.resolveWith:

By default, the elevated button inherits a blue color. We can tweak the default style using the style parameter and ButtonStyle class. Button has different states such as pressed, disabled, hovered, etc. You can change the style for each state. In the below snippet, the default color of the button changes to green when it is pressed.

ElevatedButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith<Color>(
      (Set<MaterialState> states) {
        if (states.contains(MaterialState.pressed))
          return Colors.green;
        return null; // Use the component's default.
      },
    ),
  ),
)

Answer 14

Just use MaterialStateProperty.all(**YOUR COLOR**):

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

or like this: Just use ElevatedButton.styleFrom(primary: **YOUR COLOR**):

ElevatedButton(
            child: Text('Button'),
            onPressed: () {},
            style: ElevatedButton.styleFrom(primary: Colors.red),
)

Answer 15

Use styleFrom of ElevatedButton

 ElevatedButton(
      onPressed: (){},
      child: Text('click me'),
      style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
    ),

Answer 16

You can simply use this code inside the ElevatedButton

 style: ElevatedButton.styleFrom(
       backgroundColor:Theme.of(context).primaryColor
    ),

Answer 17

The current best answer with the example of ElevatedButton.styleFrom is outdated. As of Flutter v3.1.0, the primary parameter is deprecated.

Color? primary // Use foregroundColor instead. This feature was deprecated after v3.1.0.

Instead, use the backgroundColor parameter:

ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: const Colors.red,
  ),
  onPressed: () {},
  child: const Text('Test'),
)

Answer 18

If you want to change the elevated button background color and outline color also with the shape of the circle, then checkout this code:

ElevatedButton(
    style: ElevatedButton.styleFrom(
        backgroundColor: Colors.white,
        side: BorderSide(
            width: 1,
            color: primaryBlue),
        shape: RoundedRectangleBorder(
            borderRadius:
                BorderRadius.circular(
          20,
        ))),
    onPressed: () {},
    child: Text(
      'Use camera',
      style: t3b,
    ),
),

This code will look like this:

Answer 19

You need to set the primary property (inside a style) and assign it a color, but be careful, if you haven't set your onPressed() event then the color doesn't change..

Here is an example:

Widget renderMyButton() {
  return ElevatedButton(
      style: ElevatedButton.styleFrom(
        primary: Colors.lightBlue, // Change the color here..
        elevation: 0,
        // ...
      ),

      onPressed: () {}, // This line is important to change the ElevatedButton color..
      child: Container()
  );
}