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?

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.

Flutter Animations Masterclass - Full Course

Flutter Animations Masterclass - Full Course

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

Flutter & Firebase Course: Build a Complete App for iOS & Android

Flutter & Firebase Course: Build a Complete App for iOS & Android

A full course with in-depth content, taking you from the basics all the way up to more advanced topics.

Flutter REST API Crash Course

Flutter REST API Crash Course

Build a Coronavirus Tracking App, and learn how to use REST APIs in Flutter.

Get the best Flutter tutorials, right in your inbox.

Join over 16,000 developers who receive my weekly Flutter email course & newsletter:

No spam, ever. Unsubscribe at any time.