How to change the text color of the button theme in Flutter

Question

If I add a theme to my app like this:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Color(0xff393e46),
        primaryColorDark: Color(0xff222831),
        accentColor: Color(0xff00adb5),
        backgroundColor: Color(0xffeeeeee),
        buttonTheme: ButtonThemeData(
          buttonColor: Color(0xff00adb5),
        )
      ),
      home: Scaffold(
        body: MyHomePage(),
      ),
    );
  }
}

How do I change the text color for the button theme?

Answer 1

The way I did it. I wanted specific color for text and background only for this button.

            ElevatedButton(
                  style: const ButtonStyle(
                    foregroundColor:
                        MaterialStatePropertyAll<Color>(Colors.white),
                    backgroundColor:
                        MaterialStatePropertyAll<Color>(Colors.green),
                  ),
                  onPressed: () {
                    appState.toggleFavorite();
                  },
                  child: Text('Fav'),
                )

Answer 2

Update (New buttons):

Enabled state:

Disabled state:

ButtonTheme won't work for new buttons like ElevatedButton. For that you should set elevatedButtonTheme.

• Less customizations:

  MaterialApp(
    theme: ThemeData(
      elevatedButtonTheme: ElevatedButtonThemeData(
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.red, // Button color
          foregroundColor: Colors.white, // Text color
        ),
      ),
    ),
  )
  

• More customizations:

  MaterialApp(
    theme: ThemeData(
      brightness: Brightness.dark,
      elevatedButtonTheme: ElevatedButtonThemeData(
        style: ButtonStyle(
          backgroundColor: MaterialStateProperty.resolveWith<Color?>((s) {
            if (s.contains(MaterialState.disabled)) return Colors.brown; // Disabled button color
            return Colors.red; // Enabled button color
          }),
          foregroundColor: MaterialStateProperty.resolveWith<Color?>((s) {
            if (s.contains(MaterialState.disabled)) return Colors.white30; // Disabled text color
            return Colors.white; // Enabled text color
          }),
        ),
      ),
    ),
  )
  

Similarly, you can do this for OutlinedButton and TextButton by replacing ElevatedButton and its properties.

Answer 3

I believe the more updated answer is mainly found here: https://flutter.dev/docs/release/breaking-changes/buttons

elevatedButtonTheme: ElevatedButtonThemeData(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all<Color>(Colors.black,), //button color
    foregroundColor: MaterialStateProperty.all<Color>(Color(0xffffffff),), //text (and icon)
  ),
),

Depending on the button change...

elevatedButtonTheme: ElevatedButtonThemeData()
outlinedButtonTheme: OutlinedButtonThemeData()
textButtonTheme: textButtonThemeData()

Answer 4

Related: As I stumbled upon this when looking specifically for TextButton color, setting the MaterialApp theme solved that:

theme: ThemeData(
      textButtonTheme: TextButtonThemeData(
        style: TextButton.styleFrom(
          primary: Colors.blueGrey[900],
        ),
      ),
    ),

found on https://www.woolha.com/tutorials/flutter-using-textbutton-widget-examples

Answer 5

Andrey Gordeev's answer works. However I was curious what's going on so do a check on it as lacking a bit of explanation. Basically you need to set the textTheme to accent in order to use the colorScheme to set the button color. You can also override the button color using the primary in the colorScheme.

From the source code

The colors for new button classes can be defined exclusively in termsof [colorScheme].  
When it's possible, the existing buttons will (continue to) gradually migrate to it.

buttonTheme: ButtonThemeData(
    textTheme: ButtonTextTheme.accent,
    colorScheme: Theme.of(context).colorScheme.copyWith(
          primary: Colors.orange,
          // secondary will be the textColor, when the textTheme is set to accent
          secondary: Colors.white,
    ),
),

Answer 6

I advice you to set it in the app theme, so it will be applied everywhere:

src/theme/style.dart

final appTheme = () => ThemeData(
      accentColor: Colors.white,
      buttonTheme: ButtonThemeData(
        buttonColor: Colors.orange,
        textTheme: ButtonTextTheme.accent,
      ),
    );

Then use it in your src/app.dart as theme: appTheme(),

Try it :

RaisedButton(
  onPressed: () => print('pressed'),
  child: Text('Press me'),
)

Answer 7

Suragch's answer is correct, but sometimes we want to set a completely custom color as button text color. It is achievable by providing a custom colorScheme with secondary color set:

buttonTheme: ButtonThemeData(
  buttonColor: Color(0xffff914d), // Background color (orange in my case).
  textTheme: ButtonTextTheme.accent,
  colorScheme:
    Theme.of(context).colorScheme.copyWith(secondary: Colors.white), // Text color
),

Answer 8

If you use ButtonTextTheme.primary Flutter will automatically select the right color for you.

For example, if you make the buttonColor dark like this

  ThemeData(
    . . . 
    buttonTheme: ButtonThemeData(
      buttonColor: Colors.deepPurple,     //  <-- dark color
      textTheme: ButtonTextTheme.primary, //  <-- this auto selects the right color
    )
  ),

The text is automatically light. And if you make the buttonColor light, then the text is dark.

  ThemeData(
    . . . 
    buttonTheme: ButtonThemeData(
      buttonColor: Colors.yellow,         //  <-- light color
      textTheme: ButtonTextTheme.primary, //  <-- dark text for light background
    )
  ),