Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 684
DIGITALSQUAD Avatar asked Mar 23 '21 02:03

DIGITALSQUAD


People also ask

How do you color your Text flutters?

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.

How do you change the Text color on Flutter with Button?

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.

How do you customize an ElevatedButton in Flutter?

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.


1 Answers

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),
                        ),
                      ),
                    ),
                  ),
like image 132
Amit Maurya Avatar answered Nov 08 '22 19:11

Amit Maurya