Managing TextStyles

[dumazy]

Tell us how you organize TextStyles in your app

When using Material design, do you define a custom TextTheme and use the design tokens for displayLarge, bodyMedium, etc or rather create a own set of TextStyles and avoid the TextTheme class?

In apps with very specific designs, I tend to avoid Material’s TextTheme and go with a custom set of styles to have more flexibility. When there’s no specific design system, I go with the built-in Material styles.

[tenhobi]

We don’t create our own TextTheme but rather our own ThemeExtension. Then when creating ThemeData we set defaults (like bodyMedium etc.) for textTheme based on our extension which is also provided to the theme. But most of the time we have our own atom widgets that usually set concrete values to material widgets they wrap etc.

So what work for us is creating our own ThemeExtension, lets say MyTextStyles extends ThemeExtension< MyTextStyles>. In there we define our own TextStyle fields for text tokens our designer wants.

We then put this extension in ThemeData and add a helper method to context with MyTextStyles get textStyles => Theme.of(this).extension< MyTextStyles >()!;.

I really don’t like using TextTheme directly, because it limits (or enforces) what styles of text you should have.

[dumazy]

I agree, TextTheme mostly doesn’t provide the styles you want, both too many as well as too little

Then when creating ThemeData we set defaults (like bodyMedium etc.) for textTheme based on our extension which is also provided to the theme.

Do you set TextTheme properties to your own styles, or is it only a few of those that are used as defaults in material components?