Migrate TextTheme to 2018 APIs #48547

HansMuller · 2020-01-10T02:00:33Z

This PR is a breaking change. It's described in additional detail here: flutter.dev/go/update-text-theme-api. It's based on an earlier version - #45745.

The TextTheme's styles now have names that match the 2018 Material Design spec. Getters and parameters with the original names are still supported, but they are deprecated.

OLD NAME      NEW NAME
----------------------
display4      headline1
display3      headline2
display2      headline3
display1      headline4
headline      headline5
title         headline6
subhead       subtitle1
body2         bodyText1
body1         bodyText2
caption       caption
button        button
subtitle      subtitle2
overline      overline

The text styles called "bodyText1" and "bodyText2" are called body1 and body2 in the spec, H1-H6 are called headline1-headline6 in the TextTheme API:

Note that this PR only changes the names of the TextTheme TextStyles, it does not change the default text style configurations. By default, the text style configurations (the font size, font weight, letter spacing, etc), still match their original 2014 values. Apps can choose to use the 2018 text style configurations instead, by specifying Typography.material2018() as the value for their Theme's typography.

rami-a

 __    ___  ____  __  __ 
(  )  / __)(_  _)(  \/  )
 )(__( (_-.  )(   )    ( 
(____)\___/ (__) (_/\/\_)

This is awesome!

rami-a · 2020-01-15T16:21:27Z

examples/flutter_gallery/lib/demo/typography_demo.dart

-      TextStyleItem(name: 'Subheading', style: textTheme.subhead, text: 'Regular 16sp'),
-      TextStyleItem(name: 'Body 2', style: textTheme.body2, text: 'Medium 14sp'),
-      TextStyleItem(name: 'Body 1', style: textTheme.body1, text: 'Regular 14sp'),
+        TextStyleItem(name: 'Headline 1', style: textTheme.headline1, text: 'Light 112sp'),


Should the typography demo use the 2018 values for font weight and size instead now?

That's a good idea although an update to the typography demo would be probably be best as separate PR

rami-a · 2020-01-15T16:34:17Z

packages/flutter/lib/src/material/typography.dart

@@ -256,7 +320,7 @@ class Typography extends Diagnosticable {
  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
-    final Typography defaultTypography = Typography();
+    final Typography defaultTypography = Typography.material2018();


Does making the default 2018 here change anything?

Good catch! Currently the default value for is the 2014 text theme.

Piinks · 2020-01-15T18:43:57Z

examples/flutter_gallery/lib/demo/typography_demo.dart

+      TextStyleItem(name: 'Headline 4', style: textTheme.headline4, text: 'Regular 34sp'),
+      TextStyleItem(name: 'Headline 5', style: textTheme.headline5, text: 'Regular 24sp'),
+      TextStyleItem(name: 'Headline 6', style: textTheme.headline6, text: 'Medium 20sp'),
+      TextStyleItem(name: 'Subtitle 1', style: textTheme.subtitle1, text: 'Regular 16sp'),


Is Subtitle 2 missing here? I don't know if it is necessary, I noticed overline is also omitted.

Yes, both of those styles are missing. This is just a simple translation of the existing demo - only the names have changed - I'm going to update to the demo to show the complete set of 2018 text styles in a separate PR.

#48547 (comment)

Piinks · 2020-01-15T22:24:07Z

packages/flutter/lib/src/material/text_theme.dart

      body1,
+      body2,


Would this be bodyText1 and bodyText2?

Piinks · 2020-01-15T22:24:27Z

packages/flutter/lib/src/material/text_theme.dart

    properties.add(DiagnosticsProperty<TextStyle>('body1', body1, defaultValue: defaultTheme.body1));
+    properties.add(DiagnosticsProperty<TextStyle>('body2', body2, defaultValue: defaultTheme.body2));


Same comment here for bodyText1 and bodyText2

Piinks · 2020-01-15T22:30:40Z

packages/flutter/lib/src/material/typography.dart

+    subtitle1 : TextStyle(debugLabel: 'blackMountainView subtitle1', fontFamily: 'Roboto', inherit: true, color: Colors.black87, decoration: TextDecoration.none),
+    bodyText1 : TextStyle(debugLabel: 'blackMountainView bodyText1', fontFamily: 'Roboto', inherit: true, color: Colors.black87, decoration: TextDecoration.none),
+    bodyText2 : TextStyle(debugLabel: 'blackMountainView bodyText2', fontFamily: 'Roboto', inherit: true, color: Colors.black87, decoration: TextDecoration.none),
+    caption   : TextStyle(debugLabel: 'blackMountainView caption',   fontFamily: 'Roboto', inherit: true, color: Colors.black54, decoration: TextDecoration.none),


Suggested change

caption : TextStyle(debugLabel: 'blackMountainView caption', fontFamily: 'Roboto', inherit: true, color: Colors.black54, decoration: TextDecoration.none),

caption: TextStyle(debugLabel: 'blackMountainView caption', fontFamily: 'Roboto', inherit: true, color: Colors.black54, decoration: TextDecoration.none),

Nit: It looks like there is some extra white space on this and a several of the following lines, is this intentional?

Not intentional, thanks for pointing that out.

Ah, it looks like the whitespace is meant to make this a whole lot more readable. I guess it just depends where you are viewing it from. :)
(image not from this change)

Piinks · 2020-01-15T22:33:08Z

packages/flutter/lib/src/material/typography.dart

+    bodyText2 : TextStyle(debugLabel: 'dense body1 2014',    inherit: false, fontSize:  15.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.ideographic),
+    caption   : TextStyle(debugLabel: 'dense caption 2014',  inherit: false, fontSize:  13.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.ideographic),
+    button    : TextStyle(debugLabel: 'dense button 2014',   inherit: false, fontSize:  15.0, fontWeight: FontWeight.w500, textBaseline: TextBaseline.ideographic),
+    subtitle2 : TextStyle(debugLabel: 'dense subtitle 2014', inherit: false, fontSize:  15.0, fontWeight: FontWeight.w500, textBaseline: TextBaseline.ideographic),


Uber nit: I noticed on some of these subtitle2 was moved up below subtitle1 and on others not.

I reordered the typography styles; now they match.

Piinks · 2020-01-15T23:39:47Z

packages/flutter/test/material/theme_test.dart

+        textTheme.headline6,
+        textTheme.subtitle1,
+        textTheme.bodyText1,
+        textTheme.bodyText2,


Is subtitle(14)/subtitle2(18) missing here?

This test just checks the original 2014 text styles (still the default). It's now a regression test. Will add a comment to that effect.

Piinks

Well done! This is a behemoth! :)

Piinks · 2020-01-24T19:05:44Z

packages/flutter/lib/src/material/typography.dart

+    subtitle1 : TextStyle(debugLabel: 'blackMountainView subtitle1', fontFamily: 'Roboto', inherit: true, color: Colors.black87, decoration: TextDecoration.none),
+    bodyText1 : TextStyle(debugLabel: 'blackMountainView bodyText1', fontFamily: 'Roboto', inherit: true, color: Colors.black87, decoration: TextDecoration.none),
+    bodyText2 : TextStyle(debugLabel: 'blackMountainView bodyText2', fontFamily: 'Roboto', inherit: true, color: Colors.black87, decoration: TextDecoration.none),
+    caption   : TextStyle(debugLabel: 'blackMountainView caption',   fontFamily: 'Roboto', inherit: true, color: Colors.black54, decoration: TextDecoration.none),


Ah, it looks like the whitespace is meant to make this a whole lot more readable. I guess it just depends where you are viewing it from. :)
(image not from this change)

Hixie · 2020-01-26T06:53:10Z

packages/flutter/lib/src/material/text_theme.dart

    TextStyle body2,
+    @Deprecated(
+      'This is the term used in the 2014 version of material design. The modern term is bodyText2. '


The "bodyText2" here should be "bodyText1" and vice versa.

HansMuller added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. work in progress; do not review labels Jan 10, 2020

googlebot added the cla: yes label Jan 10, 2020

fluttergithubbot added d: examples Sample code and demos c: contributor-productivity Team-specific productivity, code health, technical debt. customer: gallery Relating to flutter/gallery repository. Please transfer non-framework issues there. labels Jan 10, 2020

This was referenced Jan 10, 2020

Migrate TextTheme to 2018 APIs. #45745

Closed

Fix body1/body2 for 2018 Material Design (#38904). #47918

Closed

HansMuller force-pushed the migrate_text_theme_2018 branch from 59d3fa0 to abca319 Compare January 10, 2020 21:09

fluttergithubbot added the tool Affects the "flutter" command-line tool. See also t: labels. label Jan 13, 2020

HansMuller removed the work in progress; do not review label Jan 15, 2020

rami-a approved these changes Jan 15, 2020

View reviewed changes

HansMuller force-pushed the migrate_text_theme_2018 branch from f2e7f25 to 677d3d0 Compare January 15, 2020 17:36

Piinks reviewed Jan 15, 2020

View reviewed changes

HansMuller added 9 commits January 24, 2020 09:30

Migrate TextTheme to 2018 APIs

8349381

Updated some examples and comments

291eb7c

updates that flutter analyze missed

eaf0c19

migrate snippets, comments

9665eee

Updated dart.tmpl templates

47654ae

Added a typography test, check styles against the spec

297e563

Fixup the geometry tables

c1e66ab

Updated per review feedback

09664ec

updated per review feedback

cb9eb51

HansMuller force-pushed the migrate_text_theme_2018 branch from 677d3d0 to cb9eb51 Compare January 24, 2020 18:50

Piinks approved these changes Jan 24, 2020

View reviewed changes

HansMuller added the waiting for tree to go green label Jan 24, 2020

fluttergithubbot merged commit bc5c464 into flutter:master Jan 25, 2020

Hixie reviewed Jan 26, 2020

View reviewed changes

HansMuller mentioned this pull request Jan 27, 2020

Fix a TextTheme.body1 deprecation warning typo #49557

Merged

dnfield added a commit to dnfield/flutter that referenced this pull request Jan 27, 2020

apply flutter#48547

25dc5de

mono0926 mentioned this pull request Jan 30, 2020

Fix englishLike2018 bodyText #49756

Merged

9 tasks

krp mentioned this pull request Feb 6, 2020

TextTheme docs on Material Design 2018 are wrong. #38904

Closed

bparrishMines mentioned this pull request Feb 21, 2020

[firebase_ml_vision] Replace deprecated text theme fields in example app firebase/flutterfire#2034

Merged

13 tasks

gspencergoog mentioned this pull request Apr 3, 2020

Update TextTheme Widget properties in the website. flutter/website#3871

Closed

Coteh mentioned this pull request May 5, 2020

1.0.8+1 won't compile on Flutter stable (but downgrading to 1.0.8 works) Idean/Flutter-Neumorphic#109

Closed

feinstein mentioned this pull request May 27, 2020

TextTheme TextStyle name changes should have come with a Refactoring Tool #58033

Closed

Piinks mentioned this pull request Jan 15, 2021

Add fixes for deprecations in TextTheme #73994

Merged

8 tasks

This was referenced Jun 3, 2021

Remove TextTheme deprecations #83924

Merged

Remove deprecated typography constructor #83926

Merged

github-actions bot locked as resolved and limited conversation to collaborators Aug 2, 2021

		properties.add(DiagnosticsProperty<TextStyle>('body1', body1, defaultValue: defaultTheme.body1));
		properties.add(DiagnosticsProperty<TextStyle>('body2', body2, defaultValue: defaultTheme.body2));

	caption : TextStyle(debugLabel: 'blackMountainView caption', fontFamily: 'Roboto', inherit: true, color: Colors.black54, decoration: TextDecoration.none),
	caption: TextStyle(debugLabel: 'blackMountainView caption', fontFamily: 'Roboto', inherit: true, color: Colors.black54, decoration: TextDecoration.none),

Migrate TextTheme to 2018 APIs #48547

Migrate TextTheme to 2018 APIs #48547

Uh oh!

Conversation

HansMuller commented Jan 10, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rami-a left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

HansMuller commented Jan 10, 2020 •

edited

Loading