Add variable font axes to TextStyle (#100978)

Author: jason-simmons

packages/flutter/lib/src/painting/text_style.dart

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'dart:ui' as ui show ParagraphStyle, TextStyle, StrutStyle, lerpDouble, Shadow, FontFeature, TextHeightBehavior, TextLeadingDistribution;
+import 'dart:ui' as ui show ParagraphStyle, TextStyle, StrutStyle, lerpDouble, Shadow, FontFeature, FontVariation, TextHeightBehavior, TextLeadingDistribution;
 
 import 'package:flutter/foundation.dart';
 
@@ -482,6 +482,7 @@ class TextStyle with Diagnosticable {
     this.background,
     this.shadows,
     this.fontFeatures,
+    this.fontVariations,
     this.decoration,
     this.decorationColor,
     this.decorationStyle,
@@ -769,6 +770,23 @@ class TextStyle with Diagnosticable {
   /// these variants will be used for rendering.
   final List<ui.FontFeature>? fontFeatures;
 
+  /// A list of [FontVariation]s that affect how a variable font is rendered.
+  ///
+  /// Some fonts are variable fonts that can generate multiple font faces based
+  /// on the values of customizable attributes.  For example, a variable font
+  /// may have a weight axis that can be set to a value between 1 and 1000.
+  /// [FontVariation]s can be used to select the values of these design axes.
+  ///
+  /// For example, to control the weight axis of the Roboto Slab variable font
+  /// (https://fonts.google.com/specimen/Roboto+Slab):
+  /// ```dart
+  /// TextStyle(
+  ///   fontFamily: 'RobotoSlab',
+  ///   fontVariations: <FontVariation>[FontVariation('wght', 900.0)]
+  /// )
+  /// ```
+  final List<ui.FontVariation>? fontVariations;
+
   /// How visual text overflow should be handled.
   final TextOverflow? overflow;
 
@@ -809,6 +827,7 @@ class TextStyle with Diagnosticable {
     Paint? background,
     List<ui.Shadow>? shadows,
     List<ui.FontFeature>? fontFeatures,
+    List<ui.FontVariation>? fontVariations,
     TextDecoration? decoration,
     Color? decorationColor,
     TextDecorationStyle? decorationStyle,
@@ -845,6 +864,7 @@ class TextStyle with Diagnosticable {
       background: background ?? this.background,
       shadows: shadows ?? this.shadows,
       fontFeatures: fontFeatures ?? this.fontFeatures,
+      fontVariations: fontVariations ?? this.fontVariations,
       decoration: decoration ?? this.decoration,
       decorationColor: decorationColor ?? this.decorationColor,
       decorationStyle: decorationStyle ?? this.decorationStyle,
@@ -911,6 +931,7 @@ class TextStyle with Diagnosticable {
     Locale? locale,
     List<ui.Shadow>? shadows,
     List<ui.FontFeature>? fontFeatures,
+    List<ui.FontVariation>? fontVariations,
     String? package,
     TextOverflow? overflow,
   }) {
@@ -957,6 +978,7 @@ class TextStyle with Diagnosticable {
       background: background,
       shadows: shadows ?? this.shadows,
       fontFeatures: fontFeatures ?? this.fontFeatures,
+      fontVariations: fontVariations ?? this.fontVariations,
       decoration: decoration ?? this.decoration,
       decorationColor: decorationColor ?? this.decorationColor,
       decorationStyle: decorationStyle ?? this.decorationStyle,
@@ -1017,6 +1039,7 @@ class TextStyle with Diagnosticable {
       background: other.background,
       shadows: other.shadows,
       fontFeatures: other.fontFeatures,
+      fontVariations: other.fontVariations,
       decoration: other.decoration,
       decorationColor: other.decorationColor,
       decorationStyle: other.decorationStyle,
@@ -1073,6 +1096,7 @@ class TextStyle with Diagnosticable {
         background: t < 0.5 ? null : b.background,
         shadows: t < 0.5 ? null : b.shadows,
         fontFeatures: t < 0.5 ? null : b.fontFeatures,
+        fontVariations: t < 0.5 ? null : b.fontVariations,
         decoration: t < 0.5 ? null : b.decoration,
         decorationColor: Color.lerp(null, b.decorationColor, t),
         decorationStyle: t < 0.5 ? null : b.decorationStyle,
@@ -1103,6 +1127,7 @@ class TextStyle with Diagnosticable {
         background: t < 0.5 ? a.background : null,
         shadows: t < 0.5 ? a.shadows : null,
         fontFeatures: t < 0.5 ? a.fontFeatures : null,
+        fontVariations: t < 0.5 ? a.fontVariations : null,
         decoration: t < 0.5 ? a.decoration : null,
         decorationColor: Color.lerp(a.decorationColor, null, t),
         decorationStyle: t < 0.5 ? a.decorationStyle : null,
@@ -1140,6 +1165,7 @@ class TextStyle with Diagnosticable {
         : null,
       shadows: t < 0.5 ? a.shadows : b.shadows,
       fontFeatures: t < 0.5 ? a.fontFeatures : b.fontFeatures,
+      fontVariations: t < 0.5 ? a.fontVariations : b.fontVariations,
       decoration: t < 0.5 ? a.decoration : b.decoration,
       decorationColor: Color.lerp(a.decorationColor, b.decorationColor, t),
       decorationStyle: t < 0.5 ? a.decorationStyle : b.decorationStyle,
@@ -1178,6 +1204,7 @@ class TextStyle with Diagnosticable {
       ),
       shadows: shadows,
       fontFeatures: fontFeatures,
+      fontVariations: fontVariations,
     );
   }
 
@@ -1260,6 +1287,7 @@ class TextStyle with Diagnosticable {
         background != other.background ||
         !listEquals(shadows, other.shadows) ||
         !listEquals(fontFeatures, other.fontFeatures) ||
+        !listEquals(fontVariations, other.fontVariations) ||
         !listEquals(fontFamilyFallback, other.fontFamilyFallback) ||
         overflow != other.overflow)
       return RenderComparison.layout;
@@ -1296,6 +1324,7 @@ class TextStyle with Diagnosticable {
         && other.background == background
         && listEquals(other.shadows, shadows)
         && listEquals(other.fontFeatures, fontFeatures)
+        && listEquals(other.fontVariations, fontVariations)
         && other.decoration == decoration
         && other.decorationColor == decorationColor
         && other.decorationStyle == decorationStyle
@@ -1324,10 +1353,11 @@ class TextStyle with Diagnosticable {
     background,
     shadows == null ? null : Object.hashAll(shadows!),
     fontFeatures == null ? null : Object.hashAll(fontFeatures!),
+    fontVariations == null ? null : Object.hashAll(fontVariations!),
     decoration,
     decorationColor,
-    decorationStyle,
     Object.hash(
+      decorationStyle,
       decorationThickness,
       fontFamily,
       fontFamilyFallback == null ? null : Object.hashAll(fontFamilyFallback!),

packages/flutter/test/material/theme_test.dart

@@ -755,6 +755,8 @@ class _TextStyleProxy implements TextStyle {
   @override
   List<ui.FontFeature>? get fontFeatures => _delegate.fontFeatures;
   @override
+  List<ui.FontVariation>? get fontVariations => _delegate.fontVariations;
+  @override
   TextOverflow? get overflow => _delegate.overflow;
 
   @override
@@ -797,6 +799,7 @@ class _TextStyleProxy implements TextStyle {
     Locale? locale,
     List<ui.Shadow>? shadows,
     List<ui.FontFeature>? fontFeatures,
+    List<ui.FontVariation>? fontVariations,
     TextOverflow? overflow,
     String? package,
   }) {
@@ -828,6 +831,7 @@ class _TextStyleProxy implements TextStyle {
     ui.Paint? background,
     List<Shadow>? shadows,
     List<ui.FontFeature>? fontFeatures,
+    List<ui.FontVariation>? fontVariations,
     TextDecoration? decoration,
     Color? decorationColor,
     TextDecorationStyle? decorationStyle,

packages/flutter/test/painting/text_style_test.dart

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'dart:ui' as ui show TextStyle, ParagraphStyle, FontFeature, Shadow;
+import 'dart:ui' as ui show TextStyle, ParagraphStyle, FontFeature, FontVariation, Shadow;
 
 import 'package:flutter/foundation.dart';
 import 'package:flutter/painting.dart';
@@ -38,6 +38,7 @@ class _DartUiTextStyleToStringMatcher extends Matcher {
     _propertyToString('foreground', textStyle.foreground),
     _propertyToString('shadows', textStyle.shadows),
     _propertyToString('fontFeatures', textStyle.fontFeatures),
+    _propertyToString('fontVariations', textStyle.fontVariations),
   ];
 
   static String _propertyToString(String name, Object? property) => '$name: ${property ?? 'unspecified'}';
@@ -354,8 +355,18 @@ void main() {
   });
 
   test('TextStyle.hashCode', () {
-    const TextStyle a = TextStyle(fontFamilyFallback: <String>['Roboto'], shadows: <ui.Shadow>[ui.Shadow()], fontFeatures: <ui.FontFeature>[ui.FontFeature('abcd')]);
-    const TextStyle b = TextStyle(fontFamilyFallback: <String>['Noto'], shadows: <ui.Shadow>[ui.Shadow()], fontFeatures: <ui.FontFeature>[ui.FontFeature('abcd')]);
+    const TextStyle a = TextStyle(
+        fontFamilyFallback: <String>['Roboto'],
+        shadows: <ui.Shadow>[ui.Shadow()],
+        fontFeatures: <ui.FontFeature>[ui.FontFeature('abcd')],
+        fontVariations: <ui.FontVariation>[ui.FontVariation('wght', 123.0)],
+    );
+    const TextStyle b = TextStyle(
+        fontFamilyFallback: <String>['Noto'],
+        shadows: <ui.Shadow>[ui.Shadow()],
+        fontFeatures: <ui.FontFeature>[ui.FontFeature('abcd')],
+        fontVariations: <ui.FontVariation>[ui.FontVariation('wght', 123.0)],
+    );
     expect(a.hashCode, a.hashCode);
     expect(a.hashCode, isNot(equals(b.hashCode)));
 
@@ -476,6 +487,7 @@ void main() {
       shadows: <ui.Shadow>[],
       fontStyle: FontStyle.normal,
       fontFeatures: <ui.FontFeature>[],
+      fontVariations: <ui.FontVariation>[],
       textBaseline: TextBaseline.alphabetic,
       leadingDistribution: TextLeadingDistribution.even,
     );
@@ -487,6 +499,8 @@ void main() {
     expect(style.apply(locale: const Locale.fromSubtags(languageCode: 'es')).locale, const Locale.fromSubtags(languageCode: 'es'));
     expect(style.apply().fontFeatures, const <ui.FontFeature>[]);
     expect(style.apply(fontFeatures: const <ui.FontFeature>[ui.FontFeature.enable('test')]).fontFeatures, const <ui.FontFeature>[ui.FontFeature.enable('test')]);
+    expect(style.apply().fontVariations, const <ui.FontVariation>[]);
+    expect(style.apply(fontVariations: const <ui.FontVariation>[ui.FontVariation('test', 100.0)]).fontVariations, const <ui.FontVariation>[ui.FontVariation('test', 100.0)]);
     expect(style.apply().textBaseline, TextBaseline.alphabetic);
     expect(style.apply(textBaseline: TextBaseline.ideographic).textBaseline, TextBaseline.ideographic);
     expect(style.apply().leadingDistribution, TextLeadingDistribution.even);