CODEWITHSUNDEEP
flutterthemes
Marwén
Marwén

Reputation: 38

Why a Text widget is not taking the style defined in the theme?

When I wrote the following code, I expected the text to be red:

Theme(
  data: Theme.of(context).copyWith(
    textTheme: Theme.of(context).textTheme.copyWith(
      bodyText2: TextStyle(color: Colors.red),
    ),
    buttonTheme: Theme.of(context)
        .buttonTheme
        .copyWith(buttonColor: Colors.yellow),
  ),
  child: Builder(
    builder: (context) {
      return Column(
        children: [
          Text('Flutter'),
          Text('is awesome!'),
          RaisedButton(
            onPressed: () {},
            child: Text('OK'),
          )
        ],
      );
    },
  ),
)

but the text was black while the button was yellow as you can see: here

As you can see the Text widgets ignored the style defined in the theme while the RaisedButton didn't. Why?

I know that I can use DefaultTextStyle instead but I'm trying to understand why is that not working like I expected.

Upvotes: 0

Views: 865

Answers (1)

Mol0ko
Mol0ko

Reputation: 3288

Text widget has style property. As we can see from docs:

If the [style] argument is null, the text will use the style from the
closest enclosing [DefaultTextStyle].

It is clear, Text uses style from DefaultTextStyle widget (not from Theme) if you didn't specify it as you did. If you want to use style from theme you should specify it explicitly:

 Text('Flutter', style: Theme.of(context).textTheme.bodyText2)

As for buttons - any MaterialButton child (RaisedButton too) use ButtonTheme.of(context).textTheme as default value of textTheme property.

Upvotes: 1

Related Questions