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 ElevatedButton
s 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

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.