How to change the Text color for a subtree in Flutter?

Question

I want that every Text inside a particular Widget will have a white color, although they all can have different sizes. I know I can change every singe Text to have a white color, but I want to make it smart and change the Theme for that particular Widget.

I tried this:

DefaultTextStyle.merge(
  style: TextStyle(color: Colors.white),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text('Text 1',
        style: Theme.of(context).textTheme.title,
      ),
      Text('Text 2')
    ],
  ),
),

The problem is Text 1 becomes black and Text 2 is white as I wanted.

I thought that using DefaultTextStyle.merge I would still be able to use Theme.of(context) to get the general TextTheme, still maintaining the changes over DefaultTextStyle but apparently I am wrong.

What's the correct way of changing a sub-tree's text color, while being able to access the rest of the original Theme?

diegoveloper · Accepted Answer · 2019-08-12T05:38:59.777

The issue here is that you are overwriting the style using this style: Theme.of(context).textTheme.title, it's getting the title style from textTheme from you the current Theme of your app.

A possible solution is to use a custom style but copying the color property, like this :

DefaultTextStyle(
          style: TextStyle(color: Colors.white),
          child: Builder(
            builder: (context) {
              return Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'Text 1',
                    style: Theme.of(context).textTheme.title.copyWith(
                        color: DefaultTextStyle.of(context).style.color),
                  ),
                  Text('Text 2')
                ],
              );
            },
          ),
        ),

The easy way is just not using the textTheme from your Theme, just write your own style without specifying the color, like this:

DefaultTextStyle(
          style: TextStyle(color: Colors.white),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Text 1',
                //change the style without changing the color
                style: TextStyle(fontSize: 40),
              ),
              Text('Text 2')
            ],
          ),
        ),

UPDATE

I found another way what you can use :

Theme(
          data: Theme.of(context).copyWith(
            textTheme: Theme.of(context).textTheme.apply(
                  bodyColor: Colors.white,
                  displayColor: Colors.white,
                ),
          ),
          child: DefaultTextStyle(
            style: TextStyle(color: Colors.white),
            child: Builder(
              builder: (context) {
                return Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      'Text 1',
                      style: Theme.of(context).textTheme.title,
                    ),
                    Text('Text 2')
                  ],
                );
              },
            ),
          ),
        ),

If you don't want to use the Builder widget, use the Theme.of(context).copyWith on the parent widget (of your statelesswidget/statefulwidget).

So there's no way to override part of a Theme for a subtree in a transparent way? It looks cumbersome to use a `Builder` and then deal with `Theme` and `DefaultTextStyle` at the same time — Michel Feinstein, Aug 12 '19 at 05:14
Another way is to wrap your widget inside Theme, then overwrite the TextTheme and set the same color for all of the styles inside textTheme — diegoveloper, Aug 12 '19 at 05:19
I was hoping for something simpler, in my use case it will be simpler to just set the color to white on each Text. I guess Flutter could improve this. — Michel Feinstein, Aug 12 '19 at 05:21
the issue with `Theme.of(context).textTheme.title`, is that value comes with the color of your main `Theme` — diegoveloper, Aug 12 '19 at 05:26
Yeah, I know, I was hoping there was a way to define the color and all the typography themes would update accordingly. — Michel Feinstein, Aug 12 '19 at 05:28
This looks a lot more interesting... But do you need to define the white color inside the `Theme` and again inside the `DefaultTextStyle`? — Michel Feinstein, Aug 12 '19 at 05:42
yes, that's a little weird, if you test the code and remove `DefaultTextStyle`, it won't work for the last `Text` widget (because it doesn't have style), but it works on the first. — diegoveloper, Aug 12 '19 at 05:42
I see... I will open a feature request for having a simpler way of achieving this. — Michel Feinstein, Aug 12 '19 at 05:46

How to change the Text color for a subtree in Flutter?

1 Answers1