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.