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:

Build and grow in-app purchases. Glassfy’s Flutter SDK solves all the complexities and edge cases of in-app purchases and subscriptions so you don't have to. Test and build for free today by clicking here.