m3TextTheme constant

TextTheme const m3TextTheme

A Material 3 (M3) like and inspired TextTheme for Material 2 (M2).

This is used by the sub themes opt-in toggle to by default make the TextTheme match Material 3 phone size text theme. This is done as far as it can easily be defined within the constraint of Flutter SDK and its set of Material 1 and Material 2 typography.

https://m3.material.io/styles/typography/overview Also see: https://github.com/flutter/flutter/issues/89853

This default m3TextTheme when opting in on sub themes, can also be turned off by setting FlexSubThemesData.useTextTheme to false. This reverts the text theme back M2 2018 Typography

The mapping of M3 styles to M2 styles were made based on this: https://github.com/flutter/flutter/issues/89853 M3 has more text styles than those that can be represented by the M2 TextTheme, those are excluded.

Implementation

static const TextTheme m3TextTheme = TextTheme(
  // M3 Display Large. In Material2018 Typography: 96, w300, -1.5
  headline1: TextStyle(
    fontSize: 57,
    fontWeight: FontWeight.w400,
    letterSpacing: 0,
  ),
  // M3 Display Medium. In Material2018 Typography: 60, w300, -0.5
  headline2: TextStyle(
    fontSize: 45,
    fontWeight: FontWeight.w400,
    letterSpacing: 0,
  ),
  // M3 Display Small. In Material2018 Typography: 48, w400, 0
  headline3: TextStyle(
    fontSize: 36,
    fontWeight: FontWeight.w400,
    letterSpacing: 0,
  ),
  // M3 Headline Medium. In Material2018 Typography: 34, w400, 0.25
  headline4: TextStyle(
    fontSize: 28,
    fontWeight: FontWeight.w400,
    letterSpacing: 0,
  ),
  // M3 Headline Small. In Material2018 Typography: 24, w400, 0
  headline5: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.w400,
    letterSpacing: 0,
  ),
  // M3 Title Large. In Material2018 Typography: 20, w500, 0.15
  headline6: TextStyle(
    fontSize: 22,
    fontWeight: FontWeight.w500,
    letterSpacing: 0,
  ),
  // M3 Title Medium. In Material2018 Typography: 16, w400, 0.15
  subtitle1: TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.w500,
    letterSpacing: 0.15,
  ),
  // M3 Title Small. In Material2018 Typography: 14, w500, 0.1
  subtitle2: TextStyle(
    fontSize: 14,
    fontWeight: FontWeight.w500,
    letterSpacing: 0.1,
  ),
  // M3 Body Large. In Material2018 Typography: 16, w400, 0.5
  bodyText1: TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.w400,
    // M3 Guide says 0.15: https://m3.material.io/styles/typography/tokens
    // Table here said 0.5: https://github.com/flutter/flutter/issues/89853
    // Went with M3 Guide value, reported discrepancy.
    letterSpacing: 0.15,
  ),
  // M3 Body Medium. In Material2018 Typography: 14, w400, 0.25
  bodyText2: TextStyle(
    fontSize: 14,
    fontWeight: FontWeight.w400,
    letterSpacing: 0.25,
  ),
  // M3 Body Small. In Material2018 Typography: 12, w400, 0.4
  caption: TextStyle(
    fontSize: 12,
    fontWeight: FontWeight.w400,
    letterSpacing: 0.4,
  ),
  // M3 Label Large. In Material2018 Typography: 14, w500, 1.25
  button: TextStyle(
    fontSize: 14,
    fontWeight: FontWeight.w500,
    letterSpacing: 0.1,
  ),
  // M3 Label Small. In Material2018 Typography: 10, w400, 1.5
  overline: TextStyle(
    fontSize: 11,
    fontWeight: FontWeight.w500,
    letterSpacing: 0.5,
  ),
);