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:

Open-Source Backend Server for Flutter Developers. Appwrite is a secure, self-hosted solution that provides developers with a set of easy-to-use REST APIs to manage their core backend needs. You can build anything with Appwrite! Click here to learn more.