Don't use iOS font names for the macOS theme (#74342)

macOS was sharing the iOS font theme, but the names of the underlying
fonts differ between the two platforms, so this was actually using the
fallback font from the engine. Instead of using the underlying font
names on macOS, which is no longer allowed by CoreText, use the
meta-font returned by systemFontOfSize:

This has been verified on 10.15; older versions of macOS may need
different font names as the handling of these fonts have changed over
time. Fixing older versions as necessary will be handled in a follow-up.

See https://github.com/flutter/flutter/issues/57805

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

@@ -174,7 +174,6 @@ class Typography with Diagnosticable {
     assert(tall != null);
     switch (platform) {
       case TargetPlatform.iOS:
-      case TargetPlatform.macOS:
         black ??= blackCupertino;
         white ??= whiteCupertino;
         break;
@@ -187,6 +186,10 @@ class Typography with Diagnosticable {
         black ??= blackRedmond;
         white ??= whiteRedmond;
         break;
+      case TargetPlatform.macOS:
+        black ??= blackRedwoodCity;
+        white ??= whiteRedwoodCity;
+        break;
       case TargetPlatform.linux:
         black ??= blackHelsinki;
         white ??= whiteHelsinki;
@@ -458,6 +461,8 @@ class Typography with Diagnosticable {
   /// A material design text theme with dark glyphs based on San Francisco.
   ///
   /// This [TextTheme] provides color but not geometry (font size, weight, etc).
+  ///
+  /// This theme uses the iOS version of the font names.
   static const TextTheme blackCupertino = TextTheme(
     headline1 : TextStyle(debugLabel: 'blackCupertino headline1', fontFamily: '.SF UI Display', inherit: true, color: Colors.black54, decoration: TextDecoration.none),
     headline2 : TextStyle(debugLabel: 'blackCupertino headline2', fontFamily: '.SF UI Display', inherit: true, color: Colors.black54, decoration: TextDecoration.none),
@@ -477,6 +482,8 @@ class Typography with Diagnosticable {
   /// A material design text theme with light glyphs based on San Francisco.
   ///
   /// This [TextTheme] provides color but not geometry (font size, weight, etc).
+  ///
+  /// This theme uses the iOS version of the font names.
   static const TextTheme whiteCupertino = TextTheme(
     headline1 : TextStyle(debugLabel: 'whiteCupertino headline1', fontFamily: '.SF UI Display', inherit: true, color: Colors.white70, decoration: TextDecoration.none),
     headline2 : TextStyle(debugLabel: 'whiteCupertino headline2', fontFamily: '.SF UI Display', inherit: true, color: Colors.white70, decoration: TextDecoration.none),
@@ -493,6 +500,48 @@ class Typography with Diagnosticable {
     overline  : TextStyle(debugLabel: 'whiteCupertino overline',  fontFamily: '.SF UI Text',    inherit: true, color: Colors.white,   decoration: TextDecoration.none),
   );
 
+  /// A material design text theme with dark glyphs based on San Francisco.
+  ///
+  /// This [TextTheme] provides color but not geometry (font size, weight, etc).
+  ///
+  /// This theme uses the macOS version of the font names.
+  static const TextTheme blackRedwoodCity = TextTheme(
+    headline1 : TextStyle(debugLabel: 'blackRedwoodCity headline1', fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.black54, decoration: TextDecoration.none),
+    headline2 : TextStyle(debugLabel: 'blackRedwoodCity headline2', fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.black54, decoration: TextDecoration.none),
+    headline3 : TextStyle(debugLabel: 'blackRedwoodCity headline3', fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.black54, decoration: TextDecoration.none),
+    headline4 : TextStyle(debugLabel: 'blackRedwoodCity headline4', fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.black54, decoration: TextDecoration.none),
+    headline5 : TextStyle(debugLabel: 'blackRedwoodCity headline5', fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.black87, decoration: TextDecoration.none),
+    headline6 : TextStyle(debugLabel: 'blackRedwoodCity headline6', fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.black87, decoration: TextDecoration.none),
+    bodyText1 : TextStyle(debugLabel: 'blackRedwoodCity bodyText1', fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.black87, decoration: TextDecoration.none),
+    bodyText2 : TextStyle(debugLabel: 'blackRedwoodCity bodyText2', fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.black87, decoration: TextDecoration.none),
+    subtitle1 : TextStyle(debugLabel: 'blackRedwoodCity subtitle1', fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.black87, decoration: TextDecoration.none),
+    subtitle2 : TextStyle(debugLabel: 'blackRedwoodCity subtitle2', fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.black,   decoration: TextDecoration.none),
+    caption   : TextStyle(debugLabel: 'blackRedwoodCity caption',   fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.black54, decoration: TextDecoration.none),
+    button    : TextStyle(debugLabel: 'blackRedwoodCity button',    fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.black87, decoration: TextDecoration.none),
+    overline  : TextStyle(debugLabel: 'blackRedwoodCity overline',  fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.black,   decoration: TextDecoration.none),
+  );
+
+  /// A material design text theme with light glyphs based on San Francisco.
+  ///
+  /// This [TextTheme] provides color but not geometry (font size, weight, etc).
+  ///
+  /// This theme uses the macOS version of the font names.
+  static const TextTheme whiteRedwoodCity = TextTheme(
+    headline1 : TextStyle(debugLabel: 'whiteRedwoodCity headline1', fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.white70, decoration: TextDecoration.none),
+    headline2 : TextStyle(debugLabel: 'whiteRedwoodCity headline2', fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.white70, decoration: TextDecoration.none),
+    headline3 : TextStyle(debugLabel: 'whiteRedwoodCity headline3', fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.white70, decoration: TextDecoration.none),
+    headline4 : TextStyle(debugLabel: 'whiteRedwoodCity headline4', fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.white70, decoration: TextDecoration.none),
+    headline5 : TextStyle(debugLabel: 'whiteRedwoodCity headline5', fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.white,   decoration: TextDecoration.none),
+    headline6 : TextStyle(debugLabel: 'whiteRedwoodCity headline6', fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.white,   decoration: TextDecoration.none),
+    subtitle1 : TextStyle(debugLabel: 'whiteRedwoodCity subtitle1', fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.white,   decoration: TextDecoration.none),
+    bodyText1 : TextStyle(debugLabel: 'whiteRedwoodCity bodyText1', fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.white,   decoration: TextDecoration.none),
+    bodyText2 : TextStyle(debugLabel: 'whiteRedwoodCity bodyText2', fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.white,   decoration: TextDecoration.none),
+    caption   : TextStyle(debugLabel: 'whiteRedwoodCity caption',   fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.white70, decoration: TextDecoration.none),
+    button    : TextStyle(debugLabel: 'whiteRedwoodCity button',    fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.white,   decoration: TextDecoration.none),
+    subtitle2 : TextStyle(debugLabel: 'whiteRedwoodCity subtitle2', fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.white,   decoration: TextDecoration.none),
+    overline  : TextStyle(debugLabel: 'whiteRedwoodCity overline',  fontFamily: '.AppleSystemUIFont', inherit: true, color: Colors.white,   decoration: TextDecoration.none),
+  );
+
   /// Defines text geometry for [ScriptCategory.englishLike] scripts, such as
   /// English, French, Russian, etc.
   static const TextTheme englishLike2014 = TextTheme(

packages/flutter/test/material/typography_test.dart

@@ -38,6 +38,10 @@ void main() {
     return s.fontFamily == '.SF UI Text';
   }, 'Uses SF Text font');
 
+  final Matcher isMacOSSanFranciscoMetaFont = predicate((TextStyle s) {
+    return s.fontFamily == '.AppleSystemUIFont';
+  }, 'Uses macOS system meta-font');
+
   test('Typography on iOS defaults to the correct SF font family based on size', () {
     final Typography typography = Typography.material2018(platform: TargetPlatform.iOS);
     for (final TextTheme textTheme in <TextTheme>[typography.black, typography.white]) {
@@ -57,22 +61,22 @@ void main() {
     }
   });
 
-  test('Typography on macOS defaults to the correct SF font family based on size', () {
+  test('Typography on macOS defaults to the system UI meta-font', () {
     final Typography typography = Typography.material2018(platform: TargetPlatform.macOS);
     for (final TextTheme textTheme in <TextTheme>[typography.black, typography.white]) {
-      expect(textTheme.headline1, isSanFranciscoDisplayFont);
-      expect(textTheme.headline2, isSanFranciscoDisplayFont);
-      expect(textTheme.headline3, isSanFranciscoDisplayFont);
-      expect(textTheme.headline4, isSanFranciscoDisplayFont);
-      expect(textTheme.headline5, isSanFranciscoDisplayFont);
-      expect(textTheme.headline6, isSanFranciscoDisplayFont);
-      expect(textTheme.subtitle1, isSanFranciscoTextFont);
-      expect(textTheme.bodyText1, isSanFranciscoTextFont);
-      expect(textTheme.bodyText2, isSanFranciscoTextFont);
-      expect(textTheme.caption, isSanFranciscoTextFont);
-      expect(textTheme.button, isSanFranciscoTextFont);
-      expect(textTheme.subtitle2, isSanFranciscoTextFont);
-      expect(textTheme.overline, isSanFranciscoTextFont);
+      expect(textTheme.headline1, isMacOSSanFranciscoMetaFont);
+      expect(textTheme.headline2, isMacOSSanFranciscoMetaFont);
+      expect(textTheme.headline3, isMacOSSanFranciscoMetaFont);
+      expect(textTheme.headline4, isMacOSSanFranciscoMetaFont);
+      expect(textTheme.headline5, isMacOSSanFranciscoMetaFont);
+      expect(textTheme.headline6, isMacOSSanFranciscoMetaFont);
+      expect(textTheme.subtitle1, isMacOSSanFranciscoMetaFont);
+      expect(textTheme.bodyText1, isMacOSSanFranciscoMetaFont);
+      expect(textTheme.bodyText2, isMacOSSanFranciscoMetaFont);
+      expect(textTheme.caption, isMacOSSanFranciscoMetaFont);
+      expect(textTheme.button, isMacOSSanFranciscoMetaFont);
+      expect(textTheme.subtitle2, isMacOSSanFranciscoMetaFont);
+      expect(textTheme.overline, isMacOSSanFranciscoMetaFont);
     }
   });