In this Flutter post, we will be practically customizing the Flutter elevated button color by using a proper Flutter example code. We will first see what the default Flutter elevated button color looks like, then we will practically change its color.
So let’s not wait anymore and just dive right into its implementation.
What is Flutter Elevated Button Color?
It defines the background color of the Flutter elevated button widget. Let’s now practically see what the default color of that button is and how we can change it.
Default Flutter Elevated Button Color
In order to see the default background color of elevated button, we have to use the elevated button widget class. See below code:
ElevatedButton(
onPressed: () {},
child: Text('Elevated Button Default Color'))
Change Flutter Elevated Button Color
Let’s now see how to give that button a custom color. See below code:
style: ElevatedButton.styleFrom(primary: Colors.green)
Customized Flutter Elevated Button Color Complete Source Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(primary: Colors.green),
child: Text('Custom Elevated Button Color'))))));
}
}Conclusion
To conclude, hope your thoughts are now cleared on how to customize Flutter elevated button color. I’d love to have your feedback on this post. I would be looking forward to see you visit my other posts as well. Thank you for reading.
