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