Value Indicator uses Global position (#57327)

* Value Indicator uses Global position when calculating horizontal position

* fixed test

* fixed analyzer

* Made globalCenter variable and added comments

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

@@ -2793,13 +2793,16 @@ class _RectangularSliderValueIndicatorPathPainter {
     assert(!sizeWithOverflow.isEmpty);
     const double edgePadding = 8.0;
     final double rectangleWidth = _upperRectangleWidth(labelPainter, scale, textScaleFactor);
+    /// Value indicator draws on the Overlay and by using the global Offset
+    /// we are making sure we use the bounds of the Overlay instead of the Slider.
+    final Offset globalCenter = parentBox.localToGlobal(center);
 
     // The rectangle must be shifted towards the center so that it minimizes the
     // chance of it rendering outside the bounds of the render box. If the shift
     // is negative, then the lobe is shifted from right to left, and if it is
     // positive, then the lobe is shifted from left to right.
-    final double overflowLeft = math.max(0, rectangleWidth / 2 - center.dx + edgePadding);
-    final double overflowRight = math.max(0, rectangleWidth / 2 - (sizeWithOverflow.width - center.dx - edgePadding));
+    final double overflowLeft = math.max(0, rectangleWidth / 2 - globalCenter.dx + edgePadding);
+    final double overflowRight = math.max(0, rectangleWidth / 2 - (sizeWithOverflow.width - globalCenter.dx - edgePadding));
 
     if (rectangleWidth < sizeWithOverflow.width) {
       return overflowLeft - overflowRight;

packages/flutter/test/material/slider_test.dart

@@ -1042,9 +1042,9 @@ void main() {
         ..path(
           includes: const <Offset>[
             Offset(0.0, 0.0),
-            Offset(0.0, -38.0),
-            Offset(-30.0, -16.0),
-            Offset(30.0, -16.0),
+            Offset(0.0, -8.0),
+            Offset(-276.0, -16.0),
+            Offset(-216.0, -16.0),
           ],
           color: const Color(0xf55f5f5f),
         ),
@@ -1064,9 +1064,9 @@ void main() {
         ..path(
           includes: const <Offset>[
             Offset(0.0, 0.0),
-            Offset(0.0, -52.0),
-            Offset(-44.0, -16.0),
-            Offset(44.0, -16.0),
+            Offset(0.0, -8.0),
+            Offset(-304.0, -16.0),
+            Offset(-216.0, -16.0),
           ],
           color: const Color(0xf55f5f5f),
         ),
@@ -1090,9 +1090,9 @@ void main() {
         ..path(
           includes: const <Offset>[
             Offset(0.0, 0.0),
-            Offset(0.0, -38.0),
-            Offset(-30.0, -16.0),
-            Offset(30.0, -16.0),
+            Offset(0.0, -8.0),
+            Offset(-276.0, -16.0),
+            Offset(-216.0, -16.0),
           ],
           color: const Color(0xf55f5f5f),
         ),
@@ -1116,9 +1116,9 @@ void main() {
         ..path(
           includes: const <Offset>[
             Offset(0.0, 0.0),
-            Offset(0.0, -52.0),
-            Offset(-44.0, -16.0),
-            Offset(44.0, -16.0),
+            Offset(0.0, -8.0),
+            Offset(-276.0, -16.0),
+            Offset(-216.0, -16.0),
           ],
           color: const Color(0xf55f5f5f),
         ),