[Material] Update the Slider and RangeSlider to the latest Material spec (#44351)

Update the Slider and RangeSlider to the latest Material spec. This introduces an updated track, updated thumbs, updated tick marks, and a new value indicator shape. The old paddle value indicator shape is also updated so that text scaling works consistently.
2019-11-20 18:18:40 +01:00
parent 73c32545b7
commit 421bf64703
10 changed files with 1191 additions and 282 deletions
--- a/examples/flutter_gallery/lib/demo/material/slider_demo.dart
+++ b/examples/flutter_gallery/lib/demo/material/slider_demo.dart
@@ -69,6 +69,7 @@ class _CustomRangeThumbShape extends RangeSliderThumbShape {
    @required SliderThemeData sliderTheme,
    TextDirection textDirection,
    Thumb thumb,
+    bool isPressed,
  }) {
    final Canvas canvas = context.canvas;
    final ColorTween colorTween = ColorTween(
@@ -130,6 +131,8 @@ class _CustomThumbShape extends SliderComponentShape {
    SliderThemeData sliderTheme,
    TextDirection textDirection,
    double value,
+    double textScaleFactor,
+    Size sizeWithOverflow,
  }) {
    final Canvas canvas = context.canvas;
    final ColorTween colorTween = ColorTween(
@@ -169,6 +172,8 @@ class _CustomValueIndicatorShape extends SliderComponentShape {
    SliderThemeData sliderTheme,
    TextDirection textDirection,
    double value,
+    double textScaleFactor,
+    Size sizeWithOverflow,
  }) {
    final Canvas canvas = context.canvas;
    final ColorTween enableColor = ColorTween(
@@ -438,4 +443,3 @@ class _RangeSlidersState extends State<_RangeSliders> {
    );
  }
 }
-
--- a/examples/flutter_gallery/lib/gallery/themes.dart
+++ b/examples/flutter_gallery/lib/gallery/themes.dart
@@ -25,6 +25,7 @@ ThemeData _buildDarkTheme() {
  final ThemeData base = ThemeData(
    brightness: Brightness.dark,
    accentColorBrightness: Brightness.dark,
+    colorScheme: colorScheme,
    primaryColor: primaryColor,
    primaryColorDark: const Color(0xFF0050a0),
    primaryColorLight: secondaryColor,
--- a/examples/flutter_gallery/pubspec.yaml
+++ b/examples/flutter_gallery/pubspec.yaml
@@ -257,31 +257,31 @@ flutter:
          weight: 400
    - family: LibreFranklin
      fonts:
-      - asset: packages/flutter_gallery_assets/fonts/librefranklin/LibreFranklin-Bold.ttf
-      - asset: packages/flutter_gallery_assets/fonts/librefranklin/LibreFranklin-Light.ttf
-      - asset: packages/flutter_gallery_assets/fonts/librefranklin/LibreFranklin-Medium.ttf
-      - asset: packages/flutter_gallery_assets/fonts/librefranklin/LibreFranklin-Regular.ttf
+        - asset: packages/flutter_gallery_assets/fonts/librefranklin/LibreFranklin-Bold.ttf
+        - asset: packages/flutter_gallery_assets/fonts/librefranklin/LibreFranklin-Light.ttf
+        - asset: packages/flutter_gallery_assets/fonts/librefranklin/LibreFranklin-Medium.ttf
+        - asset: packages/flutter_gallery_assets/fonts/librefranklin/LibreFranklin-Regular.ttf
    - family: Merriweather
      fonts:
-      - asset: packages/flutter_gallery_assets/fonts/merriweather/Merriweather-BlackItalic.ttf
-      - asset: packages/flutter_gallery_assets/fonts/merriweather/Merriweather-Italic.ttf
-      - asset: packages/flutter_gallery_assets/fonts/merriweather/Merriweather-Regular.ttf
-      - asset: packages/flutter_gallery_assets/fonts/merriweather/Merriweather-Light.ttf
+        - asset: packages/flutter_gallery_assets/fonts/merriweather/Merriweather-BlackItalic.ttf
+        - asset: packages/flutter_gallery_assets/fonts/merriweather/Merriweather-Italic.ttf
+        - asset: packages/flutter_gallery_assets/fonts/merriweather/Merriweather-Regular.ttf
+        - asset: packages/flutter_gallery_assets/fonts/merriweather/Merriweather-Light.ttf
    - family: Roboto Condensed
      fonts:
-      - asset: packages/rally_assets/RobotoCondensed-Light.ttf
-        weight: 400
-      - asset: packages/rally_assets/RobotoCondensed-Regular.ttf
-        weight: 500
-      - asset: packages/rally_assets/RobotoCondensed-Bold.ttf
-        weight: 700
+        - asset: packages/rally_assets/RobotoCondensed-Light.ttf
+          weight: 400
+        - asset: packages/rally_assets/RobotoCondensed-Regular.ttf
+          weight: 500
+        - asset: packages/rally_assets/RobotoCondensed-Bold.ttf
+          weight: 700
    - family: Eczar
      fonts:
-      - asset: packages/rally_assets/Eczar-Regular.ttf
-        weight: 400
-      - asset: packages/rally_assets/Eczar-SemiBold.ttf
-        weight: 600
-      - asset: packages/rally_assets/Eczar-Bold.ttf
-        weight: 700
+        - asset: packages/rally_assets/Eczar-Regular.ttf
+          weight: 400
+        - asset: packages/rally_assets/Eczar-SemiBold.ttf
+          weight: 600
+        - asset: packages/rally_assets/Eczar-Bold.ttf
+          weight: 700

-# PUBSPEC CHECKSUM: de7e
+# PUBSPEC CHECKSUM: de7e
--- a/packages/flutter/lib/src/material/range_slider.dart
+++ b/packages/flutter/lib/src/material/range_slider.dart
@@ -519,12 +519,12 @@ class _RangeSliderState extends State<RangeSlider> with TickerProviderStateMixin
    return null;
  };

-  static const double _defaultTrackHeight = 2;
+  static const double _defaultTrackHeight = 4;
  static const RangeSliderTrackShape _defaultTrackShape = RoundedRectRangeSliderTrackShape();
  static const RangeSliderTickMarkShape _defaultTickMarkShape = RoundRangeSliderTickMarkShape();
  static const SliderComponentShape _defaultOverlayShape = RoundSliderOverlayShape();
  static const RangeSliderThumbShape _defaultThumbShape = RoundRangeSliderThumbShape();
-  static const RangeSliderValueIndicatorShape _defaultValueIndicatorShape = PaddleRangeSliderValueIndicatorShape();
+  static const RangeSliderValueIndicatorShape _defaultValueIndicatorShape = RectangularRangeSliderValueIndicatorShape();
  static const ShowValueIndicator _defaultShowValueIndicator = ShowValueIndicator.onlyForDiscrete;
  static const double _defaultMinThumbSeparation = 8;

@@ -542,6 +542,19 @@ class _RangeSliderState extends State<RangeSlider> with TickerProviderStateMixin
    // colors come from the ThemeData.colorScheme. These colors, along with
    // the default shapes and text styles are aligned to the Material
    // Guidelines.
+
+    // The value indicator color is not the same as the thumb and active track
+    // (which can be defined by activeColor) if the
+    // RectangularSliderValueIndicatorShape is used. In all other cases, the
+    // value indicator is assumed to be the same as the active color.
+    final RangeSliderValueIndicatorShape valueIndicatorShape = sliderTheme.rangeValueIndicatorShape ?? _defaultValueIndicatorShape;
+    Color valueIndicatorColor;
+    if (valueIndicatorShape is RectangularRangeSliderValueIndicatorShape) {
+      valueIndicatorColor = sliderTheme.valueIndicatorColor ?? Color.alphaBlend(theme.colorScheme.onSurface.withOpacity(0.60), theme.colorScheme.surface.withOpacity(0.90));
+    } else {
+      valueIndicatorColor = widget.activeColor ?? sliderTheme.valueIndicatorColor ?? theme.colorScheme.primary;
+    }
+
    sliderTheme = sliderTheme.copyWith(
      trackHeight: sliderTheme.trackHeight ?? _defaultTrackHeight,
      activeTrackColor: widget.activeColor ?? sliderTheme.activeTrackColor ?? theme.colorScheme.primary,
@@ -556,12 +569,13 @@ class _RangeSliderState extends State<RangeSlider> with TickerProviderStateMixin
      overlappingShapeStrokeColor: sliderTheme.overlappingShapeStrokeColor ?? theme.colorScheme.surface,
      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,
+      valueIndicatorColor: valueIndicatorColor,
+      surfaceColor: sliderTheme.surfaceColor ?? theme.colorScheme.surface,
      rangeTrackShape: sliderTheme.rangeTrackShape ?? _defaultTrackShape,
      rangeTickMarkShape: sliderTheme.rangeTickMarkShape ?? _defaultTickMarkShape,
      rangeThumbShape: sliderTheme.rangeThumbShape ?? _defaultThumbShape,
      overlayShape: sliderTheme.overlayShape ?? _defaultOverlayShape,
-      rangeValueIndicatorShape: sliderTheme.rangeValueIndicatorShape ?? _defaultValueIndicatorShape,
+      rangeValueIndicatorShape: valueIndicatorShape,
      showValueIndicator: sliderTheme.showValueIndicator ?? _defaultShowValueIndicator,
      valueIndicatorTextStyle: sliderTheme.valueIndicatorTextStyle ?? theme.textTheme.body2.copyWith(
        color: theme.colorScheme.onPrimary,
@@ -570,12 +584,18 @@ class _RangeSliderState extends State<RangeSlider> with TickerProviderStateMixin
      thumbSelector: sliderTheme.thumbSelector ?? _defaultRangeThumbSelector,
    );

+    // This size is used as the max bounds for the painting of the value
+    // indicators It must be kept in sync with the function with the same name
+    // in slider.dart.
+    Size _sizeWithOverflow() => MediaQuery.of(context).size;
+
    return _RangeSliderRenderObjectWidget(
      values: _unlerpRangeValues(widget.values),
      divisions: widget.divisions,
      labels: widget.labels,
      sliderTheme: sliderTheme,
      textScaleFactor: MediaQuery.of(context).textScaleFactor,
+      sizeWithOverflow: _sizeWithOverflow(),
      onChanged: (widget.onChanged != null) && (widget.max > widget.min) ? _handleChanged : null,
      onChangeStart: widget.onChangeStart != null ? _handleDragStart : null,
      onChangeEnd: widget.onChangeEnd != null ? _handleDragEnd : null,
@@ -593,6 +613,7 @@ class _RangeSliderRenderObjectWidget extends LeafRenderObjectWidget {
    this.labels,
    this.sliderTheme,
    this.textScaleFactor,
+    this.sizeWithOverflow,
    this.onChanged,
    this.onChangeStart,
    this.onChangeEnd,
@@ -605,6 +626,7 @@ class _RangeSliderRenderObjectWidget extends LeafRenderObjectWidget {
  final RangeLabels labels;
  final SliderThemeData sliderTheme;
  final double textScaleFactor;
+  final Size sizeWithOverflow;
  final ValueChanged<RangeValues> onChanged;
  final ValueChanged<RangeValues> onChangeStart;
  final ValueChanged<RangeValues> onChangeEnd;
@@ -620,6 +642,7 @@ class _RangeSliderRenderObjectWidget extends LeafRenderObjectWidget {
      sliderTheme: sliderTheme,
      theme: Theme.of(context),
      textScaleFactor: textScaleFactor,
+      sizeWithOverflow: sizeWithOverflow,
      onChanged: onChanged,
      onChangeStart: onChangeStart,
      onChangeEnd: onChangeEnd,
@@ -639,6 +662,7 @@ class _RangeSliderRenderObjectWidget extends LeafRenderObjectWidget {
      ..sliderTheme = sliderTheme
      ..theme = Theme.of(context)
      ..textScaleFactor = textScaleFactor
+      ..sizeWithOverflow = sizeWithOverflow
      ..onChanged = onChanged
      ..onChangeStart = onChangeStart
      ..onChangeEnd = onChangeEnd
@@ -656,6 +680,7 @@ class _RenderRangeSlider extends RenderBox with RelayoutWhenSystemFontsChangeMix
    SliderThemeData sliderTheme,
    ThemeData theme,
    double textScaleFactor,
+    Size sizeWithOverflow,
    TargetPlatform platform,
    ValueChanged<RangeValues> onChanged,
    RangeSemanticFormatterCallback semanticFormatterCallback,
@@ -676,6 +701,7 @@ class _RenderRangeSlider extends RenderBox with RelayoutWhenSystemFontsChangeMix
        _sliderTheme = sliderTheme,
        _theme = theme,
        _textScaleFactor = textScaleFactor,
+        _sizeWithOverflow = sizeWithOverflow,
        _onChanged = onChanged,
        _state = state,
        _textDirection = textDirection {
@@ -848,6 +874,15 @@ class _RenderRangeSlider extends RenderBox with RelayoutWhenSystemFontsChangeMix
    _updateLabelPainters();
  }

+  Size get sizeWithOverflow => _sizeWithOverflow;
+  Size _sizeWithOverflow;
+  set sizeWithOverflow(Size value) {
+    if (value == sizeWithOverflow)
+      return;
+    _sizeWithOverflow = value;
+    markNeedsPaint();
+  }
+
  ValueChanged<RangeValues> get onChanged => _onChanged;
  ValueChanged<RangeValues> _onChanged;
  set onChanged(ValueChanged<RangeValues> value) {
@@ -1195,8 +1230,11 @@ class _RenderRangeSlider extends RenderBox with RelayoutWhenSystemFontsChangeMix
        isEnabled: isEnabled,
    );

+    final bool startThumbSelected = _lastThumbSelection == Thumb.start;
+    final bool endThumbSelected = _lastThumbSelection == Thumb.end;
+
    if (!_overlayAnimation.isDismissed) {
-      if (_lastThumbSelection == Thumb.start) {
+      if (startThumbSelected) {
        _sliderTheme.overlayShape.paint(
          context,
          startThumbCenter,
@@ -1210,7 +1248,7 @@ class _RenderRangeSlider extends RenderBox with RelayoutWhenSystemFontsChangeMix
          value: startValue,
        );
      }
-      if (_lastThumbSelection == Thumb.end) {
+      if (endThumbSelected) {
        _sliderTheme.overlayShape.paint(
          context,
          endThumbCenter,
@@ -1231,7 +1269,7 @@ class _RenderRangeSlider extends RenderBox with RelayoutWhenSystemFontsChangeMix
        isEnabled: isEnabled,
        sliderTheme: _sliderTheme,
      ).width;
-      final double adjustedTrackWidth = trackRect.width - tickMarkWidth;
+      final double adjustedTrackWidth = trackRect.width - trackRect.height;
      // If the tick marks would be too dense, don't bother painting them.
      if (adjustedTrackWidth / divisions >= 3.0 * tickMarkWidth) {
        final double dy = trackRect.center.dy;
@@ -1239,7 +1277,7 @@ class _RenderRangeSlider extends RenderBox with RelayoutWhenSystemFontsChangeMix
          final double value = i / divisions;
          // The ticks are mapped to be within the track, so the tick mark width
          // must be subtracted from the track width.
-          final double dx = trackRect.left + value * adjustedTrackWidth + tickMarkWidth / 2;
+          final double dx = trackRect.left + value * adjustedTrackWidth + trackRect.height / 2;
          final Offset tickMarkOffset = Offset(dx, dy);
          _sliderTheme.rangeTickMarkShape.paint(
            context,
@@ -1268,6 +1306,7 @@ class _RenderRangeSlider extends RenderBox with RelayoutWhenSystemFontsChangeMix
    final double bottomValue = isLastThumbStart ? endValue : startValue;
    final double topValue = isLastThumbStart ? startValue : endValue;
    final bool shouldPaintValueIndicators = isEnabled && labels != null && !_valueIndicatorAnimation.isDismissed && showValueIndicator;
+    final Size resolvedSizeWithOverflow = sizeWithOverflow.isEmpty ? size : sizeWithOverflow;

    if (shouldPaintValueIndicators) {
      _sliderTheme.rangeValueIndicatorShape.paint(
@@ -1283,6 +1322,8 @@ class _RenderRangeSlider extends RenderBox with RelayoutWhenSystemFontsChangeMix
        textDirection: _textDirection,
        thumb: bottomThumb,
        value: bottomValue,
+        textScaleFactor: textScaleFactor,
+        sizeWithOverflow: resolvedSizeWithOverflow,
      );
    }

@@ -1296,6 +1337,7 @@ class _RenderRangeSlider extends RenderBox with RelayoutWhenSystemFontsChangeMix
      textDirection: textDirection,
      sliderTheme: _sliderTheme,
      thumb: bottomThumb,
+      isPressed: bottomThumb == Thumb.start ? startThumbSelected : endThumbSelected,
    );

    if (shouldPaintValueIndicators) {
@@ -1304,15 +1346,29 @@ class _RenderRangeSlider extends RenderBox with RelayoutWhenSystemFontsChangeMix
        center: startThumbCenter,
        labelPainter: _startLabelPainter,
        activationAnimation: _valueIndicatorAnimation,
+        textScaleFactor: textScaleFactor,
+        sizeWithOverflow: resolvedSizeWithOverflow,
      );
      final double endOffset = sliderTheme.rangeValueIndicatorShape.getHorizontalShift(
        parentBox: this,
        center: endThumbCenter,
        labelPainter: _endLabelPainter,
        activationAnimation: _valueIndicatorAnimation,
+        textScaleFactor: textScaleFactor,
+        sizeWithOverflow: resolvedSizeWithOverflow,
      );
-      final double startHalfWidth = sliderTheme.rangeValueIndicatorShape.getPreferredSize(isEnabled, isDiscrete, labelPainter: _startLabelPainter).width / 2;
-      final double endHalfWidth = sliderTheme.rangeValueIndicatorShape.getPreferredSize(isEnabled, isDiscrete, labelPainter: _endLabelPainter).width / 2;
+      final double startHalfWidth = sliderTheme.rangeValueIndicatorShape.getPreferredSize(
+        isEnabled,
+        isDiscrete,
+        labelPainter: _startLabelPainter,
+        textScaleFactor: textScaleFactor,
+      ).width / 2;
+      final double endHalfWidth = sliderTheme.rangeValueIndicatorShape.getPreferredSize(
+        isEnabled,
+        isDiscrete,
+        labelPainter: _endLabelPainter,
+        textScaleFactor: textScaleFactor,
+      ).width / 2;
      double innerOverflow = startHalfWidth + endHalfWidth;
      switch (textDirection) {
        case TextDirection.ltr:
@@ -1338,19 +1394,22 @@ class _RenderRangeSlider extends RenderBox with RelayoutWhenSystemFontsChangeMix
        textDirection: _textDirection,
        thumb: topThumb,
        value: topValue,
+        textScaleFactor: textScaleFactor,
+        sizeWithOverflow: resolvedSizeWithOverflow,
      );
    }

    _sliderTheme.rangeThumbShape.paint(
      context,
      topThumbCenter,
-      activationAnimation: _valueIndicatorAnimation,
+      activationAnimation: _overlayAnimation,
      enableAnimation: _enableAnimation,
      isDiscrete: isDiscrete,
      isOnTop: thumbDelta < sliderTheme.rangeThumbShape.getPreferredSize(isEnabled, isDiscrete).width,
      textDirection: textDirection,
      sliderTheme: _sliderTheme,
      thumb: topThumb,
+      isPressed: topThumb == Thumb.start ? startThumbSelected : endThumbSelected,
    );
  }

--- a/packages/flutter/lib/src/material/slider.dart
+++ b/packages/flutter/lib/src/material/slider.dart
@@ -477,12 +477,12 @@ 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 double _defaultTrackHeight = 4;
  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 SliderComponentShape _defaultValueIndicatorShape = RectangularSliderValueIndicatorShape();
  static const ShowValueIndicator _defaultShowValueIndicator = ShowValueIndicator.onlyForDiscrete;

  @override
@@ -520,6 +520,19 @@ class _SliderState extends State<Slider> with TickerProviderStateMixin {
    // colors come from the ThemeData.colorScheme. These colors, along with
    // the default shapes and text styles are aligned to the Material
    // Guidelines.
+
+    // The value indicator color is not the same as the thumb and active track
+    // (which can be defined by activeColor) if the
+    // RectangularSliderValueIndicatorShape is used. In all other cases, the
+    // value indicator is assumed to be the same as the active color.
+    final SliderComponentShape valueIndicatorShape = sliderTheme.valueIndicatorShape ?? _defaultValueIndicatorShape;
+    Color valueIndicatorColor;
+    if (valueIndicatorShape is RectangularSliderValueIndicatorShape) {
+      valueIndicatorColor = sliderTheme.valueIndicatorColor ?? Color.alphaBlend(theme.colorScheme.onSurface.withOpacity(0.60), theme.colorScheme.surface.withOpacity(0.90));
+    } else {
+      valueIndicatorColor = widget.activeColor ?? sliderTheme.valueIndicatorColor ?? theme.colorScheme.primary;
+    }
+
    sliderTheme = sliderTheme.copyWith(
      trackHeight: sliderTheme.trackHeight ?? _defaultTrackHeight,
      activeTrackColor: widget.activeColor ?? sliderTheme.activeTrackColor ?? theme.colorScheme.primary,
@@ -533,24 +546,31 @@ class _SliderState extends State<Slider> with TickerProviderStateMixin {
      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,
+      valueIndicatorColor: valueIndicatorColor,
+      surfaceColor: sliderTheme.surfaceColor ?? theme.colorScheme.surface,
      trackShape: sliderTheme.trackShape ?? _defaultTrackShape,
      tickMarkShape: sliderTheme.tickMarkShape ?? _defaultTickMarkShape,
      thumbShape: sliderTheme.thumbShape ?? _defaultThumbShape,
      overlayShape: sliderTheme.overlayShape ?? _defaultOverlayShape,
-      valueIndicatorShape: sliderTheme.valueIndicatorShape ?? _defaultValueIndicatorShape,
+      valueIndicatorShape: valueIndicatorShape,
      showValueIndicator: sliderTheme.showValueIndicator ?? _defaultShowValueIndicator,
      valueIndicatorTextStyle: sliderTheme.valueIndicatorTextStyle ?? theme.textTheme.body2.copyWith(
        color: theme.colorScheme.onPrimary,
      ),
    );

+    // This size is used as the max bounds for the painting of the value
+    // indicators It must be kept in sync with the function with the same name
+    // in range_slider.dart.
+    Size _sizeWithOverflow() => MediaQuery.of(context).size;
+
    return _SliderRenderObjectWidget(
      value: _unlerp(widget.value),
      divisions: widget.divisions,
      label: widget.label,
      sliderTheme: sliderTheme,
-      mediaQueryData: MediaQuery.of(context),
+      textScaleFactor: MediaQuery.of(context).textScaleFactor,
+      sizeWithOverflow: _sizeWithOverflow(),
      onChanged: (widget.onChanged != null) && (widget.max > widget.min) ? _handleChanged : null,
      onChangeStart: widget.onChangeStart != null ? _handleDragStart : null,
      onChangeEnd: widget.onChangeEnd != null ? _handleDragEnd : null,
@@ -586,7 +606,8 @@ class _SliderRenderObjectWidget extends LeafRenderObjectWidget {
    this.divisions,
    this.label,
    this.sliderTheme,
-    this.mediaQueryData,
+    this.textScaleFactor,
+    this.sizeWithOverflow,
    this.onChanged,
    this.onChangeStart,
    this.onChangeEnd,
@@ -598,7 +619,8 @@ class _SliderRenderObjectWidget extends LeafRenderObjectWidget {
  final int divisions;
  final String label;
  final SliderThemeData sliderTheme;
-  final MediaQueryData mediaQueryData;
+  final double textScaleFactor;
+  final Size sizeWithOverflow;
  final ValueChanged<double> onChanged;
  final ValueChanged<double> onChangeStart;
  final ValueChanged<double> onChangeEnd;
@@ -612,7 +634,8 @@ class _SliderRenderObjectWidget extends LeafRenderObjectWidget {
      divisions: divisions,
      label: label,
      sliderTheme: sliderTheme,
-      mediaQueryData: mediaQueryData,
+      textScaleFactor: textScaleFactor,
+      sizeWithOverflow: sizeWithOverflow,
      onChanged: onChanged,
      onChangeStart: onChangeStart,
      onChangeEnd: onChangeEnd,
@@ -631,7 +654,8 @@ class _SliderRenderObjectWidget extends LeafRenderObjectWidget {
      ..label = label
      ..sliderTheme = sliderTheme
      ..theme = Theme.of(context)
-      ..mediaQueryData = mediaQueryData
+      ..textScaleFactor = textScaleFactor
+      ..sizeWithOverflow = sizeWithOverflow
      ..onChanged = onChanged
      ..onChangeStart = onChangeStart
      ..onChangeEnd = onChangeEnd
@@ -649,7 +673,8 @@ class _RenderSlider extends RenderBox with RelayoutWhenSystemFontsChangeMixin {
    int divisions,
    String label,
    SliderThemeData sliderTheme,
-    MediaQueryData mediaQueryData,
+    double textScaleFactor,
+    Size sizeWithOverflow,
    TargetPlatform platform,
    ValueChanged<double> onChanged,
    SemanticFormatterCallback semanticFormatterCallback,
@@ -666,7 +691,8 @@ class _RenderSlider extends RenderBox with RelayoutWhenSystemFontsChangeMixin {
       _value = value,
       _divisions = divisions,
       _sliderTheme = sliderTheme,
-       _mediaQueryData = mediaQueryData,
+       _textScaleFactor = textScaleFactor,
+       _sizeWithOverflow = sizeWithOverflow,
       _onChanged = onChanged,
       _state = state,
       _textDirection = textDirection {
@@ -821,18 +847,28 @@ class _RenderSlider extends RenderBox with RelayoutWhenSystemFontsChangeMixin {
    markNeedsPaint();
  }

-  MediaQueryData get mediaQueryData => _mediaQueryData;
-  MediaQueryData _mediaQueryData;
-  set mediaQueryData(MediaQueryData value) {
-    if (value == _mediaQueryData) {
+  double get textScaleFactor => _textScaleFactor;
+  double _textScaleFactor;
+  set textScaleFactor(double value) {
+    if (value == _textScaleFactor) {
      return;
    }
-    _mediaQueryData = value;
+    _textScaleFactor = value;
    // Media query data includes the textScaleFactor, so we need to update the
    // label painter.
    _updateLabelPainter();
  }

+  Size get sizeWithOverflow => _sizeWithOverflow;
+  Size _sizeWithOverflow;
+  set sizeWithOverflow(Size value) {
+    if (value == _sizeWithOverflow) {
+      return;
+    }
+    _sizeWithOverflow = value;
+    markNeedsPaint();
+  }
+
  ValueChanged<double> get onChanged => _onChanged;
  ValueChanged<double> _onChanged;
  set onChanged(ValueChanged<double> value) {
@@ -906,7 +942,7 @@ class _RenderSlider extends RenderBox with RelayoutWhenSystemFontsChangeMixin {
          text: label,
        )
        ..textDirection = textDirection
-        ..textScaleFactor = _mediaQueryData.textScaleFactor
+        ..textScaleFactor = textScaleFactor
        ..layout();
    } else {
      _labelPainter.text = null;
@@ -1087,7 +1123,8 @@ class _RenderSlider extends RenderBox with RelayoutWhenSystemFontsChangeMixin {
      sliderTheme: _sliderTheme,
      isDiscrete: isDiscrete,
    );
-    final Offset thumbCenter = Offset(trackRect.left + visualPosition * trackRect.width, trackRect.center.dy);
+    final Offset thumbCenter = Offset(
+        trackRect.left + visualPosition * trackRect.width, trackRect.center.dy);

    _sliderTheme.trackShape.paint(
      context,
@@ -1121,7 +1158,7 @@ class _RenderSlider extends RenderBox with RelayoutWhenSystemFontsChangeMixin {
        isEnabled: isInteractive,
        sliderTheme: _sliderTheme,
      ).width;
-      final double adjustedTrackWidth = trackRect.width - tickMarkWidth;
+      final double adjustedTrackWidth = trackRect.width - trackRect.height;
      // If the tick marks would be too dense, don't bother painting them.
      if (adjustedTrackWidth / divisions >= 3.0 * tickMarkWidth) {
        final double dy = trackRect.center.dy;
@@ -1129,7 +1166,7 @@ class _RenderSlider extends RenderBox with RelayoutWhenSystemFontsChangeMixin {
          final double value = i / divisions;
          // The ticks are mapped to be within the track, so the tick mark width
          // must be subtracted from the track width.
-          final double dx = trackRect.left + value * adjustedTrackWidth + tickMarkWidth / 2;
+          final double dx = trackRect.left + value * adjustedTrackWidth + trackRect.height / 2;
          final Offset tickMarkOffset = Offset(dx, dy);
          _sliderTheme.tickMarkShape.paint(
            context,
@@ -1158,6 +1195,8 @@ class _RenderSlider extends RenderBox with RelayoutWhenSystemFontsChangeMixin {
          sliderTheme: _sliderTheme,
          textDirection: _textDirection,
          value: _value,
+          textScaleFactor: textScaleFactor,
+          sizeWithOverflow: sizeWithOverflow.isEmpty ? size : sizeWithOverflow,
        );
      }
    }
@@ -1165,13 +1204,14 @@ class _RenderSlider extends RenderBox with RelayoutWhenSystemFontsChangeMixin {
    _sliderTheme.thumbShape.paint(
      context,
      thumbCenter,
-      activationAnimation: _valueIndicatorAnimation,
+      activationAnimation: _overlayAnimation,
      enableAnimation: _enableAnimation,
      isDiscrete: isDiscrete,
      labelPainter: _labelPainter,
      parentBox: this,
      sliderTheme: _sliderTheme,
      textDirection: _textDirection,
+      sizeWithOverflow: sizeWithOverflow.isEmpty ? size : sizeWithOverflow,
      value: _value,
    );
  }
--- a/packages/flutter/lib/src/material/slider_theme.dart
+++ b/packages/flutter/lib/src/material/slider_theme.dart
--- a/packages/flutter/test/material/inherited_theme_test.dart
+++ b/packages/flutter/test/material/inherited_theme_test.dart
@@ -525,7 +525,7 @@ void main() {
    await tester.tap(find.text('push wrapped'));
    await tester.pumpAndSettle(); // route animation
    RenderBox sliderBox = tester.firstRenderObject<RenderBox>(find.byType(Slider));
-    expect(sliderBox, paints..rect(color: activeTrackColor)..rect(color: inactiveTrackColor));
+    expect(sliderBox, paints..rrect(color: activeTrackColor)..rrect(color: inactiveTrackColor));
    expect(sliderBox, paints..circle(color: thumbColor));

    Navigator.of(navigatorContext).pop();
@@ -534,7 +534,7 @@ void main() {
    await tester.tap(find.text('push unwrapped'));
    await tester.pumpAndSettle(); // route animation
    sliderBox = tester.firstRenderObject<RenderBox>(find.byType(Slider));
-    expect(sliderBox, isNot(paints..rect(color: activeTrackColor)..rect(color: inactiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: activeTrackColor)..rrect(color: inactiveTrackColor)));
    expect(sliderBox, isNot(paints..circle(color: thumbColor)));
  });

--- a/packages/flutter/test/material/range_slider_test.dart
+++ b/packages/flutter/test/material/range_slider_test.dart
@@ -1033,15 +1033,17 @@ void main() {

    // Check default theme for enabled widget.
    expect(sliderBox, paints
-      ..rect(color: sliderTheme.inactiveTrackColor)
+      ..rrect(color: sliderTheme.inactiveTrackColor)
      ..rect(color: sliderTheme.activeTrackColor)
-      ..rect(color: sliderTheme.inactiveTrackColor));
+      ..rrect(color: sliderTheme.inactiveTrackColor));
    expect(sliderBox, paints
      ..circle(color: sliderTheme.thumbColor)
      ..circle(color: sliderTheme.thumbColor));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.disabledThumbColor)));
    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledActiveTrackColor)));
    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledInactiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledActiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledInactiveTrackColor)));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.activeTickMarkColor)));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.inactiveTickMarkColor)));
  });
@@ -1058,18 +1060,22 @@ void main() {
    expect(
        sliderBox,
        paints
-          ..rect(color: sliderTheme.inactiveTrackColor)
+          ..rrect(color: sliderTheme.inactiveTrackColor)
          ..rect(color: activeColor)
-          ..rect(color: sliderTheme.inactiveTrackColor));
+          ..rrect(color: sliderTheme.inactiveTrackColor));
    expect(
        sliderBox,
        paints
+          ..circle(color: Colors.white)
          ..circle(color: activeColor)
+          ..circle(color: Colors.white)
          ..circle(color: activeColor));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.thumbColor)));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.disabledThumbColor)));
    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledActiveTrackColor)));
    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledInactiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledActiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledInactiveTrackColor)));
  });

  testWidgets('Range Slider uses the right theme colors for the right shapes when setting the inactive color', (WidgetTester tester) async {
@@ -1084,9 +1090,9 @@ void main() {
    expect(
        sliderBox,
        paints
-          ..rect(color: inactiveColor)
+          ..rrect(color: inactiveColor)
          ..rect(color: sliderTheme.activeTrackColor)
-          ..rect(color: inactiveColor));
+          ..rrect(color: inactiveColor));
    expect(
        sliderBox,
        paints
@@ -1095,6 +1101,8 @@ void main() {
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.disabledThumbColor)));
    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledActiveTrackColor)));
    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledInactiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledActiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledInactiveTrackColor)));
  });

  testWidgets('Range Slider uses the right theme colors for the right shapes with active and inactive colors', (WidgetTester tester) async {
@@ -1114,18 +1122,20 @@ void main() {
    expect(
        sliderBox,
        paints
-          ..rect(color: inactiveColor)
+          ..rrect(color: inactiveColor)
          ..rect(color: activeColor)
-          ..rect(color: inactiveColor));
+          ..rrect(color: inactiveColor));
    expect(
        sliderBox,
        paints
+          ..circle(color: Colors.white)
          ..circle(color: activeColor)
+          ..circle(color: Colors.white)
          ..circle(color: activeColor));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.thumbColor)));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.disabledThumbColor)));
