Unverified Commit a9567313 authored by Arash's avatar Arash Committed by GitHub

[Feat] Stroke color for Slider value indicator (#135986)

Consider a scenario where the background color and indicator's background color are the same. 

Adding a stroke color to the value indicator would be a valuable for the following reasons:
- **Visual Clarity:** It would allow developers to make the value indicator stand out more against the background, making it easier for users to notice.
- **Customization:** It would provide more flexibility in customizing the appearance of the sliding widget, allowing developers to match the design requirements of their apps.
- **Accessibility:** Improved visual distinction can enhance the accessibility of the sliding widget for users with various needs.

*List which issues are fixed by this PR. You must list at least one issue.*

Fixes #135984
parent 941897f6
...@@ -277,6 +277,7 @@ class SliderThemeData with Diagnosticable { ...@@ -277,6 +277,7 @@ class SliderThemeData with Diagnosticable {
this.disabledThumbColor, this.disabledThumbColor,
this.overlayColor, this.overlayColor,
this.valueIndicatorColor, this.valueIndicatorColor,
this.valueIndicatorStrokeColor,
this.overlayShape, this.overlayShape,
this.tickMarkShape, this.tickMarkShape,
this.thumbShape, this.thumbShape,
...@@ -344,6 +345,7 @@ class SliderThemeData with Diagnosticable { ...@@ -344,6 +345,7 @@ class SliderThemeData with Diagnosticable {
disabledThumbColor: primaryColorDark.withAlpha(disabledThumbAlpha), disabledThumbColor: primaryColorDark.withAlpha(disabledThumbAlpha),
overlayColor: primaryColor.withAlpha(overlayAlpha), overlayColor: primaryColor.withAlpha(overlayAlpha),
valueIndicatorColor: primaryColor.withAlpha(valueIndicatorAlpha), valueIndicatorColor: primaryColor.withAlpha(valueIndicatorAlpha),
valueIndicatorStrokeColor: primaryColor.withAlpha(valueIndicatorAlpha),
overlayShape: const RoundSliderOverlayShape(), overlayShape: const RoundSliderOverlayShape(),
tickMarkShape: const RoundSliderTickMarkShape(), tickMarkShape: const RoundSliderTickMarkShape(),
thumbShape: const RoundSliderThumbShape(), thumbShape: const RoundSliderThumbShape(),
...@@ -423,6 +425,8 @@ class SliderThemeData with Diagnosticable { ...@@ -423,6 +425,8 @@ class SliderThemeData with Diagnosticable {
/// The color given to the [valueIndicatorShape] to draw itself with. /// The color given to the [valueIndicatorShape] to draw itself with.
final Color? valueIndicatorColor; final Color? valueIndicatorColor;
/// The color given to the [valueIndicatorShape] stroke.
final Color? valueIndicatorStrokeColor;
/// The shape that will be used to draw the [Slider]'s overlay. /// The shape that will be used to draw the [Slider]'s overlay.
/// ///
...@@ -600,6 +604,7 @@ class SliderThemeData with Diagnosticable { ...@@ -600,6 +604,7 @@ class SliderThemeData with Diagnosticable {
Color? disabledThumbColor, Color? disabledThumbColor,
Color? overlayColor, Color? overlayColor,
Color? valueIndicatorColor, Color? valueIndicatorColor,
Color? valueIndicatorStrokeColor,
SliderComponentShape? overlayShape, SliderComponentShape? overlayShape,
SliderTickMarkShape? tickMarkShape, SliderTickMarkShape? tickMarkShape,
SliderComponentShape? thumbShape, SliderComponentShape? thumbShape,
...@@ -633,6 +638,7 @@ class SliderThemeData with Diagnosticable { ...@@ -633,6 +638,7 @@ class SliderThemeData with Diagnosticable {
disabledThumbColor: disabledThumbColor ?? this.disabledThumbColor, disabledThumbColor: disabledThumbColor ?? this.disabledThumbColor,
overlayColor: overlayColor ?? this.overlayColor, overlayColor: overlayColor ?? this.overlayColor,
valueIndicatorColor: valueIndicatorColor ?? this.valueIndicatorColor, valueIndicatorColor: valueIndicatorColor ?? this.valueIndicatorColor,
valueIndicatorStrokeColor: valueIndicatorStrokeColor ?? this.valueIndicatorStrokeColor,
overlayShape: overlayShape ?? this.overlayShape, overlayShape: overlayShape ?? this.overlayShape,
tickMarkShape: tickMarkShape ?? this.tickMarkShape, tickMarkShape: tickMarkShape ?? this.tickMarkShape,
thumbShape: thumbShape ?? this.thumbShape, thumbShape: thumbShape ?? this.thumbShape,
...@@ -675,6 +681,7 @@ class SliderThemeData with Diagnosticable { ...@@ -675,6 +681,7 @@ class SliderThemeData with Diagnosticable {
disabledThumbColor: Color.lerp(a.disabledThumbColor, b.disabledThumbColor, t), disabledThumbColor: Color.lerp(a.disabledThumbColor, b.disabledThumbColor, t),
overlayColor: Color.lerp(a.overlayColor, b.overlayColor, t), overlayColor: Color.lerp(a.overlayColor, b.overlayColor, t),
valueIndicatorColor: Color.lerp(a.valueIndicatorColor, b.valueIndicatorColor, t), valueIndicatorColor: Color.lerp(a.valueIndicatorColor, b.valueIndicatorColor, t),
valueIndicatorStrokeColor: Color.lerp(a.valueIndicatorStrokeColor, b.valueIndicatorStrokeColor, t),
overlayShape: t < 0.5 ? a.overlayShape : b.overlayShape, overlayShape: t < 0.5 ? a.overlayShape : b.overlayShape,
tickMarkShape: t < 0.5 ? a.tickMarkShape : b.tickMarkShape, tickMarkShape: t < 0.5 ? a.tickMarkShape : b.tickMarkShape,
thumbShape: t < 0.5 ? a.thumbShape : b.thumbShape, thumbShape: t < 0.5 ? a.thumbShape : b.thumbShape,
...@@ -755,6 +762,7 @@ class SliderThemeData with Diagnosticable { ...@@ -755,6 +762,7 @@ class SliderThemeData with Diagnosticable {
&& other.disabledThumbColor == disabledThumbColor && other.disabledThumbColor == disabledThumbColor
&& other.overlayColor == overlayColor && other.overlayColor == overlayColor
&& other.valueIndicatorColor == valueIndicatorColor && other.valueIndicatorColor == valueIndicatorColor
&& other.valueIndicatorStrokeColor == valueIndicatorStrokeColor
&& other.overlayShape == overlayShape && other.overlayShape == overlayShape
&& other.tickMarkShape == tickMarkShape && other.tickMarkShape == tickMarkShape
&& other.thumbShape == thumbShape && other.thumbShape == thumbShape
...@@ -792,6 +800,7 @@ class SliderThemeData with Diagnosticable { ...@@ -792,6 +800,7 @@ class SliderThemeData with Diagnosticable {
properties.add(ColorProperty('disabledThumbColor', disabledThumbColor, defaultValue: defaultData.disabledThumbColor)); properties.add(ColorProperty('disabledThumbColor', disabledThumbColor, defaultValue: defaultData.disabledThumbColor));
properties.add(ColorProperty('overlayColor', overlayColor, defaultValue: defaultData.overlayColor)); properties.add(ColorProperty('overlayColor', overlayColor, defaultValue: defaultData.overlayColor));
properties.add(ColorProperty('valueIndicatorColor', valueIndicatorColor, defaultValue: defaultData.valueIndicatorColor)); properties.add(ColorProperty('valueIndicatorColor', valueIndicatorColor, defaultValue: defaultData.valueIndicatorColor));
properties.add(ColorProperty('valueIndicatorStrokeColor', valueIndicatorStrokeColor, defaultValue: defaultData.valueIndicatorStrokeColor));
properties.add(DiagnosticsProperty<SliderComponentShape>('overlayShape', overlayShape, defaultValue: defaultData.overlayShape)); properties.add(DiagnosticsProperty<SliderComponentShape>('overlayShape', overlayShape, defaultValue: defaultData.overlayShape));
properties.add(DiagnosticsProperty<SliderTickMarkShape>('tickMarkShape', tickMarkShape, defaultValue: defaultData.tickMarkShape)); properties.add(DiagnosticsProperty<SliderTickMarkShape>('tickMarkShape', tickMarkShape, defaultValue: defaultData.tickMarkShape));
properties.add(DiagnosticsProperty<SliderComponentShape>('thumbShape', thumbShape, defaultValue: defaultData.thumbShape)); properties.add(DiagnosticsProperty<SliderComponentShape>('thumbShape', thumbShape, defaultValue: defaultData.thumbShape));
...@@ -2625,6 +2634,7 @@ class RectangularSliderValueIndicatorShape extends SliderComponentShape { ...@@ -2625,6 +2634,7 @@ class RectangularSliderValueIndicatorShape extends SliderComponentShape {
textScaleFactor: textScaleFactor, textScaleFactor: textScaleFactor,
sizeWithOverflow: sizeWithOverflow, sizeWithOverflow: sizeWithOverflow,
backgroundPaintColor: sliderTheme.valueIndicatorColor!, backgroundPaintColor: sliderTheme.valueIndicatorColor!,
strokePaintColor: sliderTheme.valueIndicatorStrokeColor,
); );
} }
} }
...@@ -2704,7 +2714,7 @@ class RectangularRangeSliderValueIndicatorShape ...@@ -2704,7 +2714,7 @@ class RectangularRangeSliderValueIndicatorShape
textScaleFactor: textScaleFactor!, textScaleFactor: textScaleFactor!,
sizeWithOverflow: sizeWithOverflow!, sizeWithOverflow: sizeWithOverflow!,
backgroundPaintColor: sliderTheme!.valueIndicatorColor!, backgroundPaintColor: sliderTheme!.valueIndicatorColor!,
strokePaintColor: isOnTop! ? sliderTheme.overlappingShapeStrokeColor : null, strokePaintColor: isOnTop! ? sliderTheme.overlappingShapeStrokeColor : sliderTheme.valueIndicatorStrokeColor,
); );
} }
} }
...@@ -2892,7 +2902,7 @@ class PaddleSliderValueIndicatorShape extends SliderComponentShape { ...@@ -2892,7 +2902,7 @@ class PaddleSliderValueIndicatorShape extends SliderComponentShape {
labelPainter, labelPainter,
textScaleFactor, textScaleFactor,
sizeWithOverflow, sizeWithOverflow,
null, sliderTheme.valueIndicatorStrokeColor,
); );
} }
} }
...@@ -2974,7 +2984,7 @@ class PaddleRangeSliderValueIndicatorShape extends RangeSliderValueIndicatorShap ...@@ -2974,7 +2984,7 @@ class PaddleRangeSliderValueIndicatorShape extends RangeSliderValueIndicatorShap
labelPainter, labelPainter,
textScaleFactor!, textScaleFactor!,
sizeWithOverflow!, sizeWithOverflow!,
isOnTop ? sliderTheme.overlappingShapeStrokeColor : null, isOnTop ? sliderTheme.overlappingShapeStrokeColor : sliderTheme.valueIndicatorStrokeColor,
); );
} }
} }
...@@ -3422,6 +3432,7 @@ class DropSliderValueIndicatorShape extends SliderComponentShape { ...@@ -3422,6 +3432,7 @@ class DropSliderValueIndicatorShape extends SliderComponentShape {
textScaleFactor: textScaleFactor, textScaleFactor: textScaleFactor,
sizeWithOverflow: sizeWithOverflow, sizeWithOverflow: sizeWithOverflow,
backgroundPaintColor: sliderTheme.valueIndicatorColor!, backgroundPaintColor: sliderTheme.valueIndicatorColor!,
strokePaintColor: sliderTheme.valueIndicatorStrokeColor,
); );
} }
} }
...@@ -3538,8 +3549,17 @@ class _DropSliderValueIndicatorPathPainter { ...@@ -3538,8 +3549,17 @@ class _DropSliderValueIndicatorPathPainter {
..lineTo(-_triangleHeight, -_triangleHeight) ..lineTo(-_triangleHeight, -_triangleHeight)
..lineTo(_triangleHeight, -_triangleHeight) ..lineTo(_triangleHeight, -_triangleHeight)
..close(); ..close();
trianglePath.addRRect(borderRect);
if (strokePaintColor != null) {
final Paint strokePaint = Paint()
..color = strokePaintColor
..strokeWidth = 1.0
..style = PaintingStyle.stroke;
canvas.drawPath(trianglePath, strokePaint);
}
canvas.drawPath(trianglePath, fillPaint); canvas.drawPath(trianglePath, fillPaint);
canvas.drawRRect(borderRect, fillPaint);
// The label text is centered within the value indicator. // The label text is centered within the value indicator.
final double bottomTipToUpperRectTranslateY = -_preferredHalfHeight / 2 - upperRect.height; final double bottomTipToUpperRectTranslateY = -_preferredHalfHeight / 2 - upperRect.height;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment