[Material] Text scale and wide label fixes for Slider and Range Slider value...

[Material] Text scale and wide label fixes for Slider and Range Slider value indicator shape (#35496)

Various bug fixes for Slider and Range Slider value indicator around accessibility and wide labels.

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

@@ -1241,8 +1241,9 @@ class _RenderRangeSlider extends RenderBox {
     final TextPainter topLabelPainter = isLastThumbStart ? _startLabelPainter : _endLabelPainter;
     final double bottomValue = isLastThumbStart ? endValue : startValue;
     final double topValue = isLastThumbStart ? startValue : endValue;
+    final bool shouldPaintValueIndicators = isEnabled && labels != null && !_valueIndicatorAnimation.isDismissed && showValueIndicator;
 
-    if (isEnabled && labels != null && !_valueIndicatorAnimation.isDismissed && showValueIndicator) {
+    if (shouldPaintValueIndicators) {
       _sliderTheme.rangeValueIndicatorShape.paint(
         context,
         bottomThumbCenter,
@@ -1257,13 +1258,54 @@ class _RenderRangeSlider extends RenderBox {
         thumb: bottomThumb,
         value: bottomValue,
       );
+    }
+
+    _sliderTheme.rangeThumbShape.paint(
+      context,
+      bottomThumbCenter,
+      activationAnimation: _valueIndicatorAnimation,
+      enableAnimation: _enableAnimation,
+      isDiscrete: isDiscrete,
+      isOnTop: false,
+      textDirection: textDirection,
+      sliderTheme: _sliderTheme,
+      thumb: bottomThumb,
+    );
+
+    if (shouldPaintValueIndicators) {
+      final double startOffset = sliderTheme.rangeValueIndicatorShape.getHorizontalShift(
+        parentBox: this,
+        center: startThumbCenter,
+        labelPainter: _startLabelPainter,
+        activationAnimation: _valueIndicatorAnimation,
+      );
+      final double endOffset = sliderTheme.rangeValueIndicatorShape.getHorizontalShift(
+        parentBox: this,
+        center: endThumbCenter,
+        labelPainter: _endLabelPainter,
+        activationAnimation: _valueIndicatorAnimation,
+      );
+      final double startHalfWidth = sliderTheme.rangeValueIndicatorShape.getPreferredSize(isEnabled, isDiscrete, labelPainter: _startLabelPainter).width / 2;
+      final double endHalfWidth = sliderTheme.rangeValueIndicatorShape.getPreferredSize(isEnabled, isDiscrete, labelPainter: _endLabelPainter).width / 2;
+      double innerOverflow = startHalfWidth + endHalfWidth;
+      switch (textDirection) {
+        case TextDirection.ltr:
+          innerOverflow += startOffset;
+          innerOverflow -= endOffset;
+          break;
+        case TextDirection.rtl:
+          innerOverflow -= startOffset;
+          innerOverflow += endOffset;
+          break;
+      }
+
       _sliderTheme.rangeValueIndicatorShape.paint(
         context,
         topThumbCenter,
         activationAnimation: _valueIndicatorAnimation,
         enableAnimation: _enableAnimation,
         isDiscrete: isDiscrete,
-        isOnTop: thumbDelta < sliderTheme.rangeValueIndicatorShape.getPreferredSize(isEnabled, isDiscrete, labelPainter: topLabelPainter).width,
+        isOnTop: thumbDelta < innerOverflow,
         labelPainter: topLabelPainter,
         parentBox: this,
         sliderTheme: _sliderTheme,
@@ -1273,17 +1315,6 @@ class _RenderRangeSlider extends RenderBox {
       );
     }
 
-    _sliderTheme.rangeThumbShape.paint(
-      context,
-      bottomThumbCenter,
-      activationAnimation: _valueIndicatorAnimation,
-      enableAnimation: _enableAnimation,
-      isDiscrete: isDiscrete,
-      isOnTop: false,
-      textDirection: textDirection,
-      sliderTheme: _sliderTheme,
-      thumb: bottomThumb,
-    );
     _sliderTheme.rangeThumbShape.paint(
       context,
       topThumbCenter,

packages/flutter/test/material/range_slider_test.dart

@@ -1459,5 +1459,79 @@ void main() {
 
     await gesture.up();
   });
+
+  testWidgets('Range Slider top value indicator gets stroked when overlapping with large text scale', (WidgetTester tester) async {
+    RangeValues values = const RangeValues(0.3, 0.7);
+
+    final ThemeData theme = ThemeData(
+        platform: TargetPlatform.android,
+        primarySwatch: Colors.blue,
+        sliderTheme: const SliderThemeData(
+          valueIndicatorColor: Color(0xff000001),
+          overlappingShapeStrokeColor: Color(0xff000002),
+          showValueIndicator: ShowValueIndicator.always,
+        )
+    );
+    final SliderThemeData sliderTheme = theme.sliderTheme;
+
+    await tester.pumpWidget(
+      Directionality(
+        textDirection: TextDirection.ltr,
+        child: StatefulBuilder(
+          builder: (BuildContext context, StateSetter setState) {
+            return MediaQuery(
+              data: MediaQueryData.fromWindow(window).copyWith(textScaleFactor: 2.0),
+              child: Material(
+                child: Center(
+                  child: Theme(
+                    data: theme,
+                    child: RangeSlider(
+                      values: values,
+                      labels: RangeLabels(values.start.toStringAsFixed(2), values.end.toStringAsFixed(2)),
+                      onChanged: (RangeValues newValues) {
+                        setState(() {
+                          values = newValues;
+                        });
+                      },
+                    ),
+                  ),
+                ),
+              ),
+            );
+          },
+        ),
+      ),
+    );
+
+    final RenderBox sliderBox = tester.firstRenderObject<RenderBox>(find.byType(RangeSlider));
+
+    // Get the bounds of the track by finding the slider edges and translating
+    // inwards by the overlay radius.
+    final Offset topLeft = tester.getTopLeft(find.byType(RangeSlider)).translate(24, 0);
+    final Offset bottomRight = tester.getBottomRight(find.byType(RangeSlider)).translate(-24, 0);
+    final Offset middle = topLeft + bottomRight / 2;
+
+    // Drag the the thumbs towards the center.
+    final Offset leftTarget = topLeft + (bottomRight - topLeft) * 0.3;
+    await tester.dragFrom(leftTarget, middle - leftTarget);
+    await tester.pumpAndSettle();
+    final Offset rightTarget = topLeft + (bottomRight - topLeft) * 0.7;
+    await tester.dragFrom(rightTarget, middle - rightTarget);
+    await tester.pumpAndSettle();
+    expect(values.start, closeTo(0.5, 0.03));
+    expect(values.end, closeTo(0.5, 0.03));
+    final TestGesture gesture = await tester.startGesture(middle);
+    await tester.pumpAndSettle();
+
+    expect(
+      sliderBox,
+      paints
+        ..path(color: sliderTheme.valueIndicatorColor)
+        ..path(color: sliderTheme.overlappingShapeStrokeColor)
+        ..path(color: sliderTheme.valueIndicatorColor),
+    );
+
+    await gesture.up();
+  });
 }