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(
    primary: Colors.black, // background (button) color
    onPrimary: Colors.white, // foreground (text) color
  ),
  onPressed: () => print('pressed'),
  child: const Text('Add to Cart'),
)

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(
        primary: Colors.black, // background (button) color
        onPrimary: 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 Privacy-First Flutter apps with the @platform. Our Open Source platform, which is built on Dart, gives people control over their own data. Automatically comply with GDPR (and other privacy regulations), earn commissions as you grow, and make apps super fast — no backend infrastructure needed.