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
andforegroundColor
properties were introduced in Flutter 3.3. Prior to that, they were calledprimary
andonPrimary
.
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(
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!
sponsor

Build and grow in-app purchases. Glassfy’s Flutter SDK solves all the complexities and edge cases of in-app purchases and subscriptions so you don't have to. Test and build for free today by clicking here.