Search code examples
flutterflutter-layout

How to change ElevatedButton text color in elevatedButtonTheme?


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')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

enter image description here


Solution

  • 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(
                            foregroundColor: Colors.pinkAccent,//change background color of button
                            backgroundColor: 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),
                            ),
                          ),
                        ),
                      ),