-    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledActiveTrackColor)));
-    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledInactiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledActiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledInactiveTrackColor)));
  });

  testWidgets('Range Slider uses the right theme colors for the right shapes for a discrete slider', (WidgetTester tester) async {
@@ -1139,9 +1149,9 @@ void main() {
    expect(
        sliderBox,
        paints
-          ..rect(color: sliderTheme.inactiveTrackColor)
+          ..rrect(color: sliderTheme.inactiveTrackColor)
          ..rect(color: sliderTheme.activeTrackColor)
-          ..rect(color: sliderTheme.inactiveTrackColor));
+          ..rrect(color: sliderTheme.inactiveTrackColor));
    expect(
        sliderBox,
        paints
@@ -1154,6 +1164,8 @@ void main() {
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.disabledThumbColor)));
    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledActiveTrackColor)));
    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledInactiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledActiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledInactiveTrackColor)));
  });

  testWidgets('Range Slider uses the right theme colors for the right shapes for a discrete slider with active and inactive colors', (WidgetTester tester) async {
@@ -1175,9 +1187,9 @@ void main() {
    expect(
        sliderBox,
        paints
-          ..rect(color: inactiveColor)
+          ..rrect(color: inactiveColor)
          ..rect(color: activeColor)
-          ..rect(color: inactiveColor));
+          ..rrect(color: inactiveColor));
    expect(
        sliderBox,
        paints
@@ -1185,12 +1197,16 @@ void main() {
          ..circle(color: activeColor)
          ..circle(color: inactiveColor)
          ..circle(color: activeColor)
+          ..circle(color: Colors.white)
          ..circle(color: activeColor)
+          ..circle(color: Colors.white)
          ..circle(color: activeColor));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.thumbColor)));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.disabledThumbColor)));
    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledActiveTrackColor)));
    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledInactiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledActiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledInactiveTrackColor)));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.activeTickMarkColor)));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.inactiveTickMarkColor)));
  });
