Revert "[Material] Update slider and slider theme with new sizes, shapes, and...

Revert "[Material] Update slider and slider theme with new sizes, shapes, and color mappings (#30390)" (#31339)

This reverts commit b1039f0f.

(This is a temporary revert while some of our customers deal with the breaking changes involved.)

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

@@ -428,52 +428,27 @@ class _SliderState extends State<Slider> with TickerProviderStateMixin {
     return widget.max > widget.min ? (value - widget.min) / (widget.max - widget.min) : 0.0;
   }
 
-  static const double _defaultTrackHeight = 2;
-  static const SliderTrackShape _defaultTrackShape = RoundedRectSliderTrackShape();
-  static const SliderTickMarkShape _defaultTickMarkShape = RoundSliderTickMarkShape();
-  static const SliderComponentShape _defaultOverlayShape = RoundSliderOverlayShape();
-  static const SliderComponentShape _defaultThumbShape = RoundSliderThumbShape();
-  static const SliderComponentShape _defaultValueIndicatorShape = PaddleSliderValueIndicatorShape();
-  static const ShowValueIndicator _defaultShowValueIndicator = ShowValueIndicator.onlyForDiscrete;
-
   @override
   Widget build(BuildContext context) {
     assert(debugCheckHasMaterial(context));
     assert(debugCheckHasMediaQuery(context));
 
-    final ThemeData theme = Theme.of(context);
     SliderThemeData sliderTheme = SliderTheme.of(context);
 
     // If the widget has active or inactive colors specified, then we plug them
     // in to the slider theme as best we can. If the developer wants more
-    // control than that, then they need to use a SliderTheme. The default
-    // colors come from the ThemeData.colorScheme. These colors, along with
-    // the default shapes and text styles are aligned to the Material
-    // Guidelines.
+    // control than that, then they need to use a SliderTheme.
+    if (widget.activeColor != null || widget.inactiveColor != null) {
       sliderTheme = sliderTheme.copyWith(
-      trackHeight: sliderTheme.trackHeight ?? _defaultTrackHeight,
-      activeTrackColor: widget.activeColor ?? sliderTheme.activeTrackColor ?? theme.colorScheme.primary,
-      inactiveTrackColor: widget.inactiveColor ?? sliderTheme.inactiveTrackColor ?? theme.colorScheme.primary.withOpacity(0.24),
-      disabledActiveTrackColor: sliderTheme.disabledActiveTrackColor ?? theme.colorScheme.onSurface.withOpacity(0.32),
-      disabledInactiveTrackColor: sliderTheme.disabledInactiveTrackColor ?? theme.colorScheme.onSurface.withOpacity(0.12),
-      activeTickMarkColor: widget.inactiveColor ?? sliderTheme.activeTickMarkColor ?? theme.colorScheme.onPrimary.withOpacity(0.54),
-      inactiveTickMarkColor: widget.activeColor ?? sliderTheme.inactiveTickMarkColor ?? theme.colorScheme.primary.withOpacity(0.54),
-      disabledActiveTickMarkColor: sliderTheme.disabledActiveTickMarkColor ?? theme.colorScheme.onPrimary.withOpacity(0.12),
-      disabledInactiveTickMarkColor: sliderTheme.disabledInactiveTickMarkColor ?? theme.colorScheme.onSurface.withOpacity(0.12),
-      thumbColor: widget.activeColor ?? sliderTheme.thumbColor ?? theme.colorScheme.primary,
-      disabledThumbColor: sliderTheme.disabledThumbColor ?? theme.colorScheme.onSurface.withOpacity(0.38),
-      overlayColor: widget.activeColor?.withOpacity(0.12) ?? sliderTheme.overlayColor ?? theme.colorScheme.primary.withOpacity(0.12),
-      valueIndicatorColor: widget.activeColor ?? sliderTheme.valueIndicatorColor ?? theme.colorScheme.primary,
-      trackShape: sliderTheme.trackShape ?? _defaultTrackShape,
-      tickMarkShape: sliderTheme.tickMarkShape ?? _defaultTickMarkShape,
-      thumbShape: sliderTheme.thumbShape ?? _defaultThumbShape,
-      overlayShape: sliderTheme.overlayShape ?? _defaultOverlayShape,
-      valueIndicatorShape: sliderTheme.valueIndicatorShape ?? _defaultValueIndicatorShape,
-      showValueIndicator: sliderTheme.showValueIndicator ?? _defaultShowValueIndicator,
-      valueIndicatorTextStyle: sliderTheme.valueIndicatorTextStyle ?? theme.textTheme.body2.copyWith(
-        color: theme.colorScheme.onPrimary,
-      ),
+        activeTrackColor: widget.activeColor,
+        inactiveTrackColor: widget.inactiveColor,
+        activeTickMarkColor: widget.inactiveColor,
+        inactiveTickMarkColor: widget.activeColor,
+        thumbColor: widget.activeColor,
+        valueIndicatorColor: widget.activeColor,
+        overlayColor: widget.activeColor?.withAlpha(0x29),
       );
+    }
 
     return _SliderRenderObjectWidget(
       value: _unlerp(widget.value),
@@ -523,6 +498,7 @@ class _SliderRenderObjectWidget extends LeafRenderObjectWidget {
       divisions: divisions,
       label: label,
       sliderTheme: sliderTheme,
+      theme: Theme.of(context),
       mediaQueryData: mediaQueryData,
       onChanged: onChanged,
       onChangeStart: onChangeStart,
@@ -560,6 +536,7 @@ class _RenderSlider extends RenderBox {
     int divisions,
     String label,
     SliderThemeData sliderTheme,
+    ThemeData theme,
     MediaQueryData mediaQueryData,
     TargetPlatform platform,
     ValueChanged<double> onChanged,
@@ -577,6 +554,7 @@ class _RenderSlider extends RenderBox {
        _value = value,
        _divisions = divisions,
        _sliderTheme = sliderTheme,
+       _theme = theme,
        _mediaQueryData = mediaQueryData,
        _onChanged = onChanged,
        _state = state,
@@ -1005,6 +983,7 @@ class _RenderSlider extends RenderBox {
       isEnabled: isInteractive,
     );
 
+    // TODO(closkmith): Move this to paint after the thumb.
     if (!_overlayAnimation.isDismissed) {
       _sliderTheme.overlayShape.paint(
         context,
@@ -1021,6 +1000,7 @@ class _RenderSlider extends RenderBox {
     }
 
     if (isDiscrete) {
+      // TODO(clocksmith): Align tick mark centers to ends of track by not subtracting diameter from length.
       final double tickMarkWidth = _sliderTheme.tickMarkShape.getPreferredSize(
         isEnabled: isInteractive,
         sliderTheme: _sliderTheme,

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

@@ -243,7 +243,12 @@ class ThemeData extends Diagnosticable {
     highlightColor ??= isDark ? _kDarkThemeHighlightColor : _kLightThemeHighlightColor;
     splashColor ??= isDark ? _kDarkThemeSplashColor : _kLightThemeSplashColor;
 
-    sliderTheme ??= const SliderThemeData();
+    sliderTheme ??= SliderThemeData.fromPrimaryColors(
+      primaryColor: primaryColor,
+      primaryColorLight: primaryColorLight,
+      primaryColorDark: primaryColorDark,
+      valueIndicatorTextStyle: accentTextTheme.body2,
+    );
     tabBarTheme ??= const TabBarTheme();
     appBarTheme ??= const AppBarTheme();
     bottomAppBarTheme ??= const BottomAppBarTheme();

packages/flutter/test/material/slider_test.dart

@@ -298,8 +298,8 @@ void main() {
     );
 
     final List<Offset> expectedLog = <Offset>[
-      const Offset(24.0, 300.0),
-      const Offset(24.0, 300.0),
+      const Offset(16.0, 300.0),
+      const Offset(16.0, 300.0),
       const Offset(400.0, 300.0),
     ];
     final TestGesture gesture = await tester.startGesture(tester.getCenter(find.byKey(sliderKey)));
@@ -313,20 +313,20 @@ void main() {
     await tester.pump(const Duration(milliseconds: 10));
     expect(value, equals(0.0));
     expect(log.length, 5);
-    expect(log.last.dx, closeTo(386.6, 0.1));
+    expect(log.last.dx, closeTo(386.3, 0.1));
     // With no more gesture or value changes, the thumb position should still
     // be redrawn in the animated position.
     await tester.pump();
     await tester.pump(const Duration(milliseconds: 10));
     expect(value, equals(0.0));
     expect(log.length, 7);
-    expect(log.last.dx, closeTo(344.5, 0.1));
+    expect(log.last.dx, closeTo(343.3, 0.1));
     // Final position.
     await tester.pump(const Duration(milliseconds: 80));
-    expectedLog.add(const Offset(24.0, 300.0));
+    expectedLog.add(const Offset(16.0, 300.0));
     expect(value, equals(0.0));
     expect(log.length, 8);
-    expect(log.last.dx, closeTo(24.0, 0.1));
+    expect(log.last.dx, closeTo(16.0, 0.1));
     await gesture.up();
   });
 
@@ -409,8 +409,8 @@ void main() {
     );
 
     final List<Offset> expectedLog = <Offset>[
-      const Offset(24.0, 300.0),
-      const Offset(24.0, 300.0),
+      const Offset(16.0, 300.0),
+      const Offset(16.0, 300.0),
       const Offset(400.0, 300.0),
     ];
     final TestGesture gesture = await tester.startGesture(tester.getCenter(find.byKey(sliderKey)));
@@ -424,20 +424,20 @@ void main() {
     await tester.pump(const Duration(milliseconds: 10));
     expect(value, equals(0.0));
     expect(log.length, 5);
-    expect(log.last.dx, closeTo(386.6, 0.1));
+    expect(log.last.dx, closeTo(386.3, 0.1));
     // With no more gesture or value changes, the thumb position should still
     // be redrawn in the animated position.
     await tester.pump();
     await tester.pump(const Duration(milliseconds: 10));
     expect(value, equals(0.0));
     expect(log.length, 7);
-    expect(log.last.dx, closeTo(344.5, 0.1));
+    expect(log.last.dx, closeTo(343.3, 0.1));
     // Final position.
     await tester.pump(const Duration(milliseconds: 80));
-    expectedLog.add(const Offset(24.0, 300.0));
+    expectedLog.add(const Offset(16.0, 300.0));
     expect(value, equals(0.0));
     expect(log.length, 8);
-    expect(log.last.dx, closeTo(24.0, 0.1));
+    expect(log.last.dx, closeTo(16.0, 0.1));
     await gesture.up();
   });
 
@@ -546,20 +546,6 @@ void main() {
     final ThemeData theme = ThemeData(
       platform: TargetPlatform.android,
       primarySwatch: Colors.blue,
-      sliderTheme: const SliderThemeData(
-        disabledThumbColor: Color(0xff000001),
-        disabledActiveTickMarkColor: Color(0xff000002),
-        disabledActiveTrackColor: Color(0xff000003),
-        disabledInactiveTickMarkColor: Color(0xff000004),
-        disabledInactiveTrackColor: Color(0xff000005),
-        activeTrackColor: Color(0xff000006),
-        activeTickMarkColor: Color(0xff000007),
-        inactiveTrackColor: Color(0xff000008),
-        inactiveTickMarkColor: Color(0xff000009),
-        overlayColor: Color(0xff000010),
-        thumbColor: Color(0xff000011),
-        valueIndicatorColor: Color(0xff000012),
-      )
     );
     final SliderThemeData sliderTheme = theme.sliderTheme;
     double value = 0.45;
@@ -738,7 +724,7 @@ void main() {
       paints
         ..rect(color: customColor1) // active track
         ..rect(color: customColor2) // inactive track
-        ..circle(color: customColor1.withOpacity(0.12)) // overlay
+        ..circle(color: customColor1.withAlpha(0x29)) // overlay
         ..circle(color: customColor2) // 1st tick mark
         ..circle(color: customColor2) // 2nd tick mark
         ..circle(color: customColor2) // 3rd tick mark
@@ -872,7 +858,7 @@ void main() {
         ),
       ),
     ));
-    expect(tester.renderObject<RenderBox>(find.byType(Slider)).size, const Size(144.0 + 2.0 * 24.0, 600.0));
+    expect(tester.renderObject<RenderBox>(find.byType(Slider)).size, const Size(144.0 + 2.0 * 16.0, 600.0));
 
     await tester.pumpWidget(Directionality(
       textDirection: TextDirection.ltr,
@@ -892,7 +878,7 @@ void main() {
         ),
       ),
     ));
-    expect(tester.renderObject<RenderBox>(find.byType(Slider)).size, const Size(144.0 + 2.0 * 24.0, 48.0));
+    expect(tester.renderObject<RenderBox>(find.byType(Slider)).size, const Size(144.0 + 2.0 * 16.0, 32.0));
   });
 
   testWidgets('Slider respects textScaleFactor', (WidgetTester tester) async {
@@ -1091,12 +1077,12 @@ void main() {
       expect(
         sliderBox,
         paints
-          ..circle(x: 25.0, y: 24.0, radius: 1.0)
-          ..circle(x: 212.5, y: 24.0, radius: 1.0)
-          ..circle(x: 400.0, y: 24.0, radius: 1.0)
-          ..circle(x: 587.5, y: 24.0, radius: 1.0)
-          ..circle(x: 775.0, y: 24.0, radius: 1.0)
-          ..circle(x: 24.0, y: 24.0, radius: 10.0),
+          ..circle(x: 17.0, y: 16.0, radius: 1.0)
+          ..circle(x: 208.5, y: 16.0, radius: 1.0)
+          ..circle(x: 400.0, y: 16.0, radius: 1.0)
+          ..circle(x: 591.5, y: 16.0, radius: 1.0)
+          ..circle(x: 783.0, y: 16.0, radius: 1.0)
+          ..circle(x: 16.0, y: 16.0, radius: 6.0),
       );
 
       gesture = await tester.startGesture(center);
@@ -1107,13 +1093,13 @@ void main() {
       expect(
         sliderBox,
         paints
-          ..circle(x: 111.20703125, y: 24.0, radius: 5.687664985656738)
-          ..circle(x: 25.0, y: 24.0, radius: 1.0)
-          ..circle(x: 212.5, y: 24.0, radius: 1.0)
-          ..circle(x: 400.0, y: 24.0, radius: 1.0)
-          ..circle(x: 587.5, y: 24.0, radius: 1.0)
-          ..circle(x: 775.0, y: 24.0, radius: 1.0)
-          ..circle(x: 111.20703125, y: 24.0, radius: 10.0),
+          ..circle(x: 105.0625, y: 16.0, radius: 3.791776657104492)
+          ..circle(x: 17.0, y: 16.0, radius: 1.0)
+          ..circle(x: 208.5, y: 16.0, radius: 1.0)
+          ..circle(x: 400.0, y: 16.0, radius: 1.0)
+          ..circle(x: 591.5, y: 16.0, radius: 1.0)
+          ..circle(x: 783.0, y: 16.0, radius: 1.0)
+          ..circle(x: 105.0625, y: 16.0, radius: 6.0),
       );
 
       // Reparenting in the middle of an animation should do nothing.
@@ -1127,13 +1113,13 @@ void main() {
       expect(
         sliderBox,
         paints
-          ..circle(x: 190.0135726928711, y: 24.0, radius: 12.0)
-          ..circle(x: 25.0, y: 24.0, radius: 1.0)
-          ..circle(x: 212.5, y: 24.0, radius: 1.0)
-          ..circle(x: 400.0, y: 24.0, radius: 1.0)
-          ..circle(x: 587.5, y: 24.0, radius: 1.0)
-          ..circle(x: 775.0, y: 24.0, radius: 1.0)
-          ..circle(x: 190.0135726928711, y: 24.0, radius: 10.0),
+          ..circle(x: 185.5457763671875, y: 16.0, radius: 8.0)
+          ..circle(x: 17.0, y: 16.0, radius: 1.0)
+          ..circle(x: 208.5, y: 16.0, radius: 1.0)
+          ..circle(x: 400.0, y: 16.0, radius: 1.0)
+          ..circle(x: 591.5, y: 16.0, radius: 1.0)
+          ..circle(x: 783.0, y: 16.0, radius: 1.0)
+          ..circle(x: 185.5457763671875, y: 16.0, radius: 6.0),
       );
       // Wait for animations to finish.
       await tester.pumpAndSettle();
@@ -1141,13 +1127,13 @@ void main() {
       expect(
         sliderBox,
         paints
-          ..circle(x: 400.0, y: 24.0, radius: 24.0)
-          ..circle(x: 25.0, y: 24.0, radius: 1.0)
-          ..circle(x: 212.5, y: 24.0, radius: 1.0)
-          ..circle(x: 400.0, y: 24.0, radius: 1.0)
-          ..circle(x: 587.5, y: 24.0, radius: 1.0)
-          ..circle(x: 775.0, y: 24.0, radius: 1.0)
-          ..circle(x: 400.0, y: 24.0, radius: 10.0),
+          ..circle(x: 400.0, y: 16.0, radius: 16.0)
+          ..circle(x: 17.0, y: 16.0, radius: 1.0)
+          ..circle(x: 208.5, y: 16.0, radius: 1.0)
+          ..circle(x: 400.0, y: 16.0, radius: 1.0)
+          ..circle(x: 591.5, y: 16.0, radius: 1.0)
+          ..circle(x: 783.0, y: 16.0, radius: 1.0)
+          ..circle(x: 400.0, y: 16.0, radius: 6.0),
       );
       await gesture.up();
       await tester.pumpAndSettle();
@@ -1155,12 +1141,12 @@ void main() {
       expect(
         sliderBox,
         paints
-          ..circle(x: 25.0, y: 24.0, radius: 1.0)
-          ..circle(x: 212.5, y: 24.0, radius: 1.0)
-          ..circle(x: 400.0, y: 24.0, radius: 1.0)
-          ..circle(x: 587.5, y: 24.0, radius: 1.0)
-          ..circle(x: 775.0, y: 24.0, radius: 1.0)
-          ..circle(x: 400.0, y: 24.0, radius: 10.0),
+          ..circle(x: 17.0, y: 16.0, radius: 1.0)
+          ..circle(x: 208.5, y: 16.0, radius: 1.0)
+          ..circle(x: 400.0, y: 16.0, radius: 1.0)
+          ..circle(x: 591.5, y: 16.0, radius: 1.0)
+          ..circle(x: 783.0, y: 16.0, radius: 1.0)
+          ..circle(x: 400.0, y: 16.0, radius: 6.0),
       );
     }
 

packages/flutter/test/material/theme_data_test.dart

@@ -56,6 +56,16 @@ void main() {
     expect(darkTheme.accentTextTheme.title.color, typography.white.title.color);
   });
 
+  test('Default slider indicator style gets a default body2 if accentTextTheme.body2 is null', () {
+    const TextTheme noBody2TextTheme = TextTheme(body2: null);
+    final ThemeData lightTheme = ThemeData(brightness: Brightness.light, accentTextTheme: noBody2TextTheme);
+    final ThemeData darkTheme = ThemeData(brightness: Brightness.dark, accentTextTheme: noBody2TextTheme);
+    final Typography typography = Typography(platform: lightTheme.platform);
+
+    expect(lightTheme.sliderTheme.valueIndicatorTextStyle, equals(typography.white.body2));
+    expect(darkTheme.sliderTheme.valueIndicatorTextStyle, equals(typography.black.body2));
+  });
+
   test('Default chip label style gets a default body2 if textTheme.body2 is null', () {
     const TextTheme noBody2TextTheme = TextTheme(body2: null);
     final ThemeData lightTheme = ThemeData(brightness: Brightness.light, textTheme: noBody2TextTheme);