Как изменить цвет текста для поддерева во флаттере?

Question

Я хочу, чтобы каждый Text внутри определенного Widget будет иметь белый цвет, хотя все они могут иметь разные размеры. Я знаю, что могу изменить каждого певца Text иметь белый цвет, но я хочу сделать его умным и изменить тему для этого конкретного Widget,

Я попробовал это:

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')
    ],
  ),
),

Проблема в Text 1 становится черным и Text 2 белый, как я хотел.

Я думал, что с помощью DefaultTextStyle.merge Я все еще мог бы использовать Theme.of(context) чтобы получить общее TextThemeвсе еще сохраняя изменения DefaultTextStyle но видимо я не прав.

Как правильно изменить цвет текста поддерева, имея при этом доступ к остальной части оригинала? Theme?

Answer 1

Проблема в том, что вы перезаписываете style используя это style: Theme.of(context).textTheme.title, это становится title стиль от textTheme от тебя тока Theme вашего приложения.

Возможное решение - использовать собственный стиль, но скопировать свойство color, например так:

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')
                ],
              );
            },
          ),
        ),

Простой способ просто не использовать textTheme от твоего Themeпросто напишите свой собственный стиль без указания цвета, например так:

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')
            ],
          ),
        ),

ОБНОВИТЬ

Я нашел другой способ, что вы можете использовать:

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')
                  ],
                );
              },
            ),
          ),
        ),

Если вы не хотите использовать Builder виджет, используйте Theme.of(context).copyWith на родительском виджете (вашего statelesswidget/statefulwidget).