@@ -1206,12 +1222,14 @@ void main() {
    expect(
        sliderBox,
        paints
-          ..rect(color: sliderTheme.disabledInactiveTrackColor)
+          ..rrect(color: sliderTheme.disabledInactiveTrackColor)
          ..rect(color: sliderTheme.disabledActiveTrackColor)
-          ..rect(color: sliderTheme.disabledInactiveTrackColor));
+          ..rrect(color: sliderTheme.disabledInactiveTrackColor));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.thumbColor)));
    expect(sliderBox, isNot(paints..rect(color: sliderTheme.activeTrackColor)));
    expect(sliderBox, isNot(paints..rect(color: sliderTheme.inactiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.activeTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.inactiveTrackColor)));

  });

@@ -1233,17 +1251,17 @@ void main() {
    expect(
        sliderBox,
        paints
-          ..rect(color: sliderTheme.disabledInactiveTrackColor)
+          ..rrect(color: sliderTheme.disabledInactiveTrackColor)
          ..rect(color: sliderTheme.disabledActiveTrackColor)
-          ..rect(color: sliderTheme.disabledInactiveTrackColor));
+          ..rrect(color: sliderTheme.disabledInactiveTrackColor));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.thumbColor)));
    expect(sliderBox, isNot(paints..rect(color: sliderTheme.activeTrackColor)));
    expect(sliderBox, isNot(paints..rect(color: sliderTheme.inactiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.activeTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.inactiveTrackColor)));
  });

  testWidgets('Range Slider uses the right theme colors for the right shapes when the value indicators are showing', (WidgetTester tester) async {
-    const Color customColor1 = Color(0xcafefeed);
-    const Color customColor2 = Color(0xdeadbeef);
    final ThemeData theme = _buildTheme();
    final SliderThemeData sliderTheme = theme.sliderTheme;
    RangeValues values = const RangeValues(0.5, 0.75);
@@ -1285,7 +1303,7 @@ void main() {
    final RenderBox sliderBox = tester.firstRenderObject<RenderBox>(find.byType(RangeSlider));

    final Offset topRight = tester.getTopRight(find.byType(RangeSlider)).translate(-24, 0);
-    TestGesture gesture = await tester.startGesture(topRight);
+    final TestGesture gesture = await tester.startGesture(topRight);
    // Wait for value indicator animation to finish.
    await tester.pumpAndSettle();
    expect(values.end, equals(1));
@@ -1298,24 +1316,6 @@ void main() {
    await gesture.up();
    // Wait for value indicator animation to finish.
    await tester.pumpAndSettle();
-
-    // Testing the custom colors are used for the indicator.
-    await tester.pumpWidget(buildApp(
-      divisions: 3,
-      activeColor: customColor1,
-      inactiveColor: customColor2,
-    ));
-    gesture = await tester.startGesture(topRight);
-    // Wait for value indicator animation to finish.
-    await tester.pumpAndSettle();
-    expect(values.end, equals(1));
-    expect(
-      sliderBox,
-      paints
-        ..path(color: customColor1)
-        ..path(color: customColor1),
-    );
-    await gesture.up();
  });

  testWidgets('Range Slider top thumb gets stroked when overlapping', (WidgetTester tester) async {
--- a/packages/flutter/test/material/slider_test.dart
+++ b/packages/flutter/test/material/slider_test.dart
@@ -39,6 +39,8 @@ class LoggingThumbShape extends SliderComponentShape {
    SliderThemeData sliderTheme,
    TextDirection textDirection,
    double value,
+    double textScaleFactor,
+    Size sizeWithOverflow,
  }) {
    log.add(thumbCenter);
    final Paint thumbPaint = Paint()..color = Colors.red;
@@ -582,6 +584,7 @@ void main() {
        overlayColor: Color(0xff000010),
        thumbColor: Color(0xff000011),
        valueIndicatorColor: Color(0xff000012),
+        surfaceColor: Colors.white,
      ),
    );
    final SliderThemeData sliderTheme = theme.sliderTheme;
@@ -625,43 +628,47 @@ void main() {
    final RenderBox sliderBox = tester.firstRenderObject<RenderBox>(find.byType(Slider));

    // Check default theme for enabled widget.
-    expect(sliderBox, paints..rect(color: sliderTheme.activeTrackColor)..rect(color: sliderTheme.inactiveTrackColor));
+    expect(sliderBox, paints..rrect(color: sliderTheme.activeTrackColor)..rrect(color: sliderTheme.inactiveTrackColor));
+    expect(sliderBox, paints..shadow(color: const Color(0xff000000)));
    expect(sliderBox, paints..circle(color: sliderTheme.thumbColor));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.disabledThumbColor)));
-    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledActiveTrackColor)));
-    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledInactiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledActiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledInactiveTrackColor)));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.activeTickMarkColor)));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.inactiveTickMarkColor)));

    // Test setting only the activeColor.
    await tester.pumpWidget(buildApp(activeColor: customColor1));
