Do you want to change color of Elevated Button?
Then you are in the right place.
So let’s start with a simple example.
Most of the time, this is the one you really needed.
Contents
How To Change Elevated Button Color?
- Use style property of ElevatedButton and pass ElevatedButton.styleFrom().
- Inside, ElevatedButton.styleFrom(), give primary parameter and color as value.
- You can use onPrimary property to change Text Color of ElevatedButton.
ElevatedButton(
child: const Text('ElevatedButton'),
onPressed: () {},
style: ElevatedButton.styleFrom(
primary: Colors.deepOrangeAccent,
//onPrimary: Colors.black,
),
),
How To Change Elevated Button Color Using Theme?
Sometimes you need to set same color and text color for a group of ElevatedButtons used in a form or section. You don’t need to use style property for each one. In these situations, You can use Theme widget.
- This example, I have used Column for holding two ElevatedButton and the Column is wrapped with Theme Widget.
- Theme widget provides elevatedButtonTheme property to set our style.
- You need to specify with ElevatedButtonThemeData object and style values.
- It affects all the children inside of it.
Theme(
data: ThemeData(
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
onPrimary: Colors.white,
primary: Colors.green,
),
),
),
child: Column(
children: [
ElevatedButton(
child: const Text('ElevatedButton 1'),
onPressed: () {},
),
const SizedBox(
height: 10,
),
ElevatedButton(
child: const Text('ElevatedButton 2'),
onPressed: () {},
),
],
),
)
How To Change Elevated Button Color Using Theme – App level
- Using this MaterialApp theme property, you can change all ElevatedButton color in your app with simple piece of code.
- You should give ThemeData object and elevatedButtonTheme property value should be ElevatedButtonThemeData
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter ElevatedButton Color Change Example',
theme: ThemeData(
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
primary: Colors.red,
),
),
),
Complete Source Code
- In this, main example, I have used 3 different ways mentioned above in this post.
- First example uses the color given by App theme data. So it chooses, Red color.
- Second, ElevatedButton overrides app level theme color by using its own style. So here, ElevatedButton uses Orange color and also black for text color.
- Third one, we have used Theme Widget, using that you can change color of all the children (ElevatedButton)inside of Theme Widget.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter ElevatedButton Color Change Example',
theme: ThemeData(
//primarySwatch: Colors.red,
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
primary: Colors.red,
),
),
),
home: SafeArea(
child: Scaffold(
appBar: AppBar(
title: const Text('Flutter ElevatedButton Color Change Example'),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
//It uses applevel theme color
ElevatedButton(
child: const Text('ElevatedButton'),
onPressed: () {},
),
//Here It uses own style color by overriding app level color.
ElevatedButton(
child: const Text('ElevatedButton'),
onPressed: () {},
style: ElevatedButton.styleFrom(
primary: Colors.deepOrangeAccent,
onPrimary: Colors.black,
),
),
//Here, Theme provides color for the ElevatedButton.
Theme(
data: ThemeData(
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
primary: Colors.green,
),
),
),
child: Column(
children: [
ElevatedButton(
child: const Text('ElevatedButton 1'),
onPressed: () {},
),
const SizedBox(
height: 10,
),
ElevatedButton(
child: const Text('ElevatedButton 2'),
onPressed: () {},
),
],
),
),
],
),
),
),
),
);
}
}
If you like this post, please share it with your family and friends.
Thanks.