Flutter tutorials and courses by Andrea Bizzotto

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!

Want more?

Fast-track your Flutter learning with over 40 hours of in-depth content.