Add MaterialStateProperty overlayColor & mouseCursor and fix hovering on thumbs behavior (#116894)

Author: TahaTesser

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

@@ -14,6 +14,7 @@ import 'package:flutter/widgets.dart';
 
 import 'constants.dart';
 import 'debug.dart';
+import 'material_state.dart';
 import 'slider_theme.dart';
 import 'theme.dart';
 
@@ -144,6 +145,8 @@ class RangeSlider extends StatefulWidget {
     this.labels,
     this.activeColor,
     this.inactiveColor,
+    this.overlayColor,
+    this.mouseCursor,
     this.semanticFormatterCallback,
   }) : assert(values != null),
        assert(min != null),
@@ -322,6 +325,26 @@ class RangeSlider extends StatefulWidget {
   /// appearance of various components of the slider.
   final Color? inactiveColor;
 
+  /// The highlight color that's typically used to indicate that
+  /// the range slider thumb is hovered or dragged.
+  ///
+  /// If this property is null, [RangeSlider] will use [activeColor] with
+  /// with an opacity of 0.12. If null, [SliderThemeData.overlayColor]
+  /// will be used, otherwise defaults to [ColorScheme.primary] with
+  /// an opacity of 0.12.
+  final MaterialStateProperty<Color?>? overlayColor;
+
+  /// The cursor for a mouse pointer when it enters or is hovering over the
+  /// widget.
+  ///
+  /// If null, then the value of [SliderThemeData.mouseCursor] is used. If that
+  /// is also null, then [MaterialStateMouseCursor.clickable] is used.
+  ///
+  /// See also:
+  ///
+  ///  * [MaterialStateMouseCursor], which can be used to create a [MouseCursor].
+  final MaterialStateProperty<MouseCursor?>? mouseCursor;
+
   /// The callback used to create a semantic value from the slider's values.
   ///
   /// Defaults to formatting values as a percentage.
@@ -400,6 +423,16 @@ class _RangeSliderState extends State<RangeSlider> with TickerProviderStateMixin
   PaintRangeValueIndicator? paintTopValueIndicator;
   PaintRangeValueIndicator? paintBottomValueIndicator;
 
+  bool get _enabled => widget.onChanged != null;
+
+  bool _dragging = false;
+
+  bool _hovering = false;
+  void _handleHoverChanged(bool hovering) {
+    if (hovering != _hovering) {
+      setState(() { _hovering = hovering; });
+    }
+  }
 
   @override
   void initState() {
@@ -415,7 +448,7 @@ class _RangeSliderState extends State<RangeSlider> with TickerProviderStateMixin
     enableController = AnimationController(
       duration: enableAnimationDuration,
       vsync: this,
-      value: widget.onChanged != null ? 1.0 : 0.0,
+      value: _enabled ? 1.0 : 0.0,
     );
     startPositionController = AnimationController(
       duration: Duration.zero,
@@ -436,7 +469,7 @@ class _RangeSliderState extends State<RangeSlider> with TickerProviderStateMixin
       return;
     }
     final bool wasEnabled = oldWidget.onChanged != null;
-    final bool isEnabled = widget.onChanged != null;
+    final bool isEnabled = _enabled;
     if (wasEnabled != isEnabled) {
       if (isEnabled) {
         enableController.forward();
@@ -462,7 +495,7 @@ class _RangeSliderState extends State<RangeSlider> with TickerProviderStateMixin
   }
 
   void _handleChanged(RangeValues values) {
-    assert(widget.onChanged != null);
+    assert(_enabled);
     final RangeValues lerpValues = _lerpRangeValues(values);
     if (lerpValues != widget.values) {
       widget.onChanged!(lerpValues);
@@ -471,11 +504,13 @@ class _RangeSliderState extends State<RangeSlider> with TickerProviderStateMixin
 
   void _handleDragStart(RangeValues values) {
     assert(widget.onChangeStart != null);
+    _dragging = true;
     widget.onChangeStart!(_lerpRangeValues(values));
   }
 
   void _handleDragEnd(RangeValues values) {
     assert(widget.onChangeEnd != null);
+    _dragging = false;
     widget.onChangeEnd!(_lerpRangeValues(values));
   }
 
@@ -576,6 +611,12 @@ class _RangeSliderState extends State<RangeSlider> with TickerProviderStateMixin
     const ShowValueIndicator defaultShowValueIndicator = ShowValueIndicator.onlyForDiscrete;
     const double defaultMinThumbSeparation = 8;
 
+    final Set<MaterialState> states = <MaterialState>{
+      if (!_enabled) MaterialState.disabled,
+      if (_hovering) MaterialState.hovered,
+      if (_dragging) MaterialState.dragged,
+    };
+
     // The value indicator's 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
@@ -588,6 +629,13 @@ class _RangeSliderState extends State<RangeSlider> with TickerProviderStateMixin
       valueIndicatorColor = widget.activeColor ?? sliderTheme.valueIndicatorColor ?? theme.colorScheme.primary;
     }
 
+    Color? effectiveOverlayColor() {
+      return widget.overlayColor?.resolve(states)
+        ?? widget.activeColor?.withOpacity(0.12)
+        ?? MaterialStateProperty.resolveAs<Color?>(sliderTheme.overlayColor, states)
+        ?? theme.colorScheme.primary.withOpacity(0.12);
+    }
+
     sliderTheme = sliderTheme.copyWith(
       trackHeight: sliderTheme.trackHeight ?? defaultTrackHeight,
       activeTrackColor: widget.activeColor ?? sliderTheme.activeTrackColor ?? theme.colorScheme.primary,
@@ -601,7 +649,7 @@ class _RangeSliderState extends State<RangeSlider> with TickerProviderStateMixin
       thumbColor: widget.activeColor ?? sliderTheme.thumbColor ?? theme.colorScheme.primary,
       overlappingShapeStrokeColor: sliderTheme.overlappingShapeStrokeColor ?? theme.colorScheme.surface,
       disabledThumbColor: sliderTheme.disabledThumbColor ?? Color.alphaBlend(theme.colorScheme.onSurface.withOpacity(.38), theme.colorScheme.surface),
-      overlayColor: widget.activeColor?.withOpacity(0.12) ?? sliderTheme.overlayColor ?? theme.colorScheme.primary.withOpacity(0.12),
+      overlayColor: effectiveOverlayColor(),
       valueIndicatorColor: valueIndicatorColor,
       rangeTrackShape: sliderTheme.rangeTrackShape ?? defaultTrackShape,
       rangeTickMarkShape: sliderTheme.rangeTickMarkShape ?? defaultTickMarkShape,
@@ -615,26 +663,36 @@ class _RangeSliderState extends State<RangeSlider> with TickerProviderStateMixin
       minThumbSeparation: sliderTheme.minThumbSeparation ?? defaultMinThumbSeparation,
       thumbSelector: sliderTheme.thumbSelector ?? _defaultRangeThumbSelector,
     );
+    final MouseCursor effectiveMouseCursor = widget.mouseCursor?.resolve(states)
+      ?? sliderTheme.mouseCursor?.resolve(states)
+      ?? MaterialStateMouseCursor.clickable.resolve(states);
 
     // 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 screenSize() => MediaQuery.sizeOf(context);
 
-    return CompositedTransformTarget(
-      link: _layerLink,
-      child: _RangeSliderRenderObjectWidget(
-        values: _unlerpRangeValues(widget.values),
-        divisions: widget.divisions,
-        labels: widget.labels,
-        sliderTheme: sliderTheme,
-        textScaleFactor: MediaQuery.textScaleFactorOf(context),
-        screenSize: screenSize(),
-        onChanged: (widget.onChanged != null) && (widget.max > widget.min) ? _handleChanged : null,
-        onChangeStart: widget.onChangeStart != null ? _handleDragStart : null,
-        onChangeEnd: widget.onChangeEnd != null ? _handleDragEnd : null,
-        state: this,
-        semanticFormatterCallback: widget.semanticFormatterCallback,
+    return FocusableActionDetector(
+      enabled: _enabled,
+      onShowHoverHighlight: _handleHoverChanged,
+      includeFocusSemantics: false,
+      mouseCursor: effectiveMouseCursor,
+      child: CompositedTransformTarget(
+        link: _layerLink,
+        child: _RangeSliderRenderObjectWidget(
+          values: _unlerpRangeValues(widget.values),
+          divisions: widget.divisions,
+          labels: widget.labels,
+          sliderTheme: sliderTheme,
+          textScaleFactor: MediaQuery.of(context).textScaleFactor,
+          screenSize: screenSize(),
+          onChanged: _enabled && (widget.max > widget.min) ? _handleChanged : null,
+          onChangeStart: widget.onChangeStart != null ? _handleDragStart : null,
+          onChangeEnd: widget.onChangeEnd != null ? _handleDragEnd : null,
+          state: this,
+          semanticFormatterCallback: widget.semanticFormatterCallback,
+          hovering: _hovering,
+        ),
       ),
     );
   }
@@ -673,6 +731,7 @@ class _RangeSliderRenderObjectWidget extends LeafRenderObjectWidget {
     required this.onChangeEnd,
     required this.state,
     required this.semanticFormatterCallback,
+    required this.hovering,
   });
 
   final RangeValues values;
@@ -686,6 +745,7 @@ class _RangeSliderRenderObjectWidget extends LeafRenderObjectWidget {
   final ValueChanged<RangeValues>? onChangeEnd;
   final SemanticFormatterCallback? semanticFormatterCallback;
   final _RangeSliderState state;
+  final bool hovering;
 
   @override
   _RenderRangeSlider createRenderObject(BuildContext context) {
@@ -704,6 +764,7 @@ class _RangeSliderRenderObjectWidget extends LeafRenderObjectWidget {
       textDirection: Directionality.of(context),
       semanticFormatterCallback: semanticFormatterCallback,
       platform: Theme.of(context).platform,
+      hovering: hovering,
       gestureSettings: MediaQuery.gestureSettingsOf(context),
     );
   }
@@ -726,6 +787,7 @@ class _RangeSliderRenderObjectWidget extends LeafRenderObjectWidget {
       ..textDirection = Directionality.of(context)
       ..semanticFormatterCallback = semanticFormatterCallback
       ..platform = Theme.of(context).platform
+      ..hovering = hovering
       ..gestureSettings = MediaQuery.gestureSettingsOf(context);
   }
 }
@@ -746,6 +808,7 @@ class _RenderRangeSlider extends RenderBox with RelayoutWhenSystemFontsChangeMix
     required this.onChangeEnd,
     required _RangeSliderState state,
     required TextDirection textDirection,
+    required bool hovering,
     required DeviceGestureSettings gestureSettings,
   })  : assert(values != null),
         assert(values.start >= 0.0 && values.start <= 1.0),
@@ -763,7 +826,8 @@ class _RenderRangeSlider extends RenderBox with RelayoutWhenSystemFontsChangeMix
         _screenSize = screenSize,
         _onChanged = onChanged,
         _state = state,
-        _textDirection = textDirection {
+        _textDirection = textDirection,
+        _hovering = hovering {
     _updateLabelPainters();
     final GestureArenaTeam team = GestureArenaTeam();
     _drag = HorizontalDragGestureRecognizer()
@@ -842,6 +906,8 @@ class _RenderRangeSlider extends RenderBox with RelayoutWhenSystemFontsChangeMix
   late RangeValues _newValues;
   late Offset _startThumbCenter;
   late Offset _endThumbCenter;
+  Rect? overlayStartRect;
+  Rect? overlayEndRect;
 
   bool get isEnabled => onChanged != null;
 
@@ -993,6 +1059,53 @@ class _RenderRangeSlider extends RenderBox with RelayoutWhenSystemFontsChangeMix
     _updateLabelPainters();
   }
 
+  /// True if this slider is being hovered over by a pointer.
+  bool get hovering => _hovering;
+  bool _hovering;
+  set hovering(bool value) {
+    assert(value != null);
+    if (value == _hovering) {
+      return;
+    }
+    _hovering = value;
+    _updateForHover(_hovering);
+  }
+
+  /// True if the slider is interactive and the start thumb is being
+  /// hovered over by a pointer.
+  bool _hoveringStartThumb = false;
+  bool get hoveringStartThumb => _hoveringStartThumb;
+  set hoveringStartThumb(bool value) {
+    assert(value != null);
+    if (value == _hoveringStartThumb) {
+      return;
+    }
+    _hoveringStartThumb = value;
+    _updateForHover(_hovering);
+  }
+
+  /// True if the slider is interactive and the end thumb is being
+  /// hovered over by a pointer.
+  bool _hoveringEndThumb = false;
+  bool get hoveringEndThumb => _hoveringEndThumb;
+  set hoveringEndThumb(bool value) {
+    assert(value != null);
+    if (value == _hoveringEndThumb) {
+      return;
+    }
+    _hoveringEndThumb = value;
+    _updateForHover(_hovering);
+  }
+
+  void _updateForHover(bool hovered) {
+    // Only show overlay when pointer is hovering the thumb.
+    if (hovered && (hoveringStartThumb || hoveringEndThumb)) {
+      _state.overlayController.forward();
+    } else {
+      _state.overlayController.reverse();
+    }
+  }
+
   bool get showValueIndicator {
     switch (_sliderTheme.showValueIndicator!) {
       case ShowValueIndicator.onlyForDiscrete:
@@ -1253,6 +1366,14 @@ class _RenderRangeSlider extends RenderBox with RelayoutWhenSystemFontsChangeMix
       _drag.addPointer(event);
       _tap.addPointer(event);
     }
+    if (isEnabled) {
+      if (overlayStartRect != null) {
+        hoveringStartThumb = overlayStartRect!.contains(event.localPosition);
+      }
+      if (overlayEndRect != null) {
+        hoveringEndThumb = overlayEndRect!.contains(event.localPosition);
+      }
+    }
   }
 
   @override
@@ -1307,6 +1428,11 @@ class _RenderRangeSlider extends RenderBox with RelayoutWhenSystemFontsChangeMix
     );
     _startThumbCenter = Offset(trackRect.left + startVisualPosition * trackRect.width, trackRect.center.dy);
     _endThumbCenter = Offset(trackRect.left + endVisualPosition * trackRect.width, trackRect.center.dy);
+    if (isEnabled) {
+      final Size overlaySize = sliderTheme.overlayShape!.getPreferredSize(isEnabled, false);
+      overlayStartRect = Rect.fromCircle(center: _startThumbCenter, radius: overlaySize.width / 2.0);
+      overlayEndRect = Rect.fromCircle(center: _endThumbCenter, radius: overlaySize.width / 2.0);
+    }
 
     _sliderTheme.rangeTrackShape!.paint(
         context,
@@ -1326,7 +1452,7 @@ class _RenderRangeSlider extends RenderBox with RelayoutWhenSystemFontsChangeMix
     final Size resolvedscreenSize = screenSize.isEmpty ? size : screenSize;
 
     if (!_overlayAnimation.isDismissed) {
-      if (startThumbSelected) {
+      if (startThumbSelected || hoveringStartThumb) {
         _sliderTheme.overlayShape!.paint(
           context,
           _startThumbCenter,
@@ -1342,7 +1468,7 @@ class _RenderRangeSlider extends RenderBox with RelayoutWhenSystemFontsChangeMix
           sizeWithOverflow: resolvedscreenSize,
         );
       }
-      if (endThumbSelected) {
+      if (endThumbSelected || hoveringEndThumb) {
         _sliderTheme.overlayShape!.paint(
           context,
           _endThumbCenter,