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!

Want More?

Invest in yourself with my high-quality Flutter courses.

The Complete Dart Developer Guide

The Complete Dart Developer Guide

Learn Dart Programming in depth. Includes: basic to advanced topics, exercises, and projects. Fully updated to Dart 2.15.

The Complete Flutter Course Bundle

The Complete Flutter Course Bundle

Learn about State Management, App Architecture, Navigation, Testing, and much more by building a full-stack Flutter eCommerce app on iOS, Android, and web.

Flutter Animations Masterclass - Full Course

Flutter Animations Masterclass - Full Course

Master Flutter animations and build a completely custom habit tracking application.