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

Question

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

If you update flutter SDK to latest version, you will receive several warning messages related to textTheme usage.

Answer 1

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

The 2021 spec - Text styles

   NAME         SIZE       WEIGHT     SPACING

displayLarge    regular      57.0       0
displayMedium   regular      45.0       0
displaySmall    regular      36.0       0
headlineLarge   regular      32.0       0
headlineMedium  regular      28.0       0
headlineSmall   regular      24.0       0
titleLarge      medium       22.0       0
titleMedium     medium       16.0      0.15
titleSmall      medium       14.0      0.1
labelLarge      medium       14.0      0.1
labelMedium     medium       12.0      0.5
labelSmall      medium       11.0      0.5
bodyLarge       regular      16.0      0.15
bodyLarge       regular      14.0      0.25
bodyLarge       regular      12.0      0.4

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