-    expect(sliderBox, paints..rect(color: customColor1)..rect(color: sliderTheme.inactiveTrackColor));
-    expect(sliderBox, paints..circle(color: customColor1));
+    expect(sliderBox, paints..rrect(color: customColor1)..rrect(color: sliderTheme.inactiveTrackColor));
+    expect(sliderBox, paints..shadow(color: Colors.black));
+    expect(sliderBox, paints..circle(color: Colors.white)..circle(color: customColor1));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.thumbColor)));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.disabledThumbColor)));
-    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledActiveTrackColor)));
-    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledInactiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledActiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledInactiveTrackColor)));

    // Test setting only the inactiveColor.
    await tester.pumpWidget(buildApp(inactiveColor: customColor1));
-    expect(sliderBox, paints..rect(color: sliderTheme.activeTrackColor)..rect(color: customColor1));
+    expect(sliderBox, paints..rrect(color: sliderTheme.activeTrackColor)..rrect(color: customColor1));
+    expect(sliderBox, paints..shadow(color: Colors.black));
    expect(sliderBox, paints..circle(color: sliderTheme.thumbColor));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.disabledThumbColor)));
-    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledActiveTrackColor)));
-    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledInactiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledActiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledInactiveTrackColor)));

    // Test setting both activeColor and inactiveColor.
    await tester.pumpWidget(buildApp(activeColor: customColor1, inactiveColor: customColor2));
