I'm trying to change ElevatedButton text color in elevatedButtonTheme property in theme but cannot change. I know that TextStyle in the child of Text can change the color of Text, but I prefer to define in elevatedButtonTheme.
import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(title: 'Flutter Demo Home Page with 2.0'),
theme: ThemeData(
primaryColor: HexColor('#003f71'),
accentColor: HexColor('#e09e36'),
scaffoldBackgroundColor: HexColor('#003f71'),
textTheme: TextTheme(bodyText2: TextStyle(fontSize: 16.0), button: TextStyle(fontSize: 16.0)),
elevatedButtonTheme:
ElevatedButtonThemeData(style: ElevatedButton.styleFrom(minimumSize: Size(1, 45), primary: HexColor('#e09e36'), textStyle: TextStyle(fontSize: 16.0, color: Colors.black))),
),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
alignment: Alignment.center,
margin: const EdgeInsets.all(15.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: const EdgeInsets.symmetric(vertical: 15.0),
child: FractionallySizedBox(
alignment: Alignment.center,
widthFactor: 1.0,
child: ElevatedButton(onPressed: () {}, child: Text('ElevatedButton')),
),
),
],
),
),
);
}
}
Steps. Step 1: Locate the file where you have placed the Text widget. Step 2: Inside the Text widget, add the Style parameter and assign the TextStyle widget. Step 3: Inside the TextStyle widget, add the color parameter and set the color of your choice.
To change the Text Button color in Flutter, simply add the style parameter inside the Text Button and assign the TextButton. styleFrom() with the primary property set to any color of your choice.
You can custom the shape of an elevated button by using the shape parameter of the styleFrom method. Example: ElevatedButton( onPressed: () {}, child: const Text('Kindacode.com'), style: ElevatedButton. styleFrom( primary: Colors.
Here is code snippet if you want to use theme then here it is :
MaterialApp(
theme: ThemeData(
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
onPrimary: Colors.yellow,
)),
),
home: MyWidget());
without setting text theme you can change color of text like this.
Container(
width: MediaQuery.of(context).size.width * 0.6,
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
primary: Colors.pinkAccent,//change background color of button
onPrimary: Colors.yellow,//change text color of button
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25),
),
elevation: 15.0,
),
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Text(
'Proceed to Pay',
style: TextStyle(fontSize: 20),
),
),
),
),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With