Chips text scaling (#57745)

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

@@ -1823,6 +1823,16 @@ class _RawChipState extends State<RawChip> with TickerProviderStateMixin<RawChip
     assert(debugCheckHasDirectionality(context));
     assert(debugCheckHasMaterialLocalizations(context));
 
+    /// The chip at text scale 1 starts with 8px on each side and as text scaling
+    /// gets closer to 2 the label padding is linearly interpolated from 8px to 4px.
+    /// Once the widget has a text scaling of 2 or higher than the label padding
+    /// remains 4px.
+    final EdgeInsetsGeometry _defaultLabelPadding = EdgeInsets.lerp(
+      const EdgeInsets.symmetric(horizontal: 8.0),
+      const EdgeInsets.symmetric(horizontal: 4.0),
+      (MediaQuery.of(context).textScaleFactor - 1.0).clamp(0.0, 1.0) as double,
+    );
+
     final ThemeData theme = Theme.of(context);
     final ChipThemeData chipTheme = ChipTheme.of(context);
     final TextDirection textDirection = Directionality.of(context);
@@ -1837,6 +1847,7 @@ class _RawChipState extends State<RawChip> with TickerProviderStateMixin<RawChip
     final TextStyle effectiveLabelStyle = widget.labelStyle ?? chipTheme.labelStyle;
     final Color resolvedLabelColor =  MaterialStateProperty.resolveAs<Color>(effectiveLabelStyle?.color, _states);
     final TextStyle resolvedLabelStyle = effectiveLabelStyle?.copyWith(color: resolvedLabelColor);
+    final EdgeInsetsGeometry labelPadding = widget.labelPadding ?? chipTheme.labelPadding ?? _defaultLabelPadding;
 
     Widget result = Material(
       elevation: isTapping ? pressElevation : elevation,
@@ -1896,7 +1907,7 @@ class _RawChipState extends State<RawChip> with TickerProviderStateMixin<RawChip
                 brightness: chipTheme.brightness,
                 padding: (widget.padding ?? chipTheme.padding).resolve(textDirection),
                 visualDensity: widget.visualDensity ?? theme.visualDensity,
-                labelPadding: (widget.labelPadding ?? chipTheme.labelPadding).resolve(textDirection),
+                labelPadding: labelPadding.resolve(textDirection),
                 showAvatar: hasAvatar,
                 showCheckmark: showCheckmark,
                 checkmarkColor: checkmarkColor,

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

@@ -188,7 +188,7 @@ class ChipThemeData with Diagnosticable {
     this.selectedShadowColor,
     this.showCheckmark,
     this.checkmarkColor,
-    @required this.labelPadding,
+    this.labelPadding,
     @required this.padding,
     @required this.shape,
     @required this.labelStyle,
@@ -200,7 +200,6 @@ class ChipThemeData with Diagnosticable {
        assert(disabledColor != null),
        assert(selectedColor != null),
        assert(secondarySelectedColor != null),
-       assert(labelPadding != null),
        assert(padding != null),
        assert(shape != null),
        assert(labelStyle != null),
@@ -249,7 +248,6 @@ class ChipThemeData with Diagnosticable {
     const int selectAlpha = 0x3d; // 12% + 12% = 24%
     const int textLabelAlpha = 0xde; // 87%
     const ShapeBorder shape = StadiumBorder();
-    const EdgeInsetsGeometry labelPadding = EdgeInsets.symmetric(horizontal: 8.0);
     const EdgeInsetsGeometry padding = EdgeInsets.all(4.0);
 
     primaryColor = primaryColor ?? (brightness == Brightness.light ? Colors.black : Colors.white);
@@ -269,7 +267,6 @@ class ChipThemeData with Diagnosticable {
       disabledColor: disabledColor,
       selectedColor: selectedColor,
       secondarySelectedColor: secondarySelectedColor,
-      labelPadding: labelPadding,
       padding: padding,
       shape: shape,
       labelStyle: labelStyle,

packages/flutter/test/material/chip_test.dart

@@ -590,9 +590,9 @@ void main() {
     // https://github.com/flutter/flutter/issues/12357
     expect(tester.getSize(find.text('Chip A')), anyOf(const Size(252.0, 42.0), const Size(251.0, 42.0)));
     expect(tester.getSize(find.text('Chip B')), anyOf(const Size(252.0, 42.0), const Size(251.0, 42.0)));
-    expect(tester.getSize(find.byType(Chip).first).width, anyOf(318.0, 319.0));
+    expect(tester.getSize(find.byType(Chip).first).width, anyOf(310.0, 311.0));
     expect(tester.getSize(find.byType(Chip).first).height, equals(50.0));
-    expect(tester.getSize(find.byType(Chip).last).width, anyOf(318.0, 319.0));
+    expect(tester.getSize(find.byType(Chip).last).width, anyOf(310.0, 311.0));
     expect(tester.getSize(find.byType(Chip).last).height, equals(50.0));
 
     // Check that individual text scales are taken into account.

packages/flutter/test/material/chip_theme_test.dart

@@ -184,7 +184,7 @@ void main() {
     expect(lightTheme.disabledColor, equals(Colors.black.withAlpha(0x0c)));
     expect(lightTheme.selectedColor, equals(Colors.black.withAlpha(0x3d)));
     expect(lightTheme.secondarySelectedColor, equals(customColor1.withAlpha(0x3d)));
-    expect(lightTheme.labelPadding, equals(const EdgeInsets.symmetric(horizontal: 8.0)));
+    expect(lightTheme.labelPadding, isNull);
     expect(lightTheme.padding, equals(const EdgeInsets.all(4.0)));
     expect(lightTheme.shape, isA<StadiumBorder>());
     expect(lightTheme.labelStyle.color, equals(Colors.black.withAlpha(0xde)));
@@ -202,7 +202,7 @@ void main() {
     expect(darkTheme.disabledColor, equals(Colors.white.withAlpha(0x0c)));
     expect(darkTheme.selectedColor, equals(Colors.white.withAlpha(0x3d)));
     expect(darkTheme.secondarySelectedColor, equals(customColor1.withAlpha(0x3d)));
-    expect(darkTheme.labelPadding, equals(const EdgeInsets.symmetric(horizontal: 8.0)));
+    expect(darkTheme.labelPadding, isNull);
     expect(darkTheme.padding, equals(const EdgeInsets.all(4.0)));
     expect(darkTheme.shape, isA<StadiumBorder>());
     expect(darkTheme.labelStyle.color, equals(Colors.white.withAlpha(0xde)));
@@ -220,7 +220,7 @@ void main() {
     expect(customTheme.disabledColor, equals(customColor1.withAlpha(0x0c)));
     expect(customTheme.selectedColor, equals(customColor1.withAlpha(0x3d)));
     expect(customTheme.secondarySelectedColor, equals(customColor2.withAlpha(0x3d)));
-    expect(customTheme.labelPadding, equals(const EdgeInsets.symmetric(horizontal: 8.0)));
+    expect(customTheme.labelPadding, isNull);
     expect(customTheme.padding, equals(const EdgeInsets.all(4.0)));
     expect(customTheme.shape, isA<StadiumBorder>());
     expect(customTheme.labelStyle.color, equals(customColor1.withAlpha(0xde)));
@@ -235,6 +235,7 @@ void main() {
       labelStyle: ThemeData.fallback().textTheme.bodyText1.copyWith(color: Colors.black),
     ).copyWith(
       elevation: 1.0,
+      labelPadding: const EdgeInsets.symmetric(horizontal: 8.0),
       pressElevation: 4.0,
       shadowColor: Colors.black,
       selectedShadowColor: Colors.black,