-    expect(sliderBox, paints..rect(color: customColor1)..rect(color: customColor2));
-    expect(sliderBox, paints..circle(color: customColor1));
+    expect(sliderBox, paints..rrect(color: customColor1)..rrect(color: customColor2));
+    expect(sliderBox, paints..shadow(color: Colors.black));
+    expect(sliderBox, paints..circle(color: Colors.white)..circle(color: customColor1));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.thumbColor)));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.disabledThumbColor)));
-    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledActiveTrackColor)));
-    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledInactiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledActiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledInactiveTrackColor)));

    // Test colors for discrete slider.
    await tester.pumpWidget(buildApp(divisions: 3));
-    expect(sliderBox, paints..rect(color: sliderTheme.activeTrackColor)..rect(color: sliderTheme.inactiveTrackColor));
+    expect(sliderBox, paints..rrect(color: sliderTheme.activeTrackColor)..rrect(color: sliderTheme.inactiveTrackColor));
    expect(
        sliderBox,
        paints
@@ -669,10 +676,12 @@ void main() {
          ..circle(color: sliderTheme.activeTickMarkColor)
          ..circle(color: sliderTheme.inactiveTickMarkColor)
          ..circle(color: sliderTheme.inactiveTickMarkColor)
-          ..circle(color: sliderTheme.thumbColor));
+          ..shadow(color: Colors.black)
+          ..circle(color: sliderTheme.thumbColor)
+    );
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.disabledThumbColor)));
-    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledActiveTrackColor)));
-    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledInactiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledActiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledInactiveTrackColor)));

    // Test colors for discrete slider with inactiveColor and activeColor set.
    await tester.pumpWidget(buildApp(
@@ -680,7 +689,7 @@ void main() {
      inactiveColor: customColor2,
      divisions: 3,
    ));
-    expect(sliderBox, paints..rect(color: customColor1)..rect(color: customColor2));
+    expect(sliderBox, paints..rrect(color: customColor1)..rrect(color: customColor2));
    expect(
        sliderBox,
        paints
@@ -688,11 +697,13 @@ void main() {
          ..circle(color: customColor2)
          ..circle(color: customColor1)
          ..circle(color: customColor1)
+          ..shadow(color: Colors.black)
+          ..circle(color: Colors.white)
          ..circle(color: customColor1));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.thumbColor)));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.disabledThumbColor)));
