How to style an ElevatedButton in Flutter

ElevatedButton replaces the old RaisedButton widget in Flutter and its API is different. Here's how to use it:

ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.black, // background (button) color
    foregroundColor: Colors.white, // foreground (text) color
  ),
  onPressed: () => print('pressed'),
  child: const Text('Add to Cart'),
)

The backgroundColor and foregroundColor properties were introduced in Flutter 3.3. Prior to that, they were called primary and onPrimary.

Want to reuse the same style across all ElevatedButtons in your app?

Just set ThemeData.elevatedButtonTheme inside MaterialApp:

MaterialApp(
  theme: ThemeData(
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.black, // background (button) color
        foregroundColor: Colors.white, // foreground (text) color
      ),
    ),
  ),
)

Note: there are many properties that you can style. Check the documentation of ButtonStyle for more info.

Happy coding!

sponsor

Code with Andrea is free for everyone. Help me keep it that way by checking out this sponsor:

Level up your Flutter app’s performance. Get full visibility into your Flutter app’s performance, including crashes, exceptions in Dart, network health, custom traces, and more. Solve your trickiest issues, optimize user journeys, and wow your end users - again and again.