Customization & Changes

Change Button Color

1. For ElevatedButton
You can change the button color using the style property and ButtonStyle.
Example:
Copy code
ElevatedButton(
onPressed: () {
print('Button Pressed');
},
style: ElevatedButton.styleFrom(
primary: Colors.blue, // Button background color
onPrimary: Colors.white, // Text color
),
child: Text('Click Me'),
),
2. For TextButton
You can set the text and background color using style.
Copy code
TextButton(
onPressed: ()
{ print('Button Pressed');
},
style: TextButton.styleFrom(
backgroundColor: Colors.green, // Background color
primary: Colors.white, // Text color
),
child: Text('Click Me'),
),
3. For OutlinedButton
Customize the color for the border, background, and text.
Copy code
OutlinedButton(
onPressed: () {
print('Button Pressed');
},
style: OutlinedButton.styleFrom(
side: BorderSide(color: Colors.red), // Border color
primary: Colors.red, // Text color
backgroundColor: Colors.white, // Background color
),
child: Text('Click Me'),
),
4. Using Theme for Global Button Color
To apply consistent button colors throughout your app, define the button theme in your app's ThemeData.
Copy code
MaterialApp(
theme: ThemeData(
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
primary: Colors.purple, // Global background color
onPrimary: Colors.white, // Global text color
),
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
backgroundColor: Colors.orange, // Global background color
primary: Colors.black, // Global text color
),
),
),
home: MyHomePage(),
);
5. Dynamic Button Colors
You can change button colors dynamically using a StatefulWidget.
Example:
Copy code
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State MyApp {
Color buttonColor = Colors.blue;
void changeColor() {
setState(() {
buttonColor = Colors.green;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Dynamic Button Color')),
body: Center(
child: ElevatedButton(
onPressed: changeColor,
style: ElevatedButton.styleFrom(primary: buttonColor),
child: Text('Click Me'),
),
),
);
} }
6. Dynamic Button Colors
After changing the button color, ensure you:
  • Test the app on different devices to verify the color rendering.
  • Ensure the color contrast makes the text and button clearly visible.