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))),
),