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.
Edit: if you want different color for every item, u can use function like this, Color getColor(number) { if (number > 0 && number < 100) return Colors. red; if (number >= 100 && number < 200) return Colors.
// This widget is the root of your application. Step2: Now create a class and define dark theme and light theme using ThemeData. To change text color, use color scheme property of ThemData. For changing app bar use appBar theme.
You can change appbar text color in Flutter, by adding the style parameter inside the Text widget. Basically, you provide the styling instructions by using the color property and set its color.
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,
);
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,
),
),
)
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_
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With