CODEWITHSUNDEEP
flutterdartmaterial-designflutter-theme
shennan
shennan

Reputation: 11666

Understanding what default styles are used in a Flutter + Material app

Just starting out with Flutter + Material design. I notice that when a create a theme using ThemeData, if I use something like this:

ThemeData(
  textTheme: TextTheme(bodyText1: TextStyle(color: Colors.white)),
)

It doesn't seem to colour the text in a simple GridView with Text widgets with the colour white. However, if I change the above to use bodyText2 it does.

What is the logic behind bodyText2 being used for text across the app? Is there a good place to reference which text style names get used and why in a theming situation? Is this all just knowledge acquired through trial-and-error or are there some good catch-all rules for which styles get used in which circumstances?

Thanks.

Upvotes: 11

Views: 5519

Answers (2)

Evan
Evan

Reputation: 442

Update: If using 2021 styles, not 2018 styles, swap bodyText2 (2018 style), for bodyMedium (2021 style). End update.

I ran into the same issue and did some research on this.

As per the official documentation for Text :

The style argument is optional. When omitted, the text will use the style from the closest enclosing DefaultTextStyle.

And the explanation for bodyText2 in TextTheme:

The default text style for Material.

Now the answer is quite clear. If your Text widget does not have any explicitly given text style, and has no inherited text style from its ancestors in the way of placing a DefaultTextStyle at some nodes. Then it would use the value in bodyText2 from the theme.

Upvotes: 8

Muhammad Ashir
Muhammad Ashir

Reputation: 456

You are read documentation related to themes here : https://flutter.dev/docs/cookbook/design/themes

They have explained with example.

Upvotes: 0

Related Questions