-    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledActiveTrackColor)));
-    expect(sliderBox, isNot(paints..rect(color: sliderTheme.disabledInactiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledActiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.disabledInactiveTrackColor)));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.activeTickMarkColor)));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.inactiveTickMarkColor)));

@@ -702,24 +713,24 @@ void main() {
    expect(
        sliderBox,
        paints
-          ..rect(color: sliderTheme.disabledActiveTrackColor)
-          ..rect(color: sliderTheme.disabledInactiveTrackColor));
-    expect(sliderBox, paints..circle(color: sliderTheme.disabledThumbColor));
+          ..rrect(color: sliderTheme.disabledActiveTrackColor)
+          ..rrect(color: sliderTheme.disabledInactiveTrackColor));
+    expect(sliderBox, paints..shadow(color: Colors.black)..circle(color: sliderTheme.disabledThumbColor));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.thumbColor)));
-    expect(sliderBox, isNot(paints..rect(color: sliderTheme.activeTrackColor)));
-    expect(sliderBox, isNot(paints..rect(color: sliderTheme.inactiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.activeTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.inactiveTrackColor)));

    // Test setting the activeColor and inactiveColor for disabled widget.
    await tester.pumpWidget(buildApp(activeColor: customColor1, inactiveColor: customColor2, enabled: false));
    expect(
        sliderBox,
        paints
-          ..rect(color: sliderTheme.disabledActiveTrackColor)
-          ..rect(color: sliderTheme.disabledInactiveTrackColor));
-    expect(sliderBox, paints..circle(color: sliderTheme.disabledThumbColor));
+          ..rrect(color: sliderTheme.disabledActiveTrackColor)
+          ..rrect(color: sliderTheme.disabledInactiveTrackColor));
+    expect(sliderBox, paints..shadow(color: Colors.black)..circle(color: sliderTheme.disabledThumbColor));
    expect(sliderBox, isNot(paints..circle(color: sliderTheme.thumbColor)));
-    expect(sliderBox, isNot(paints..rect(color: sliderTheme.activeTrackColor)));
-    expect(sliderBox, isNot(paints..rect(color: sliderTheme.inactiveTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.activeTrackColor)));
+    expect(sliderBox, isNot(paints..rrect(color: sliderTheme.inactiveTrackColor)));

    // Test that the default value indicator has the right colors.
    await tester.pumpWidget(buildApp(divisions: 3));
@@ -731,14 +742,15 @@ void main() {
    expect(
      sliderBox,
      paints
-        ..rect(color: sliderTheme.activeTrackColor)
-        ..rect(color: sliderTheme.inactiveTrackColor)
+        ..rrect(color: sliderTheme.activeTrackColor)
+        ..rrect(color: sliderTheme.inactiveTrackColor)
        ..circle(color: sliderTheme.overlayColor)
        ..circle(color: sliderTheme.activeTickMarkColor)
        ..circle(color: sliderTheme.activeTickMarkColor)
        ..circle(color: sliderTheme.inactiveTickMarkColor)
        ..circle(color: sliderTheme.inactiveTickMarkColor)
        ..path(color: sliderTheme.valueIndicatorColor)
+        ..shadow(color: Colors.black)
        ..circle(color: sliderTheme.thumbColor),
    );
    await gesture.up();
@@ -759,14 +771,16 @@ void main() {
    expect(
      sliderBox,
      paints
-        ..rect(color: customColor1) // active track
-        ..rect(color: customColor2) // inactive track
+        ..rrect(color: customColor1) // active track
+        ..rrect(color: customColor2) // inactive track
        ..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
        ..circle(color: customColor1) // 4th tick mark
-        ..path(color: customColor1) // indicator
+        ..path(color: sliderTheme.valueIndicatorColor) // indicator
+        ..shadow(color: Colors.black)
+        ..circle(color: Colors.white)
        ..circle(color: customColor1), // thumb
    );
    await gesture.up();
@@ -970,7 +984,19 @@ void main() {
    TestGesture gesture = await tester.startGesture(center);
    await tester.pumpAndSettle();

-    expect(tester.renderObject(find.byType(Slider)), paints..scale(x: 1.0, y: 1.0));
+    expect(
+      tester.renderObject(find.byType(Slider)),
+      paints
+        ..path(
+          includes: const <Offset>[
+            Offset(0.0, 0.0),
+            Offset(0.0, -38.0),
+            Offset(-30.0, -16.0),
+            Offset(30.0, -16.0),
+          ],
+          color: const Color(0xf55f5f5f),
+        ),
+    );

    await gesture.up();
    await tester.pumpAndSettle();
@@ -980,7 +1006,19 @@ void main() {
    gesture = await tester.startGesture(center);
    await tester.pumpAndSettle();

-    expect(tester.renderObject(find.byType(Slider)), paints..scale(x: 2.0, y: 2.0));
+    expect(
+      tester.renderObject(find.byType(Slider)),
+      paints
+        ..path(
+          includes: const <Offset>[
+            Offset(0.0, 0.0),
+            Offset(0.0, -52.0),
+            Offset(-44.0, -16.0),
+            Offset(44.0, -16.0),
+          ],
+          color: const Color(0xf55f5f5f),
+        ),
+    );

    await gesture.up();
    await tester.pumpAndSettle();
@@ -995,7 +1033,18 @@ void main() {
    gesture = await tester.startGesture(center);
    await tester.pumpAndSettle();

-    expect(tester.renderObject(find.byType(Slider)), paints..scale(x: 1.0, y: 1.0));
+    expect(tester.renderObject(find.byType(Slider)),
+      paints
+        ..path(
+          includes: const <Offset>[
+            Offset(0.0, 0.0),
+            Offset(0.0, -38.0),
+            Offset(-30.0, -16.0),
+            Offset(30.0, -16.0),
+          ],
+          color: const Color(0xf55f5f5f),
+        ),
+    );

    await gesture.up();
    await tester.pumpAndSettle();
@@ -1009,7 +1058,19 @@ void main() {
    gesture = await tester.startGesture(center);
    await tester.pumpAndSettle();

-    expect(tester.renderObject(find.byType(Slider)), paints..scale(x: 2.0, y: 2.0));
+    expect(
+        tester.renderObject(find.byType(Slider)),
+        paints
+          ..path(
+            includes: const <Offset>[
+              Offset(0.0, 0.0),
+              Offset(0.0, -52.0),
+              Offset(-44.0, -16.0),
+              Offset(44.0, -16.0),
+            ],
+            color: const Color(0xf55f5f5f),
+          ),
+    );

    await gesture.up();
    await tester.pumpAndSettle();
@@ -1114,11 +1175,11 @@ 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: 26.0, y: 24.0, radius: 1.0)
+          ..circle(x: 213.0, 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: 587.0, y: 24.0, radius: 1.0)
+          ..circle(x: 774.0, y: 24.0, radius: 1.0)
          ..circle(x: 24.0, y: 24.0, radius: 10.0),
      );

@@ -1131,11 +1192,11 @@ void main() {
        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: 26.0, y: 24.0, radius: 1.0)
+          ..circle(x: 213.0, 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: 587.0, y: 24.0, radius: 1.0)
+          ..circle(x: 774.0, y: 24.0, radius: 1.0)
          ..circle(x: 111.20703125, y: 24.0, radius: 10.0),
      );

@@ -1151,11 +1212,11 @@ void main() {
        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: 26.0, y: 24.0, radius: 1.0)
+          ..circle(x: 213.0, 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: 587.0, y: 24.0, radius: 1.0)
+          ..circle(x: 774.0, y: 24.0, radius: 1.0)
          ..circle(x: 190.0135726928711, y: 24.0, radius: 10.0),
      );
      // Wait for animations to finish.
@@ -1165,11 +1226,11 @@ void main() {
        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: 26.0, y: 24.0, radius: 1.0)
+          ..circle(x: 213.0, 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: 587.0, y: 24.0, radius: 1.0)
+          ..circle(x: 774.0, y: 24.0, radius: 1.0)
          ..circle(x: 400.0, y: 24.0, radius: 10.0),
      );
      await gesture.up();
@@ -1178,11 +1239,11 @@ 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: 26.0, y: 24.0, radius: 1.0)
+          ..circle(x: 213.0, 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: 587.0, y: 24.0, radius: 1.0)
+          ..circle(x: 774.0, y: 24.0, radius: 1.0)
          ..circle(x: 400.0, y: 24.0, radius: 10.0),
      );
    }
--- a/packages/flutter/test/material/slider_theme_test.dart
+++ b/packages/flutter/test/material/slider_theme_test.dart
@@ -107,8 +107,8 @@ void main() {
    expect(
      sliderBox,
      paints
-        ..rect(color: sliderTheme.disabledActiveTrackColor)
-        ..rect(color: sliderTheme.disabledInactiveTrackColor),
+        ..rrect(color: sliderTheme.disabledActiveTrackColor)
+        ..rrect(color: sliderTheme.disabledInactiveTrackColor),
    );
  });

@@ -129,8 +129,8 @@ void main() {
    expect(
      sliderBox,
      paints
-        ..rect(color: customTheme.disabledActiveTrackColor)
-        ..rect(color: customTheme.disabledInactiveTrackColor),
+        ..rrect(color: customTheme.disabledActiveTrackColor)
+        ..rrect(color: customTheme.disabledInactiveTrackColor),
    );
  });

