Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the entire theme's text color in Flutter?

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.

like image 680
Mary Avatar asked Mar 09 '18 23:03

Mary


People also ask

How do I change text color dynamically in Flutter?

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.

How do you change the text color in the dark theme in Flutter?

// 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.

How can I change appBar title color in Flutter?

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.


3 Answers

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,
);
like image 173
Yegor Avatar answered Oct 06 '22 19:10

Yegor


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, 
    ),
  ),
) 
like image 35
CopsOnRoad Avatar answered Oct 06 '22 18:10

CopsOnRoad


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_
)
like image 39
aqwert Avatar answered Oct 06 '22 20:10

aqwert