11

If you update flutter SDK from version v1.12.13 to any version after v1.13.8, you will receive several warning messages related to textTheme usage. For example, one of them given below.

info: body2 is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is bodyText1. This feature was deprecated after v1.13.8..

what are the changes in the new version? how to migrate?

Darish
  • 11,032
  • 5
  • 50
  • 70

1 Answers1

28

What are differences between text theme of material specification 2014 and text theme of material specification 2018?

The TextTheme API was originally based on the original material (2014) design spec, which used different text style names.

Both values are given below.

The 2018 spec - Text styles

NAME         SIZE  WEIGHT  SPACING

headline1    96.0  light   -1.5
headline2    60.0  light   -0.5
headline3    48.0  regular  0.0
headline4    34.0  regular  0.25
headline5    24.0  regular  0.0
headline6    20.0  medium   0.15
subtitle1    16.0  regular  0.15
subtitle2    14.0  medium   0.1
body1        16.0  medium   0.5   (bodyText1)
body2        14.0  regular  0.25  (bodyText2)
button       14.0  medium   1.25
caption      12.0  regular  0.4
overline     10.0  regular  1.5

The 2014 spec - Text style

NAME       SIZE   WEIGHT   SPACING  2018 NAME

display4   112.0  thin     0.0      headline1
display3   56.0   normal   0.0      headline2
display2   45.0   normal   0.0      headline3
display1   34.0   normal   0.0      headline4
headline   24.0   normal   0.0      headline5
title      20.0   medium   0.0      headline6
subhead    16.0   normal   0.0      subtitle1
body2      14.0   medium   0.0      body1 (bodyText1)
body1      14.0   normal   0.0      body2 (bodyText2)
caption    12.0   normal   0.0      caption
button     14.0   medium   0.0      button
subtitle   14.0   medium   0.0      subtitle2
overline   10.0   normal   0.0      overline

How to use the new TextTheme attributes? (flutter version v1.13.8 and above)

You can use the desired attribute as shown below.

Theme.of(context).textTheme.headline1
Theme.of(context).textTheme.headline2
Theme.of(context).textTheme.headline3
Theme.of(context).textTheme.headline4
Theme.of(context).textTheme.headline5
Theme.of(context).textTheme.headline6
Theme.of(context).textTheme.subtitle1
Theme.of(context).textTheme.subtitle2
Theme.of(context).textTheme.body1
Theme.of(context).textTheme.body2
Theme.of(context).textTheme.button
Theme.of(context).textTheme.caption
Theme.of(context).textTheme.overline

What are attribute names that does not changed?

Only the following two attribute names are common in both Theme classes.

Theme.of(context).textTheme.caption
Theme.of(context).textTheme.overline
Darish
  • 11,032
  • 5
  • 50
  • 70
  • You mean 1.12.13 hotfix 8 and above versions? – Casanova Apr 17 '20 at 12:06
  • No, the stable channel still uses the old API. As of now, you need to switch to the flutter beta channel to try the new API. Or wait for the stable release. – Darish Apr 17 '20 at 13:06
  • What about the "bodyLarge", "bodyMedium", "bodySmall", "titleLarge", "titleMedium", ...? They are from Material 3 I believe https://m3.material.io/styles/typography/type-scale-tokens This seems to be the match: https://i.imgur.com/CDkiQ5L.png – Guillem Poy Oct 06 '22 at 03:58