How to change the text color of the button theme in Flutter
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
)
),
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()
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
),
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