@@ -228,13 +228,15 @@ void main() {
    await tester.pumpWidget(_buildApp(sliderTheme, value: 0.25));
    final RenderBox sliderBox = tester.firstRenderObject<RenderBox>(find.byType(Slider));

+    const Radius radius = Radius.circular(2);
+
    // The enabled slider thumb has track segments that extend to and from
    // the center of the thumb.
    expect(
      sliderBox,
      paints
-        ..rect(rect: const Rect.fromLTRB(25.0, 299.0, 202.0, 301.0), color: sliderTheme.activeTrackColor)
-        ..rect(rect: const Rect.fromLTRB(222.0, 299.0, 776.0, 301.0), color: sliderTheme.inactiveTrackColor),
+        ..rrect(rrect: RRect.fromLTRBAndCorners(24.0, 298.0, 212.0, 302.0, topLeft: radius, bottomLeft: radius), color: sliderTheme.activeTrackColor)
+        ..rrect(rrect: RRect.fromLTRBAndCorners(212.0, 298.0, 776.0, 302.0, topRight: radius, bottomRight: radius), color: sliderTheme.inactiveTrackColor),
    );

    await tester.pumpWidget(_buildApp(sliderTheme, value: 0.25, enabled: false));
@@ -249,8 +251,8 @@ void main() {
    expect(
      sliderBox,
      paints
-        ..rect(rect: const Rect.fromLTRB(25.0, 299.0, 202.0, 301.0), color: sliderTheme.disabledActiveTrackColor)
-        ..rect(rect: const Rect.fromLTRB(222.0, 299.0, 776.0, 301.0), color: sliderTheme.disabledInactiveTrackColor),
+        ..rrect(rrect: RRect.fromLTRBAndCorners(24.0, 298.0, 212.0, 302.0, topLeft: radius, bottomLeft: radius), color: sliderTheme.disabledActiveTrackColor)
+        ..rrect(rrect: RRect.fromLTRBAndCorners(212.0, 298.0, 776.0, 302.0, topRight: radius, bottomRight: radius), color: sliderTheme.disabledInactiveTrackColor),
    );
  });

@@ -364,7 +366,189 @@ void main() {
      platform: TargetPlatform.android,
      primarySwatch: Colors.blue,
    );
