[Material] Custom track, tick mark, and overlay shape painters for Slider (#25008)

Create a slider shape for custom track, tick mark, and overlay painting, for the material slider.

packages/flutter/test/material/slider_test.dart

@@ -26,17 +26,19 @@ class LoggingThumbShape extends SliderComponentShape {
 
   @override
   void paint(
-    PaintingContext context,
-    Offset thumbCenter, {
-    Animation<double> activationAnimation,
-    Animation<double> enableAnimation,
-    bool isDiscrete,
-    TextPainter labelPainter,
-    RenderBox parentBox,
-    SliderThemeData sliderTheme,
-    TextDirection textDirection,
-    double value,
-  }) {
+      PaintingContext context,
+      Offset thumbCenter, {
+      Animation<double> activationAnimation,
+      Animation<double> enableAnimation,
+      bool isEnabled,
+      bool isDiscrete,
+      bool onActiveTrack,
+      TextPainter labelPainter,
+      RenderBox parentBox,
+      SliderThemeData sliderTheme,
+      TextDirection textDirection,
+      double value,
+    }) {
     log.add(thumbCenter);
     final Paint thumbPaint = Paint()..color = Colors.red;
     context.canvas.drawCircle(thumbCenter, 5.0, thumbPaint);
@@ -720,14 +722,15 @@ void main() {
     expect(
       sliderBox,
       paints
-        ..rect(color: customColor1)
-        ..rect(color: customColor2)
-        ..circle(color: customColor1.withAlpha(0x29))
-        ..circle(color: customColor2)
-        ..circle(color: customColor2)
-        ..circle(color: customColor1)
-        ..path(color: customColor1)
-        ..circle(color: customColor1),
+        ..rect(color: customColor1) // active track
+        ..rect(color: customColor2) // inactive track
+        ..circle(color: customColor1.withAlpha(0x29)) // 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
+        ..circle(color: customColor1), // thumb
     );
     await gesture.up();
   });
@@ -896,8 +899,8 @@ void main() {
               child: Material(
                 child: Theme(
                   data: Theme.of(context).copyWith(
-                        sliderTheme: Theme.of(context).sliderTheme.copyWith(showValueIndicator: show),
-                      ),
+                    sliderTheme: Theme.of(context).sliderTheme.copyWith(showValueIndicator: show),
+                  ),
                   child: Center(
                     child: OverflowBox(
                       maxWidth: double.infinity,
@@ -1025,6 +1028,7 @@ 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)
@@ -1077,6 +1081,7 @@ void main() {
           ..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),
@@ -1089,6 +1094,7 @@ void main() {
         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),
@@ -1367,4 +1373,4 @@ void main() {
     expect(await tester.pumpAndSettle(const Duration(milliseconds: 100)), equals(1));
     await gesture.up();
   });
-}
+}
\ No newline at end of file