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

[Material] Update slider and slider theme with new sizes, shapes, and color mappings (2nd attempt) (#31564)

#30390 was rolled back. This PR will re-roll it forward.

This PR makes a number of changes to the visual appearance of material sliders:

Sizes/Shapes
** enabled thumb radius from 6 to 10
** disabled thumb radius from 4 to 10 with no gap
** default track shape is a rounded rect rather than a rect
**
Colors
** all of the colors now use the new color scheme
** overlay opacity has been reduce from 16% to 12%
** value indicator text color now respects the indicator it is on by using onPrimary
** disabledThumb color no respects the surface it is on by using onSurface
The slider theme is also now constructed consistently with other theme objects within the ThemeData. By default, all values are null, and have default values that are resolved in the slider itself, rather than in the slider theme.

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

@@ -428,27 +428,52 @@ 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.
-    if (widget.activeColor != null || widget.inactiveColor != null) {
-      sliderTheme = sliderTheme.copyWith(
-        activeTrackColor: widget.activeColor,
-        inactiveTrackColor: widget.inactiveColor,
-        activeTickMarkColor: widget.inactiveColor,
-        inactiveTickMarkColor: widget.activeColor,
-        thumbColor: widget.activeColor,
-        valueIndicatorColor: widget.activeColor,
-        overlayColor: widget.activeColor?.withAlpha(0x29),
-      );
-    }
+    // 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.
+    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,
+      ),
+    );
 
     return _SliderRenderObjectWidget(
       value: _unlerp(widget.value),
@@ -498,7 +523,6 @@ class _SliderRenderObjectWidget extends LeafRenderObjectWidget {
       divisions: divisions,
       label: label,
       sliderTheme: sliderTheme,
-      theme: Theme.of(context),
       mediaQueryData: mediaQueryData,
       onChanged: onChanged,
       onChangeStart: onChangeStart,
@@ -536,7 +560,6 @@ class _RenderSlider extends RenderBox {
     int divisions,
     String label,
     SliderThemeData sliderTheme,
-    ThemeData theme,
     MediaQueryData mediaQueryData,
     TargetPlatform platform,
     ValueChanged<double> onChanged,
@@ -554,7 +577,6 @@ class _RenderSlider extends RenderBox {
        _value = value,
        _divisions = divisions,
        _sliderTheme = sliderTheme,
-       _theme = theme,
        _mediaQueryData = mediaQueryData,
        _onChanged = onChanged,
        _state = state,
@@ -983,7 +1005,6 @@ class _RenderSlider extends RenderBox {
       isEnabled: isInteractive,
     );
 
-    // TODO(closkmith): Move this to paint after the thumb.
     if (!_overlayAnimation.isDismissed) {
       _sliderTheme.overlayShape.paint(
         context,
@@ -1000,7 +1021,6 @@ 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,12 +243,7 @@ class ThemeData extends Diagnosticable {
     highlightColor ??= isDark ? _kDarkThemeHighlightColor : _kLightThemeHighlightColor;
     splashColor ??= isDark ? _kDarkThemeSplashColor : _kLightThemeSplashColor;
 
-    sliderTheme ??= SliderThemeData.fromPrimaryColors(
-      primaryColor: primaryColor,
-      primaryColorLight: primaryColorLight,
-      primaryColorDark: primaryColorDark,
-      valueIndicatorTextStyle: accentTextTheme.body2,
-    );
+    sliderTheme ??= const SliderThemeData();
     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(16.0, 300.0),
-      const Offset(16.0, 300.0),
+      const Offset(24.0, 300.0),
+      const Offset(24.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.3, 0.1));
+    expect(log.last.dx, closeTo(386.6, 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(343.3, 0.1));
+    expect(log.last.dx, closeTo(344.5, 0.1));
     // Final position.
     await tester.pump(const Duration(milliseconds: 80));
-    expectedLog.add(const Offset(16.0, 300.0));
+    expectedLog.add(const Offset(24.0, 300.0));
     expect(value, equals(0.0));
     expect(log.length, 8);
-    expect(log.last.dx, closeTo(16.0, 0.1));
+    expect(log.last.dx, closeTo(24.0, 0.1));
     await gesture.up();
   });
 
@@ -409,8 +409,8 @@ void main() {
     );
 
     final List<Offset> expectedLog = <Offset>[
-      const Offset(16.0, 300.0),
-      const Offset(16.0, 300.0),
+      const Offset(24.0, 300.0),
+      const Offset(24.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.3, 0.1));
+    expect(log.last.dx, closeTo(386.6, 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(343.3, 0.1));
+    expect(log.last.dx, closeTo(344.5, 0.1));
     // Final position.
     await tester.pump(const Duration(milliseconds: 80));
-    expectedLog.add(const Offset(16.0, 300.0));
+    expectedLog.add(const Offset(24.0, 300.0));
     expect(value, equals(0.0));
     expect(log.length, 8);
-    expect(log.last.dx, closeTo(16.0, 0.1));
+    expect(log.last.dx, closeTo(24.0, 0.1));
     await gesture.up();
   });
 
@@ -546,6 +546,20 @@ 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;
@@ -724,7 +738,7 @@ void main() {
       paints
         ..rect(color: customColor1) // active track
         ..rect(color: customColor2) // inactive track
-        ..circle(color: customColor1.withAlpha(0x29)) // overlay
+        ..circle(color: customColor1.withOpacity(0.12)) // overlay
         ..circle(color: customColor2) // 1st tick mark
         ..circle(color: customColor2) // 2nd tick mark
         ..circle(color: customColor2) // 3rd tick mark
@@ -858,7 +872,7 @@ void main() {
         ),
       ),
     ));
-    expect(tester.renderObject<RenderBox>(find.byType(Slider)).size, const Size(144.0 + 2.0 * 16.0, 600.0));
+    expect(tester.renderObject<RenderBox>(find.byType(Slider)).size, const Size(144.0 + 2.0 * 24.0, 600.0));
 
     await tester.pumpWidget(Directionality(
       textDirection: TextDirection.ltr,
@@ -878,7 +892,7 @@ void main() {
         ),
       ),
     ));
-    expect(tester.renderObject<RenderBox>(find.byType(Slider)).size, const Size(144.0 + 2.0 * 16.0, 32.0));
+    expect(tester.renderObject<RenderBox>(find.byType(Slider)).size, const Size(144.0 + 2.0 * 24.0, 48.0));
   });
 
   testWidgets('Slider respects textScaleFactor', (WidgetTester tester) async {
@@ -1077,12 +1091,12 @@ void main() {
       expect(
         sliderBox,
         paints
-          ..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),
+          ..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),
       );
 
       gesture = await tester.startGesture(center);
@@ -1093,13 +1107,13 @@ void main() {
       expect(
         sliderBox,
         paints
-          ..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),
+          ..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),
       );
 
       // Reparenting in the middle of an animation should do nothing.
@@ -1113,13 +1127,13 @@ void main() {
       expect(
         sliderBox,
         paints
-          ..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),
+          ..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),
       );
       // Wait for animations to finish.
       await tester.pumpAndSettle();
@@ -1127,13 +1141,13 @@ void main() {
       expect(
         sliderBox,
         paints
-          ..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),
+          ..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),
       );
       await gesture.up();
       await tester.pumpAndSettle();
@@ -1141,12 +1155,12 @@ void main() {
       expect(
         sliderBox,
         paints
-          ..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),
+          ..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),
       );
     }
 

packages/flutter/test/material/theme_data_test.dart

@@ -56,16 +56,6 @@ 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);