iOS 13 scrollbar (#35829)

You can drag the cupertinoscrollbar if you pass an active scrollcontroller to the scrollbar.

packages/flutter/lib/src/gestures/long_press.dart

@@ -6,6 +6,7 @@ import 'arena.dart';
 import 'constants.dart';
 import 'events.dart';
 import 'recognizer.dart';
+import 'velocity_tracker.dart';
 
 /// Callback signature for [LongPressGestureRecognizer.onLongPress].
 ///
@@ -116,6 +117,7 @@ class LongPressEndDetails {
   const LongPressEndDetails({
     this.globalPosition = Offset.zero,
     Offset localPosition,
+    this.velocity = Velocity.zero,
   }) : assert(globalPosition != null),
        localPosition = localPosition ?? globalPosition;
 
@@ -124,6 +126,11 @@ class LongPressEndDetails {
 
   /// The local position at which the pointer contacted the screen.
   final Offset localPosition;
+
+  /// The pointer's velocity when it stopped contacting the screen.
+  ///
+  /// Defaults to zero if not specified in the constructor.
+  final Velocity velocity;
 }
 
 /// Recognizes when the user has pressed down at the same location for a long
@@ -214,6 +221,8 @@ class LongPressGestureRecognizer extends PrimaryPointerGestureRecognizer {
   ///    callback.
   GestureLongPressEndCallback onLongPressEnd;
 
+  VelocityTracker _velocityTracker;
+
   @override
   bool isPointerAllowed(PointerDownEvent event) {
     switch (event.buttons) {
@@ -242,6 +251,17 @@ class LongPressGestureRecognizer extends PrimaryPointerGestureRecognizer {
 
   @override
   void handlePrimaryPointer(PointerEvent event) {
+    if (!event.synthesized) {
+      if (event is PointerDownEvent) {
+        _velocityTracker = VelocityTracker();
+        _velocityTracker.addPosition(event.timeStamp, event.localPosition);
+      }
+      if (event is PointerMoveEvent) {
+        assert(_velocityTracker != null);
+        _velocityTracker.addPosition(event.timeStamp, event.localPosition);
+      }
+    }
+
     if (event is PointerUpEvent) {
       if (_longPressAccepted == true) {
         _checkLongPressEnd(event);
@@ -295,10 +315,16 @@ class LongPressGestureRecognizer extends PrimaryPointerGestureRecognizer {
 
   void _checkLongPressEnd(PointerEvent event) {
     assert(_initialButtons == kPrimaryButton);
+
+    final VelocityEstimate estimate = _velocityTracker.getVelocityEstimate();
+    final Velocity velocity = estimate == null ? Velocity.zero : Velocity(pixelsPerSecond: estimate.pixelsPerSecond);
     final LongPressEndDetails details = LongPressEndDetails(
       globalPosition: event.position,
       localPosition: event.localPosition,
+      velocity: velocity,
     );
+
+    _velocityTracker = null;
     if (onLongPressEnd != null)
       invokeCallback<void>('onLongPressEnd', () => onLongPressEnd(details));
     if (onLongPressUp != null)
@@ -309,6 +335,7 @@ class LongPressGestureRecognizer extends PrimaryPointerGestureRecognizer {
     _longPressAccepted = false;
     _longPressOrigin = null;
     _initialButtons = null;
+    _velocityTracker = null;
   }
 
   @override

packages/flutter/lib/src/gestures/monodrag.dart

@@ -184,7 +184,13 @@ abstract class DragGestureRecognizer extends OneSequenceGestureRecognizer {
   /// differentiate the direction of the drag.
   double _globalDistanceMoved;
 
-  bool _isFlingGesture(VelocityEstimate estimate);
+  /// Determines if a gesture is a fling or not based on velocity.
+  ///
+  /// A fling calls its gesture end callback with a velocity, allowing the
+  /// provider of the callback to respond by carrying the gesture forward with
+  /// inertia, for example.
+  bool isFlingGesture(VelocityEstimate estimate);
+
   Offset _getDeltaForDetails(Offset delta);
   double _getPrimaryValueFromOffset(Offset value);
   bool get _hasSufficientGlobalDistanceToAccept;
@@ -395,7 +401,7 @@ abstract class DragGestureRecognizer extends OneSequenceGestureRecognizer {
     void Function() debugReport;
 
     final VelocityEstimate estimate = tracker.getVelocityEstimate();
-    if (estimate != null && _isFlingGesture(estimate)) {
+    if (estimate != null && isFlingGesture(estimate)) {
       final Velocity velocity = Velocity(pixelsPerSecond: estimate.pixelsPerSecond)
         .clampMagnitude(minFlingVelocity ?? kMinFlingVelocity, maxFlingVelocity ?? kMaxFlingVelocity);
       details = DragEndDetails(
@@ -457,7 +463,7 @@ class VerticalDragGestureRecognizer extends DragGestureRecognizer {
   }) : super(debugOwner: debugOwner, kind: kind);
 
   @override
-  bool _isFlingGesture(VelocityEstimate estimate) {
+  bool isFlingGesture(VelocityEstimate estimate) {
     final double minVelocity = minFlingVelocity ?? kMinFlingVelocity;
     final double minDistance = minFlingDistance ?? kTouchSlop;
     return estimate.pixelsPerSecond.dy.abs() > minVelocity && estimate.offset.dy.abs() > minDistance;
@@ -496,7 +502,7 @@ class HorizontalDragGestureRecognizer extends DragGestureRecognizer {
   }) : super(debugOwner: debugOwner, kind: kind);
 
   @override
-  bool _isFlingGesture(VelocityEstimate estimate) {
+  bool isFlingGesture(VelocityEstimate estimate) {
     final double minVelocity = minFlingVelocity ?? kMinFlingVelocity;
     final double minDistance = minFlingDistance ?? kTouchSlop;
     return estimate.pixelsPerSecond.dx.abs() > minVelocity && estimate.offset.dx.abs() > minDistance;
@@ -529,7 +535,7 @@ class PanGestureRecognizer extends DragGestureRecognizer {
   PanGestureRecognizer({ Object debugOwner }) : super(debugOwner: debugOwner);
 
   @override
-  bool _isFlingGesture(VelocityEstimate estimate) {
+  bool isFlingGesture(VelocityEstimate estimate) {
     final double minVelocity = minFlingVelocity ?? kMinFlingVelocity;
     final double minDistance = minFlingDistance ?? kTouchSlop;
     return estimate.pixelsPerSecond.distanceSquared > minVelocity * minVelocity

packages/flutter/lib/src/widgets/scrollbar.dart

@@ -11,6 +11,7 @@ import 'package:flutter/rendering.dart';
 import 'scroll_metrics.dart';
 
 const double _kMinThumbExtent = 18.0;
+const double _kMinInteractiveSize = 48.0;
 
 /// A [CustomPainter] for painting scrollbars.
 ///
@@ -77,7 +78,7 @@ class ScrollbarPainter extends ChangeNotifier implements CustomPainter {
   final TextDirection textDirection;
 
   /// Thickness of the scrollbar in its cross-axis in logical pixels. Mustn't be null.
-  final double thickness;
+  double thickness;
 
   /// An opacity [Animation] that dictates the opacity of the thumb.
   /// Changes in value of this [Listenable] will automatically trigger repaints.
@@ -98,7 +99,7 @@ class ScrollbarPainter extends ChangeNotifier implements CustomPainter {
   /// [Radius] of corners if the scrollbar should have rounded corners.
   ///
   /// Scrollbar will be rectangular if [radius] is null.
-  final Radius radius;
+  Radius radius;
 
   /// The amount of space by which to inset the scrollbar's start and end, as
   /// well as its side to the nearest edge, in logical pixels.
@@ -138,6 +139,7 @@ class ScrollbarPainter extends ChangeNotifier implements CustomPainter {
 
   ScrollMetrics _lastMetrics;
   AxisDirection _lastAxisDirection;
+  Rect _thumbRect;
 
   /// Update with new [ScrollMetrics]. The scrollbar will show and redraw itself
   /// based on these new metrics.
@@ -152,6 +154,13 @@ class ScrollbarPainter extends ChangeNotifier implements CustomPainter {
     notifyListeners();
   }
 
+  /// Update and redraw with new scrollbar thickness and radius.
+  void updateThickness(double nextThickness, Radius nextRadius) {
+    thickness = nextThickness;
+    radius = nextRadius;
+    notifyListeners();
+  }
+
   Paint get _paint {
     return Paint()..color =
         color.withOpacity(color.opacity * fadeoutOpacityAnimation.value);
@@ -188,35 +197,28 @@ class ScrollbarPainter extends ChangeNotifier implements CustomPainter {
         break;
     }
 
-    final Rect thumbRect = Offset(x, y) & thumbSize;
+    _thumbRect = Offset(x, y) & thumbSize;
     if (radius == null)
-      canvas.drawRect(thumbRect, _paint);
+      canvas.drawRect(_thumbRect, _paint);
     else
-      canvas.drawRRect(RRect.fromRectAndRadius(thumbRect, radius), _paint);
+      canvas.drawRRect(RRect.fromRectAndRadius(_thumbRect, radius), _paint);
   }
 
-  double _thumbExtent(
-    double mainAxisPadding,
-    double extentInside,
-    double contentExtent,
-    double beforeExtent,
-    double afterExtent,
-    double trackExtent
-  ) {
+  double _thumbExtent() {
     // Thumb extent reflects fraction of content visible, as long as this
     // isn't less than the absolute minimum size.
-    // contentExtent >= viewportDimension, so (contentExtent - mainAxisPadding) > 0
-    final double fractionVisible = ((extentInside - mainAxisPadding) / (contentExtent - mainAxisPadding))
+    // _totalContentExtent >= viewportDimension, so (_totalContentExtent - _mainAxisPadding) > 0
+    final double fractionVisible = ((_lastMetrics.extentInside - _mainAxisPadding) / (_totalContentExtent - _mainAxisPadding))
       .clamp(0.0, 1.0);
 
     final double thumbExtent = math.max(
-      math.min(trackExtent, minOverscrollLength),
-      trackExtent * fractionVisible
+      math.min(_trackExtent, minOverscrollLength),
+      _trackExtent * fractionVisible
     );
 
-    final double fractionOverscrolled = 1.0 - extentInside / _lastMetrics.viewportDimension;
-    final double safeMinLength = math.min(minLength, trackExtent);
-    final double newMinLength = (beforeExtent > 0 && afterExtent > 0)
+    final double fractionOverscrolled = 1.0 - _lastMetrics.extentInside / _lastMetrics.viewportDimension;
+    final double safeMinLength = math.min(minLength, _trackExtent);
+    final double newMinLength = (_beforeExtent > 0 && _afterExtent > 0)
       // Thumb extent is no smaller than minLength if scrolling normally.
       ? safeMinLength
       // User is overscrolling. Thumb extent can be less than minLength
@@ -234,7 +236,7 @@ class ScrollbarPainter extends ChangeNotifier implements CustomPainter {
 
     // The `thumbExtent` should be no greater than `trackSize`, otherwise
     // the scrollbar may scroll towards the wrong direction.
-    return thumbExtent.clamp(newMinLength, trackExtent);
+    return thumbExtent.clamp(newMinLength, _trackExtent);
   }
 
   @override
@@ -243,6 +245,47 @@ class ScrollbarPainter extends ChangeNotifier implements CustomPainter {
     super.dispose();
   }
 
+  bool get _isVertical => _lastAxisDirection == AxisDirection.down || _lastAxisDirection == AxisDirection.up;
+  bool get _isReversed => _lastAxisDirection == AxisDirection.up || _lastAxisDirection == AxisDirection.left;
+  // The amount of scroll distance before and after the current position.
+  double get _beforeExtent => _isReversed ? _lastMetrics.extentAfter : _lastMetrics.extentBefore;
+  double get _afterExtent => _isReversed ? _lastMetrics.extentBefore : _lastMetrics.extentAfter;
+  // Padding of the thumb track.
+  double get _mainAxisPadding => _isVertical ? padding.vertical : padding.horizontal;
+  // The size of the thumb track.
+  double get _trackExtent => _lastMetrics.viewportDimension - 2 * mainAxisMargin - _mainAxisPadding;
+
+  // The total size of the scrollable content.
+  double get _totalContentExtent {
+    return _lastMetrics.maxScrollExtent
+      - _lastMetrics.minScrollExtent
+      + _lastMetrics.viewportDimension;
+  }
+
+  /// Convert between a thumb track position and the corresponding scroll
+  /// position.
+  ///
+  /// thumbOffsetLocal is a position in the thumb track. Cannot be null.
+  double getTrackToScroll(double thumbOffsetLocal) {
+    assert(thumbOffsetLocal != null);
+    final double scrollableExtent = _lastMetrics.maxScrollExtent - _lastMetrics.minScrollExtent;
+    final double thumbMovableExtent = _trackExtent - _thumbExtent();
+
+    return scrollableExtent * thumbOffsetLocal / thumbMovableExtent;
+  }
+
+  // Converts between a scroll position and the corresponding position in the
+  // thumb track.
+  double _getScrollToTrack(ScrollMetrics metrics, double thumbExtent) {
+    final double scrollableExtent = metrics.maxScrollExtent - metrics.minScrollExtent;
+
+    final double fractionPast = (scrollableExtent > 0)
+      ? ((metrics.pixels - metrics.minScrollExtent) / scrollableExtent).clamp(0.0, 1.0)
+      : 0;
+
+    return (_isReversed ? 1 - fractionPast : fractionPast) * (_trackExtent - thumbExtent);
+  }
+
   @override
   void paint(Canvas canvas, Size size) {
     if (_lastAxisDirection == null
@@ -250,45 +293,47 @@ class ScrollbarPainter extends ChangeNotifier implements CustomPainter {
         || fadeoutOpacityAnimation.value == 0.0)
       return;
 
-    final bool isVertical = _lastAxisDirection == AxisDirection.down || _lastAxisDirection == AxisDirection.up;
-    final bool isReversed = _lastAxisDirection == AxisDirection.up || _lastAxisDirection == AxisDirection.left;
-
-    final double mainAxisPadding = isVertical ? padding.vertical : padding.horizontal;
-    // The size of the scrollable area.
-    final double trackExtent = _lastMetrics.viewportDimension - 2 * mainAxisMargin - mainAxisPadding;
-
     // Skip painting if there's not enough space.
-    if (_lastMetrics.viewportDimension <= mainAxisPadding || trackExtent <= 0) {
+    if (_lastMetrics.viewportDimension <= _mainAxisPadding || _trackExtent <= 0) {
       return;
     }
 
-    final double totalContentExtent =
-      _lastMetrics.maxScrollExtent
-      - _lastMetrics.minScrollExtent
-      + _lastMetrics.viewportDimension;
-
-    final double beforeExtent = isReversed ? _lastMetrics.extentAfter : _lastMetrics.extentBefore;
-    final double afterExtent = isReversed ? _lastMetrics.extentBefore : _lastMetrics.extentAfter;
-
-    final double thumbExtent = _thumbExtent(mainAxisPadding, _lastMetrics.extentInside, totalContentExtent,
-      beforeExtent, afterExtent, trackExtent);
-
-    final double beforePadding = isVertical ? padding.top : padding.left;
-    final double scrollableExtent = _lastMetrics.maxScrollExtent - _lastMetrics.minScrollExtent;
-
-    final double fractionPast = (scrollableExtent > 0)
-      ? ((_lastMetrics.pixels - _lastMetrics.minScrollExtent) / scrollableExtent).clamp(0.0, 1.0)
-      : 0;
-
-    final double thumbOffset = (isReversed ? 1 - fractionPast : fractionPast) * (trackExtent - thumbExtent)
-      + mainAxisMargin + beforePadding;
+    final double beforePadding = _isVertical ? padding.top : padding.left;
+    final double thumbExtent = _thumbExtent();
+    final double thumbOffsetLocal = _getScrollToTrack(_lastMetrics, thumbExtent);
+    final double thumbOffset = thumbOffsetLocal + mainAxisMargin + beforePadding;
 
     return _paintThumbCrossAxis(canvas, size, thumbOffset, thumbExtent, _lastAxisDirection);
   }
 
-  // Scrollbars are (currently) not interactive.
+  /// Same as hitTest, but includes some padding to make sure that the region
+  /// isn't too small to be interacted with by the user.
+  bool hitTestInteractive(Offset position) {
+    if (_thumbRect == null) {
+      return false;
+    }
+    // The thumb is not able to be hit when transparent.
+    if (fadeoutOpacityAnimation.value == 0.0) {
+      return false;
+    }
+    final Rect interactiveThumbRect = _thumbRect.expandToInclude(
+      Rect.fromCircle(center: _thumbRect.center, radius: _kMinInteractiveSize / 2),
+    );
+    return interactiveThumbRect.contains(position);
+  }
+
+  // Scrollbars can be interactive in Cupertino.
   @override
-  bool hitTest(Offset position) => null;
+  bool hitTest(Offset position) {
+    if (_thumbRect == null) {
+      return null;
+    }
+    // The thumb is not able to be hit when transparent.
+    if (fadeoutOpacityAnimation.value == 0.0) {
+      return false;
+    }
+    return _thumbRect.contains(position);
+  }
 
   @override
   bool shouldRepaint(ScrollbarPainter old) {

packages/flutter/lib/src/widgets/text_selection.dart

@@ -6,7 +6,6 @@ import 'dart:async';
 import 'dart:math' as math;
 
 import 'package:flutter/foundation.dart';
-import 'package:flutter/gestures.dart' show kDoubleTapTimeout, kDoubleTapSlop;
 import 'package:flutter/gestures.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/scheduler.dart';

packages/flutter/test/cupertino/scrollbar_paint_test.dart

@@ -12,6 +12,7 @@ const Color _kScrollbarColor = Color(0x99777777);
 // The `y` offset has to be larger than `ScrollDragController._bigThresholdBreakDistance`
 // to prevent [motionStartDistanceThreshold] from affecting the actual drag distance.
 const Offset _kGestureOffset = Offset(0, -25);
+const Radius _kScrollbarRadius = Radius.circular(1.5);
 
 void main() {
   testWidgets('Paints iOS spec', (WidgetTester tester) async {
@@ -47,7 +48,7 @@ void main() {
           // Fraction in viewport * scrollbar height - top, bottom margin.
           600.0 / 4000.0 * (600.0 - 2 * 3),
         ),
-        const Radius.circular(1.25),
+        _kScrollbarRadius,
       ),
     ));
   });
@@ -92,7 +93,7 @@ void main() {
           // where Fraction visible = (viewport size - padding) / content size
           (600.0 - 34 - 44 - 20) / 4000.0 * (600.0 - 2 * 3 - 34 - 44 - 20),
         ),
-        const Radius.circular(1.25),
+        _kScrollbarRadius,
       ),
     ));
   });

packages/flutter/test/cupertino/scrollbar_test.dart

@@ -8,6 +8,10 @@ import 'package:flutter_test/flutter_test.dart';
 import '../rendering/mock_canvas.dart';
 
 void main() {
+  const Duration _kScrollbarTimeToFade = Duration(milliseconds: 1200);
+  const Duration _kScrollbarFadeDuration = Duration(milliseconds: 250);
+  const Duration _kScrollbarResizeDuration = Duration(milliseconds: 150);
+
   testWidgets('Scrollbar never goes away until finger lift', (WidgetTester tester) async {
     await tester.pumpWidget(
       const Directionality(
@@ -37,12 +41,132 @@ void main() {
     ));
 
     await gesture.up();
-    await tester.pump(const Duration(milliseconds: 200));
-    await tester.pump(const Duration(milliseconds: 200));
+    await tester.pump(_kScrollbarTimeToFade);
+    await tester.pump(_kScrollbarFadeDuration * 0.5);
 
     // Opacity going down now.
     expect(find.byType(CupertinoScrollbar), paints..rrect(
-      color: const Color(0x15777777),
+      color: const Color(0x77777777),
     ));
   });
+
+  testWidgets('Scrollbar thumb can be dragged with long press', (WidgetTester tester) async {
+    final ScrollController scrollController = ScrollController();
+    await tester.pumpWidget(
+      Directionality(
+        textDirection: TextDirection.ltr,
+        child: MediaQuery(
+          data: const MediaQueryData(),
+          child: PrimaryScrollController(
+            controller: scrollController,
+            child: CupertinoScrollbar(
+              controller: scrollController,
+              child: const SingleChildScrollView(child: SizedBox(width: 4000.0, height: 4000.0)),
+            ),
+          ),
+        ),
+      ),
+    );
+
+    expect(scrollController.offset, 0.0);
+
+    // Scroll a bit.
+    const double scrollAmount = 10.0;
+    final TestGesture scrollGesture = await tester.startGesture(tester.getCenter(find.byType(SingleChildScrollView)));
+    // Scroll down by swiping up.
+    await scrollGesture.moveBy(const Offset(0.0, -scrollAmount));
+    await tester.pump();
+    await tester.pump(const Duration(milliseconds: 500));
+    // Scrollbar thumb is fully showing and scroll offset has moved by
+    // scrollAmount.
+    expect(find.byType(CupertinoScrollbar), paints..rrect(
+      color: const Color(0x99777777),
+    ));
+    expect(scrollController.offset, scrollAmount);
+    await scrollGesture.up();
+    await tester.pump();
+
+    // Longpress on the scrollbar thumb.
+    final TestGesture dragScrollbarGesture = await tester.startGesture(const Offset(796.0, 50.0));
+    await tester.pump(const Duration(milliseconds: 500));
+
+    // Drag the thumb down to scroll down.
+    await dragScrollbarGesture.moveBy(const Offset(0.0, scrollAmount));
+    await tester.pump(const Duration(milliseconds: 500));
+    await dragScrollbarGesture.up();
+    await tester.pumpAndSettle();
+
+    // The view has scrolled more than it would have by a swipe gesture of the
+    // same distance.
+    expect(scrollController.offset, greaterThan(scrollAmount * 2));
+    // The scrollbar thumb is still fully visible.
+    expect(find.byType(CupertinoScrollbar), paints..rrect(
+      color: const Color(0x99777777),
+    ));
+
+    // Let the thumb fade out so all timers have resolved.
+    await tester.pump(_kScrollbarTimeToFade);
+    await tester.pump(_kScrollbarFadeDuration);
+  });
+
+  testWidgets('Scrollbar thumb can be dragged by swiping in from right', (WidgetTester tester) async {
+    final ScrollController scrollController = ScrollController();
+    await tester.pumpWidget(
+      Directionality(
+        textDirection: TextDirection.ltr,
+        child: MediaQuery(
+          data: const MediaQueryData(),
+          child: PrimaryScrollController(
+            controller: scrollController,
+            child: CupertinoScrollbar(
+              controller: scrollController,
+              child: const SingleChildScrollView(child: SizedBox(width: 4000.0, height: 4000.0)),
+            ),
+          ),
+        ),
+      ),
+    );
+
+    expect(scrollController.offset, 0.0);
+
+    // Scroll a bit.
+    const double scrollAmount = 10.0;
+    final TestGesture scrollGesture = await tester.startGesture(tester.getCenter(find.byType(SingleChildScrollView)));
+    // Scroll down by swiping up.
+    await scrollGesture.moveBy(const Offset(0.0, -scrollAmount));
+    await tester.pump();
+    await tester.pump(const Duration(milliseconds: 500));
+    // Scrollbar thumb is fully showing and scroll offset has moved by
+    // scrollAmount.
+    expect(find.byType(CupertinoScrollbar), paints..rrect(
+      color: const Color(0x99777777),
+    ));
+    expect(scrollController.offset, scrollAmount);
+    await scrollGesture.up();
+    await tester.pump();
+
+    // Drag in from the right side on top of the scrollbar thumb.
+    final TestGesture dragScrollbarGesture = await tester.startGesture(const Offset(796.0, 50.0));
+    await tester.pump();
+    await dragScrollbarGesture.moveBy(const Offset(-50.0, 0.0));
+    await tester.pump(_kScrollbarResizeDuration);
+
+    // Drag the thumb down to scroll down.
+    await dragScrollbarGesture.moveBy(const Offset(0.0, scrollAmount));
+    await tester.pump(const Duration(milliseconds: 500));
+    await dragScrollbarGesture.up();
+    await tester.pumpAndSettle();
+
+    // The view has scrolled more than it would have by a swipe gesture of the
+    // same distance.
+    expect(scrollController.offset, greaterThan(scrollAmount * 2));
+    // The scrollbar thumb is still fully visible.
+    expect(find.byType(CupertinoScrollbar), paints..rrect(
+      color: const Color(0x99777777),
+    ));
+
+    // Let the thumb fade out so all timers have resolved.
+    await tester.pump(_kScrollbarTimeToFade);
+    await tester.pump(_kScrollbarFadeDuration);
+  });
 }