How to change the entire theme's text color in Flutter?
TextColorsFlutterText Problem Overview
There is probably something obvious I'm missing. Is there one property that can change the color of all the text in a Flutter app?
The way I am doing it now is, in my MaterialApp:
theme: ThemeData(
textTheme: Theme.of(context).textTheme.copyWith(
body1:
Theme.of(context).textTheme.body1.apply(color: Colors.pink),
body2:
Theme.of(context).textTheme.body2.apply(color: Colors.pink),
display1:
Theme.of(context).textTheme.display1.apply(color: Colors.pink),
display2:
Theme.of(context).textTheme.display2.apply(color: Colors.pink),
... // and so on
),
),
),
I also tried
textTheme: Theme.of(context).textTheme.apply(bodyColor: Colors.pink),
but this applies to Dropdown text, not regular text. Likewise, displayColor
applies to the appBar text and a InputDecoration text, but not regular text. I don't seem to have any decorationText
in my code so I'm not sure what that one is for.
I note there is a textSelectionColor
property but that only applies for TextField
widgets.
Text Solutions
Solution 1 - Text
I think TextTheme.apply
is what you want. bodyColor
will be applied to headline
, title
, subhead
, button
, body1
, and body2
. displayColor
will be applied to display1
through display4
, and caption
. If you specify both bodyColor
and displayColor
and use the same color value, that will effectively change text colors on all text styles.
Example:
final newTextTheme = Theme.of(context).textTheme.apply(
bodyColor: Colors.pink,
displayColor: Colors.pink,
);
Solution 2 - Text
For the entire app, you can set textTheme
property in the Material
app widget.
MaterialApp(
theme: ThemeData(
textTheme: TextTheme(
bodyText1: TextStyle(),
bodyText2: TextStyle(),
).apply(
bodyColor: Colors.orange,
displayColor: Colors.blue,
),
),
)
Solution 3 - Text
To provide an alternative that seems to work without setting all the Text styles directly is to change the style of the DefaultTextStyle
at the place in the Widget tree to take effect
return DefaultTextStyle(
style: TextStyle(color: Colors.pink),
child: _YOUR_WIDGETS_
)
Solution 4 - Text
Maybe a bit late... but you can use this:
ThemeData(
primaryTextTheme: Typography(platform: TargetPlatform.iOS).white,
textTheme: Typography(platform: TargetPlatform.iOS).white,
)
Solution 5 - Text
mine is working with this:
return MaterialApp(
theme: ThemeData(
textTheme: TextTheme(
bodyText2: TextStyle(
color: Colors.white,
),
),
),
);
Solution 6 - Text
I found using copyWith() on the TextTheme works well, as you can just change specific properties like fontsize - leaving everthing else unchanged.
textTheme: TextTheme().copyWith(
bodyText2: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold
)
),