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?

Solution 1

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
    )
  ),

Solution 2

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
),

Solution 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()

Solution 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

Solution 5

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'),
)

View more solutions