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

In this blog post, we will explore how to style an ElevatedButton by using either the styleFrom static method or the ButtonStyle class. We will see examples of both methods and learn how to pass a color as a parameter from a function.

Using styleFrom to style an Elevated Button

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

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

This example shows how to style an ElevatedButton by setting its background color to purple, padding to a horizontal and vertical space of 50 pixels each, and text style to bold with font size 30:

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 Elevated Button

You can also use the ButtonStyle class to style an ElevatedButton. However, this method is more verbose than using styleFrom.

style: ButtonStyle({
  MaterialStateProperty textStyle,
  MaterialStateProperty backgroundColor,
  MaterialStateProperty foregroundColor,
  MaterialStateProperty overlayColor,
  MaterialStateProperty shadowColor,
  MaterialStateProperty elevation,
  MaterialStateProperty padding,
  MaterialStateProperty minimumSize,
  MaterialStateProperty side,
  MaterialStateProperty shape,
  MaterialStateProperty mouseCursor,
  VisualDensity visualDensity,
  MaterialTapTargetSize tapTargetSize,
  Duration animationDuration,
  bool enableFeedback
})

Example

This example shows how to style an ElevatedButton by setting its background color to red, padding to all sides of 50 pixels each, and text style to bold with font size 30:

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

Passing color as a parameter and using MaterialStateProperty.all(color)

You can also pass the color as a parameter from a function. For example:

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

Sample button

This is a sample button that shows how to change the background color of an ElevatedButton.

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

Before version 3.1.0 of the Flutter framework, you could style an ElevatedButton by using:

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

After version 3.1.0 of the Flutter framework, you should use:

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