-    final SliderThemeData sliderTheme = theme.sliderTheme.copyWith(thumbColor: Colors.red.shade500, showValueIndicator: ShowValueIndicator.always);
+    final SliderThemeData sliderTheme = theme.sliderTheme.copyWith(
+      thumbColor: Colors.red.shade500,
+      showValueIndicator: ShowValueIndicator.always,
+    );
+    Widget buildApp(String value, { double sliderValue = 0.5, double textScale = 1.0 }) {
+      return Directionality(
+        textDirection: TextDirection.ltr,
+        child: MediaQuery(
+          data: MediaQueryData.fromWindow(window).copyWith(textScaleFactor: textScale),
+          child: Material(
+            child: Row(
+              children: <Widget>[
+                Expanded(
+                  child: SliderTheme(
+                    data: sliderTheme,
+                    child: Slider(
+                      value: sliderValue,
+                      label: '$value',
+                      divisions: 3,
+                      onChanged: (double d) { },
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      );
+    }
+
+    await tester.pumpWidget(buildApp('1'));
+
+    final RenderBox sliderBox = tester.firstRenderObject<RenderBox>(find.byType(Slider));
+
+    Offset center = tester.getCenter(find.byType(Slider));
+    TestGesture gesture = await tester.startGesture(center);
+    // Wait for value indicator animation to finish.
+    await tester.pumpAndSettle();
+    expect(
+      sliderBox,
+      paints
+        ..path(
+          includes: const <Offset>[
+            Offset(0.0, 0.0),
+            Offset(-20.0, -12.0),
+            Offset(20.0, -34.0),
+            Offset(0.0, -38.0),
+          ],
+          color: const Color(0xf55f5f5f),
+        ),
+    );
+
+    await gesture.up();
+
+    // Test that it expands with a larger label.
+    await tester.pumpWidget(buildApp('1000'));
+    center = tester.getCenter(find.byType(Slider));
+    gesture = await tester.startGesture(center);
+    // Wait for value indicator animation to finish.
+    await tester.pumpAndSettle();
+    expect(
+      sliderBox,
+      paints
+        ..rrect()
+        ..rrect()
+        ..path(
+          includes: const <Offset>[
+            Offset(0.0, 0.0),
+            Offset(-30.0, -12.0),
+            Offset(30.0, -34.0),
+            Offset(0.0, -38.0),
+          ],
+          color: const Color(0xf55f5f5f),
+        ),
+    );
+    await gesture.up();
+
+    // Test that it avoids the left edge of the screen.
+    await tester.pumpWidget(buildApp('1000000', sliderValue: 0.0));
+    center = tester.getCenter(find.byType(Slider));
+    gesture = await tester.startGesture(center);
+    // Wait for value indicator animation to finish.
+    await tester.pumpAndSettle();
+    expect(
+      sliderBox,
+      paints
+        ..rrect()
+        ..rrect()
+        ..path(
+          includes: const <Offset>[
+            Offset(0.0, 0.0),
+            Offset(-12.0, -12.0),
+            Offset(110.0, -34.0),
+            Offset(0.0, -38.0),
+          ],
+          color: const Color(0xf55f5f5f),
+        )
+    );
+    await gesture.up();
+
+    // Test that it avoids the right edge of the screen.
+    await tester.pumpWidget(buildApp('1000000', sliderValue: 1.0));
+    center = tester.getCenter(find.byType(Slider));
+    gesture = await tester.startGesture(center);
+    // Wait for value indicator animation to finish.
+    await tester.pumpAndSettle();
+    expect(
+      sliderBox,
+      paints
+        ..rrect()
+        ..rrect()
+        ..path(
+          includes: const <Offset>[
+            Offset(0.0, 0.0),
+            Offset(-110.0, -12.0),
+            Offset(12.0, -34.0),
+            Offset(0.0, -38.0),
+          ],
+          color: const Color(0xf55f5f5f),
+        )
+    );
+    await gesture.up();
+
+    // Test that the box decreases in height when the text scale gets smaller.
+    await tester.pumpWidget(buildApp('1000000', sliderValue: 0.0, textScale: 0.5));
+    center = tester.getCenter(find.byType(Slider));
+    gesture = await tester.startGesture(center);
+    // Wait for value indicator animation to finish.
+    await tester.pumpAndSettle();
+    expect(
+      sliderBox,
+      paints
+        ..rrect()
+        ..rrect()
+        ..path(
+          includes: const <Offset>[
+            Offset(0.0, 0.0),
+            Offset(-12.0, -12.0),
+            Offset(61.0, -16.0),
+            Offset(0.0, -20.0),
+          ],
+          excludes: const <Offset>[
+            Offset(0.0, -38.0)
+          ],
+          color: const Color(0xf55f5f5f),
+        )
+    );
+    await gesture.up();
+
+    // Test that the box increases in height when the text scale gets bigger.
+    await tester.pumpWidget(buildApp('1000000', sliderValue: 0.0, textScale: 2.0));
+    center = tester.getCenter(find.byType(Slider));
+    gesture = await tester.startGesture(center);
+    // Wait for value indicator animation to finish.
+    await tester.pumpAndSettle();
+    expect(
+      sliderBox,
+      paints
+        ..rrect()
+        ..rrect()
+        ..path(
+          includes: const <Offset>[
+            Offset(0.0, 0.0),
+            Offset(-12.0, -16.0),
+            Offset(208.0, -40.0),
+            Offset(0.0, -50.0),
+          ],
+          color: const Color(0xf55f5f5f),
+        )
+    );
+    await gesture.up();
+  }, skip: isBrowser);
+
+  testWidgets('Paddle slider value indicator shape draws correctly', (WidgetTester tester) async {
+    final ThemeData theme = ThemeData(
+      platform: TargetPlatform.android,
+      primarySwatch: Colors.blue,
+    );
+    final SliderThemeData sliderTheme = theme.sliderTheme.copyWith(
+      thumbColor: Colors.red.shade500,
+      showValueIndicator: ShowValueIndicator.always,
+      valueIndicatorShape: const PaddleSliderValueIndicatorShape(),
+    );
    Widget buildApp(String value, { double sliderValue = 0.5, double textScale = 1.0 }) {
      return Directionality(
        textDirection: TextDirection.ltr,
@@ -532,6 +716,7 @@ void main() {

  testWidgets('The slider track height can be overridden', (WidgetTester tester) async {
    final SliderThemeData sliderTheme = ThemeData().sliderTheme.copyWith(trackHeight: 16);
+    const Radius radius = Radius.circular(8);

    await tester.pumpWidget(_buildApp(sliderTheme, value: 0.25));

@@ -541,8 +726,8 @@ void main() {
    expect(
      sliderBox,
      paints
-        ..rect(rect: const Rect.fromLTRB(32.0, 292.0, 202.0, 308.0), color: sliderTheme.activeTrackColor)
-        ..rect(rect: const Rect.fromLTRB(222.0, 292.0, 776.0, 308.0), color: sliderTheme.inactiveTrackColor),
+        ..rrect(rrect: RRect.fromLTRBAndCorners(24.0, 292.0, 212.0, 308.0, topLeft: radius, bottomLeft: radius), color: sliderTheme.activeTrackColor)
+        ..rrect(rrect: RRect.fromLTRBAndCorners(212.0, 292.0, 776.0, 308.0, topRight: radius, bottomRight: radius), color: sliderTheme.inactiveTrackColor),
    );

    await tester.pumpWidget(_buildApp(sliderTheme, value: 0.25, enabled: false));
@@ -553,8 +738,8 @@ void main() {
    expect(
      sliderBox,
      paints
-        ..rect(rect: const Rect.fromLTRB(32.0, 292.0, 202.0, 308.0), color: sliderTheme.disabledActiveTrackColor)
-        ..rect(rect: const Rect.fromLTRB(222.0, 292.0, 776.0, 308.0), color: sliderTheme.disabledInactiveTrackColor),
+        ..rrect(rrect: RRect.fromLTRBAndCorners(24.0, 292.0, 212.0, 308.0, topLeft: radius, bottomLeft: radius), color: sliderTheme.disabledActiveTrackColor)
+        ..rrect(rrect: RRect.fromLTRBAndCorners(212.0, 292.0, 776.0, 308.0, topRight: radius, bottomRight: radius), color: sliderTheme.disabledInactiveTrackColor),
    );
  });

@@ -623,9 +808,9 @@ void main() {
    expect(
      sliderBox,
      paints
-        ..circle(x: 29, y: 300, radius: 5, color: sliderTheme.activeTickMarkColor)
+        ..circle(x: 26, y: 300, radius: 5, color: sliderTheme.activeTickMarkColor)
        ..circle(x: 400, y: 300, radius: 5, color: sliderTheme.activeTickMarkColor)
-        ..circle(x: 771, y: 300, radius: 5, color: sliderTheme.inactiveTickMarkColor),
+        ..circle(x: 774, y: 300, radius: 5, color: sliderTheme.inactiveTickMarkColor),
    );

    await tester.pumpWidget(_buildApp(sliderTheme, value: 0.5, divisions: 2,  enabled: false));
@@ -634,9 +819,9 @@ void main() {
    expect(
      sliderBox,
      paints
-        ..circle(x: 29, y: 300, radius: 5, color: sliderTheme.disabledActiveTickMarkColor)
+        ..circle(x: 26, y: 300, radius: 5, color: sliderTheme.disabledActiveTickMarkColor)
        ..circle(x: 400, y: 300, radius: 5, color: sliderTheme.disabledActiveTickMarkColor)
-        ..circle(x: 771, y: 300, radius: 5, color: sliderTheme.disabledInactiveTickMarkColor),
+        ..circle(x: 774, y: 300, radius: 5, color: sliderTheme.disabledInactiveTickMarkColor),
    );
  });

@@ -708,7 +893,7 @@ void main() {
    final RenderBox sliderBox = tester.firstRenderObject<RenderBox>(find.byType(Slider));

    // Only 2 track segments.
-    expect(sliderBox, paintsExactlyCountTimes(#drawRect, 2));
+    expect(sliderBox, paintsExactlyCountTimes(#drawRRect, 2));
    expect(sliderBox, paintsExactlyCountTimes(#drawCircle, 0));
    expect(sliderBox, paintsExactlyCountTimes(#drawPath, 0));
  });
@@ -815,7 +1000,7 @@ void main() {
    await gesture.up();
  });

-  testWidgets('PaddleRangeSliderValueIndicatorShape skips all painting at zero scale', (WidgetTester tester) async {
+  testWidgets('PaddleSliderValueIndicatorShape skips all painting at zero scale', (WidgetTester tester) async {
    // Pump a slider with just a value indicator.
    await tester.pumpWidget(_buildApp(
      ThemeData().sliderTheme.copyWith(
@@ -824,7 +1009,7 @@ void main() {
        thumbShape: SliderComponentShape.noThumb,
        tickMarkShape: SliderTickMarkShape.noTickMark,
        showValueIndicator: ShowValueIndicator.always,
-        rangeValueIndicatorShape: const PaddleRangeSliderValueIndicatorShape(),
+        valueIndicatorShape: const PaddleSliderValueIndicatorShape(),
      ),
      value: 0.5,
      divisions: 4,
@@ -846,6 +1031,96 @@ void main() {

    await gesture.up();
  });
+
+  testWidgets('Default slider value indicator shape skips all painting at zero scale', (WidgetTester tester) async {
+    // Pump a slider with just a value indicator.
+    await tester.pumpWidget(_buildApp(
+      ThemeData().sliderTheme.copyWith(
+        trackHeight: 0,
+        overlayShape: SliderComponentShape.noOverlay,
+        thumbShape: SliderComponentShape.noThumb,
+        tickMarkShape: SliderTickMarkShape.noTickMark,
+        showValueIndicator: ShowValueIndicator.always,
+      ),
+      value: 0.5,
+      divisions: 4,
+    ));
+
+    final RenderBox sliderBox = tester.firstRenderObject<RenderBox>(find.byType(Slider));
+
+    // Tap the center of the track to kick off the animation of the value indicator.
+    final Offset center = tester.getCenter(find.byType(Slider));
+    final TestGesture gesture = await tester.startGesture(center);
+
+    // Nothing to paint at scale 0.
+    await tester.pump();
+    expect(sliderBox, paintsNothing);
+
+    // Painting a path for the value indicator.
+    await tester.pump(const Duration(milliseconds: 16));
+    expect(sliderBox, paintsExactlyCountTimes(#drawPath, 1));
+
+    await gesture.up();
+  });
+
+  testWidgets('PaddleRangeSliderValueIndicatorShape skips all painting at zero scale', (WidgetTester tester) async {
+    // Pump a slider with just a value indicator.
+    await tester.pumpWidget(_buildRangeApp(
+      ThemeData().sliderTheme.copyWith(
+        trackHeight: 0,
+        rangeValueIndicatorShape: const PaddleRangeSliderValueIndicatorShape(),
+      ),
+      values: const RangeValues(0, 0.5),
+      divisions: 4,
+    ));
+
+    final RenderBox sliderBox = tester.firstRenderObject<RenderBox>(find.byType(RangeSlider));
+
+    // Tap the center of the track to kick off the animation of the value indicator.
+    final Offset center = tester.getCenter(find.byType(RangeSlider));
+    final TestGesture gesture = await tester.startGesture(center);
+
+    // No value indicator path to paint at scale 0.
+    await tester.pump();
+    expect(sliderBox, paintsExactlyCountTimes(#drawPath, 0));
+
+    // Painting a path for each value indicator.
+    await tester.pump(const Duration(milliseconds: 16));
+    expect(sliderBox, paintsExactlyCountTimes(#drawPath, 2));
+
+    await gesture.up();
+  });
+
+  testWidgets('Default range indicator shape skips all painting at zero scale', (WidgetTester tester) async {
+    // Pump a slider with just a value indicator.
+    await tester.pumpWidget(_buildRangeApp(
+      ThemeData().sliderTheme.copyWith(
+        trackHeight: 0,
+        overlayShape: SliderComponentShape.noOverlay,
+        thumbShape: SliderComponentShape.noThumb,
+        tickMarkShape: SliderTickMarkShape.noTickMark,
+        showValueIndicator: ShowValueIndicator.always,
+      ),
+      values: const RangeValues(0, 0.5),
+      divisions: 4,
+    ));
+
+    final RenderBox sliderBox = tester.firstRenderObject<RenderBox>(find.byType(RangeSlider));
+
+    // Tap the center of the track to kick off the animation of the value indicator.
+    final Offset center = tester.getCenter(find.byType(RangeSlider));
+    final TestGesture gesture = await tester.startGesture(center);
+
+    // No value indicator path to paint at scale 0.
+    await tester.pump();
+    expect(sliderBox, paintsExactlyCountTimes(#drawPath, 0));
+
+    // Painting a path for each value indicator.
+    await tester.pump(const Duration(milliseconds: 16));
+    expect(sliderBox, paintsExactlyCountTimes(#drawPath, 2));
+
+    await gesture.up();
+  });
 }

 Widget _buildApp(
@@ -871,3 +1146,27 @@ Widget _buildApp(
    ),
  );
 }
+
+Widget _buildRangeApp(
+    SliderThemeData sliderTheme, {
+      RangeValues values = const RangeValues(0, 0),
+      bool enabled = true,
+      int divisions,
+    }) {
+  final ValueChanged<RangeValues> onChanged = enabled ? (RangeValues d) => values = d : null;
+  return MaterialApp(
+    home: Scaffold(
+      body: Center(
+        child: SliderTheme(
+          data: sliderTheme,
+          child: RangeSlider(
+            values: values,
+            labels: RangeLabels(values.start.toString(), values.end.toString()),
+            onChanged: onChanged,
+            divisions: divisions,
+          ),
+        ),
+      ),
+    ),
+  );
+}