overscroll_indicator.dart 37.4 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
2 3 4 5 6 7 8
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'dart:async' show Timer;
import 'dart:math' as math;

import 'package:flutter/foundation.dart';
9
import 'package:flutter/physics.dart' show Tolerance, nearEqual;
10 11
import 'package:flutter/rendering.dart';
import 'package:flutter/scheduler.dart';
12 13 14

import 'basic.dart';
import 'framework.dart';
15
import 'media_query.dart';
16 17 18
import 'notification_listener.dart';
import 'scroll_notification.dart';
import 'ticker_provider.dart';
19
import 'transitions.dart';
20

21 22 23 24
/// A visual indication that a scroll view has overscrolled.
///
/// A [GlowingOverscrollIndicator] listens for [ScrollNotification]s in order
/// to control the overscroll indication. These notifications are typically
25
/// generated by a [ScrollView], such as a [ListView] or a [GridView].
26 27 28 29 30 31
///
/// [GlowingOverscrollIndicator] generates [OverscrollIndicatorNotification]
/// before showing an overscroll indication. To prevent the indicator from
/// showing the indication, call [OverscrollIndicatorNotification.disallowGlow]
/// on the notification.
///
32
/// Created automatically by [ScrollBehavior.buildOverscrollIndicator] on platforms
33
/// (e.g., Android) that commonly use this type of overscroll indication.
34
///
35 36
/// In a [MaterialApp], the edge glow color is the overall theme's
/// [ColorScheme.secondary] color.
37
///
38 39
/// ## Customizing the Glow Position for Advanced Scroll Views
///
40 41 42 43 44 45
/// When building a [CustomScrollView] with a [GlowingOverscrollIndicator], the
/// indicator will apply to the entire scrollable area, regardless of what
/// slivers the CustomScrollView contains.
///
/// For example, if your CustomScrollView contains a SliverAppBar in the first
/// position, the GlowingOverscrollIndicator will overlay the SliverAppBar. To
46 47 48 49 50
/// manipulate the position of the GlowingOverscrollIndicator in this case,
/// you can either make use of a [NotificationListener] and provide a
/// [OverscrollIndicatorNotification.paintOffset] to the
/// notification, or use a [NestedScrollView].
///
51
/// {@tool dartpad}
52 53 54 55 56
/// This example demonstrates how to use a [NotificationListener] to manipulate
/// the placement of a [GlowingOverscrollIndicator] when building a
/// [CustomScrollView]. Drag the scrollable to see the bounds of the overscroll
/// indicator.
///
57
/// ** See code in examples/api/lib/widgets/overscroll_indicator/glowing_overscroll_indicator.0.dart **
58
/// {@end-tool}
59
///
60
/// {@tool dartpad}
61 62 63 64 65
/// This example demonstrates how to use a [NestedScrollView] to manipulate the
/// placement of a [GlowingOverscrollIndicator] when building a
/// [CustomScrollView]. Drag the scrollable to see the bounds of the overscroll
/// indicator.
///
66
/// ** See code in examples/api/lib/widgets/overscroll_indicator/glowing_overscroll_indicator.1.dart **
67
/// {@end-tool}
68 69 70 71
///
/// See also:
///
///  * [OverscrollIndicatorNotification], which can be used to manipulate the
72
///    glow position or prevent the glow from being painted at all.
73
///  * [NotificationListener], to listen for the
74 75
///    [OverscrollIndicatorNotification].
///  * [StretchingOverscrollIndicator], a Material Design overscroll indicator.
76
class GlowingOverscrollIndicator extends StatefulWidget {
77 78 79 80 81 82
  /// Creates a visual indication that a scroll view has overscrolled.
  ///
  /// In order for this widget to display an overscroll indication, the [child]
  /// widget must contain a widget that generates a [ScrollNotification], such
  /// as a [ListView] or a [GridView].
  ///
83 84
  /// The [showLeading], [showTrailing], [axisDirection], [color], and
  /// [notificationPredicate] arguments must not be null.
85
  const GlowingOverscrollIndicator({
86
    super.key,
87 88
    this.showLeading = true,
    this.showTrailing = true,
89 90
    required this.axisDirection,
    required this.color,
91
    this.notificationPredicate = defaultScrollNotificationPredicate,
92
    this.child,
93 94 95 96
  }) : assert(showLeading != null),
       assert(showTrailing != null),
       assert(axisDirection != null),
       assert(color != null),
97
       assert(notificationPredicate != null);
98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120

  /// Whether to show the overscroll glow on the side with negative scroll
  /// offsets.
  ///
  /// For a vertical downwards viewport, this is the top side.
  ///
  /// Defaults to true.
  ///
  /// See [showTrailing] for the corresponding control on the other side of the
  /// viewport.
  final bool showLeading;

  /// Whether to show the overscroll glow on the side with positive scroll
  /// offsets.
  ///
  /// For a vertical downwards viewport, this is the bottom side.
  ///
  /// Defaults to true.
  ///
  /// See [showLeading] for the corresponding control on the other side of the
  /// viewport.
  final bool showTrailing;

121
  /// {@template flutter.overscroll.axisDirection}
122 123
  /// The direction of positive scroll offsets in the [Scrollable] whose
  /// overscrolls are to be visualized.
124
  /// {@endtemplate}
125 126
  final AxisDirection axisDirection;

127
  /// {@template flutter.overscroll.axis}
128 129
  /// The axis along which scrolling occurs in the [Scrollable] whose
  /// overscrolls are to be visualized.
130
  /// {@endtemplate}
131 132 133 134
  Axis get axis => axisDirectionToAxis(axisDirection);

  /// The color of the glow. The alpha channel is ignored.
  final Color color;
135

136
  /// {@template flutter.overscroll.notificationPredicate}
137 138 139 140
  /// A check that specifies whether a [ScrollNotification] should be
  /// handled by this widget.
  ///
  /// By default, checks whether `notification.depth == 0`. Set it to something
141 142
  /// else for more complicated layouts, such as nested [ScrollView]s.
  /// {@endtemplate}
143
  final ScrollNotificationPredicate notificationPredicate;
144

145 146 147 148
  /// The widget below this widget in the tree.
  ///
  /// The overscroll indicator will paint on top of this child. This child (and its
  /// subtree) should include a source of [ScrollNotification] notifications.
149 150
  ///
  /// Typically a [GlowingOverscrollIndicator] is created by a
151
  /// [ScrollBehavior.buildOverscrollIndicator] method, in which case
152
  /// the child is usually the one provided as an argument to that method.
153
  final Widget? child;
154 155

  @override
156
  State<GlowingOverscrollIndicator> createState() => _GlowingOverscrollIndicatorState();
157 158

  @override
159 160
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
161
    properties.add(EnumProperty<AxisDirection>('axisDirection', axisDirection));
162
    final String showDescription;
163
    if (showLeading && showTrailing) {
164
      showDescription = 'both sides';
165
    } else if (showLeading) {
166
      showDescription = 'leading side only';
167
    } else if (showTrailing) {
168
      showDescription = 'trailing side only';
169
    } else {
170
      showDescription = 'neither side (!)';
171
    }
172
    properties.add(MessageProperty('show', showDescription));
173
    properties.add(ColorProperty('color', color, showName: false));
174 175 176 177
  }
}

class _GlowingOverscrollIndicatorState extends State<GlowingOverscrollIndicator> with TickerProviderStateMixin {
178 179 180
  _GlowController? _leadingController;
  _GlowController? _trailingController;
  Listenable? _leadingAndTrailingListener;
181 182 183 184

  @override
  void initState() {
    super.initState();
185 186
    _leadingController = _GlowController(vsync: this, color: widget.color, axis: widget.axis);
    _trailingController = _GlowController(vsync: this, color: widget.color, axis: widget.axis);
187
    _leadingAndTrailingListener = Listenable.merge(<Listenable>[_leadingController!, _trailingController!]);
188 189 190
  }

  @override
191
  void didUpdateWidget(GlowingOverscrollIndicator oldWidget) {
192
    super.didUpdateWidget(oldWidget);
193
    if (oldWidget.color != widget.color || oldWidget.axis != widget.axis) {
194 195 196 197
      _leadingController!.color = widget.color;
      _leadingController!.axis = widget.axis;
      _trailingController!.color = widget.color;
      _trailingController!.axis = widget.axis;
198 199 200
    }
  }

201
  Type? _lastNotificationType;
202 203
  final Map<bool, bool> _accepted = <bool, bool>{false: true, true: true};

Adam Barth's avatar
Adam Barth committed
204
  bool _handleScrollNotification(ScrollNotification notification) {
205
    if (!widget.notificationPredicate(notification)) {
206
      return false;
207
    }
208 209 210 211 212 213

    // Update the paint offset with the current scroll position. This makes
    // sure that the glow effect correctly scrolls in line with the current
    // scroll, e.g. when scrolling in the opposite direction again to hide
    // the glow. Otherwise, the glow would always stay in a fixed position,
    // even if the top of the content already scrolled away.
214 215 216 217 218
    // For example (CustomScrollView with sliver before center), the scroll
    // extent is [-200.0, 300.0], scroll in the opposite direction with 10.0 pixels
    // before glow disappears, so the current pixels is -190.0,
    // in this case, we should move the glow up 10.0 pixels and should not
    // overflow the scrollable widget's edge. https://github.com/flutter/flutter/issues/64149.
219 220 221 222
    _leadingController!._paintOffsetScrollPixels =
      -math.min(notification.metrics.pixels - notification.metrics.minScrollExtent, _leadingController!._paintOffset);
    _trailingController!._paintOffsetScrollPixels =
      -math.min(notification.metrics.maxScrollExtent - notification.metrics.pixels, _trailingController!._paintOffset);
223

224
    if (notification is OverscrollNotification) {
225
      _GlowController? controller;
226 227 228 229 230 231 232
      if (notification.overscroll < 0.0) {
        controller = _leadingController;
      } else if (notification.overscroll > 0.0) {
        controller = _trailingController;
      } else {
        assert(false);
      }
233
      final bool isLeading = controller == _leadingController;
234
      if (_lastNotificationType is! OverscrollNotification) {
235
        final OverscrollIndicatorNotification confirmationNotification = OverscrollIndicatorNotification(leading: isLeading);
236
        confirmationNotification.dispatch(context);
237
        _accepted[isLeading] = confirmationNotification.accepted;
238 239
        if (_accepted[isLeading]!) {
          controller!._paintOffset = confirmationNotification.paintOffset;
240
        }
241
      }
242
      assert(controller != null);
243
      assert(notification.metrics.axis == widget.axis);
244
      if (_accepted[isLeading]!) {
245 246
        if (notification.velocity != 0.0) {
          assert(notification.dragDetails == null);
247
          controller!.absorbImpact(notification.velocity.abs());
248 249 250
        } else {
          assert(notification.overscroll != 0.0);
          if (notification.dragDetails != null) {
251
            assert(notification.dragDetails!.globalPosition != null);
252
            final RenderBox renderer = notification.context!.findRenderObject()! as RenderBox;
253 254 255
            assert(renderer != null);
            assert(renderer.hasSize);
            final Size size = renderer.size;
256
            final Offset position = renderer.globalToLocal(notification.dragDetails!.globalPosition);
257
            switch (notification.metrics.axis) {
258
              case Axis.horizontal:
259
                controller!.pull(notification.overscroll.abs(), size.width, clampDouble(position.dy, 0.0, size.height), size.height);
260 261
                break;
              case Axis.vertical:
262
                controller!.pull(notification.overscroll.abs(), size.height, clampDouble(position.dx, 0.0, size.width), size.width);
263 264
                break;
            }
265 266 267 268
          }
        }
      }
    } else if (notification is ScrollEndNotification || notification is ScrollUpdateNotification) {
269 270 271
      // Using dynamic here to avoid layer violations of importing
      // drag_details.dart from gestures.
      // ignore: avoid_dynamic_calls
272
      if ((notification as dynamic).dragDetails != null) {
273 274
        _leadingController!.scrollEnd();
        _trailingController!.scrollEnd();
275 276
      }
    }
277
    _lastNotificationType = notification.runtimeType;
278 279 280 281 282
    return false;
  }

  @override
  void dispose() {
283 284
    _leadingController!.dispose();
    _trailingController!.dispose();
285 286 287 288 289
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
290
    return NotificationListener<ScrollNotification>(
291
      onNotification: _handleScrollNotification,
292 293 294
      child: RepaintBoundary(
        child: CustomPaint(
          foregroundPainter: _GlowingOverscrollIndicatorPainter(
295 296 297
            leadingController: widget.showLeading ? _leadingController : null,
            trailingController: widget.showTrailing ? _trailingController : null,
            axisDirection: widget.axisDirection,
298
            repaint: _leadingAndTrailingListener,
299
          ),
300
          child: RepaintBoundary(
301
            child: widget.child,
302 303 304 305 306 307 308 309 310 311 312 313 314 315 316
          ),
        ),
      ),
    );
  }
}

// The Glow logic is a port of the logic in the following file:
// https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/widget/EdgeEffect.java
// as of December 2016.

enum _GlowState { idle, absorb, pull, recede }

class _GlowController extends ChangeNotifier {
  _GlowController({
317 318 319
    required TickerProvider vsync,
    required Color color,
    required Axis axis,
320 321 322 323
  }) : assert(vsync != null),
       assert(color != null),
       assert(axis != null),
       _color = color,
324
       _axis = axis {
325
    _glowController = AnimationController(vsync: vsync)
326
      ..addStatusListener(_changePhase);
327
    final Animation<double> decelerator = CurvedAnimation(
328 329 330
      parent: _glowController,
      curve: Curves.decelerate,
    )..addListener(notifyListeners);
331 332
    _glowOpacity = decelerator.drive(_glowOpacityTween);
    _glowSize = decelerator.drive(_glowSizeTween);
333 334 335 336 337
    _displacementTicker = vsync.createTicker(_tickDisplacement);
  }

  // animation of the main axis direction
  _GlowState _state = _GlowState.idle;
338 339
  late final AnimationController _glowController;
  Timer? _pullRecedeTimer;
340 341
  double _paintOffset = 0.0;
  double _paintOffsetScrollPixels = 0.0;
342 343

  // animation values
344
  final Tween<double> _glowOpacityTween = Tween<double>(begin: 0.0, end: 0.0);
345
  late final Animation<double> _glowOpacity;
346
  final Tween<double> _glowSizeTween = Tween<double>(begin: 0.0, end: 0.0);
347
  late final Animation<double> _glowSize;
348 349

  // animation of the cross axis position
350 351
  late final Ticker _displacementTicker;
  Duration? _displacementTickerLastElapsed;
352 353 354 355 356 357 358 359 360 361
  double _displacementTarget = 0.5;
  double _displacement = 0.5;

  // tracking the pull distance
  double _pullDistance = 0.0;

  Color get color => _color;
  Color _color;
  set color(Color value) {
    assert(color != null);
362
    if (color == value) {
363
      return;
364
    }
365 366 367 368 369 370 371 372
    _color = value;
    notifyListeners();
  }

  Axis get axis => _axis;
  Axis _axis;
  set axis(Axis value) {
    assert(axis != null);
373
    if (axis == value) {
374
      return;
375
    }
376 377 378 379
    _axis = value;
    notifyListeners();
  }

380 381 382 383
  static const Duration _recedeTime = Duration(milliseconds: 600);
  static const Duration _pullTime = Duration(milliseconds: 167);
  static const Duration _pullHoldTime = Duration(milliseconds: 167);
  static const Duration _pullDecayTime = Duration(milliseconds: 2000);
384
  static final Duration _crossAxisHalfTime = Duration(microseconds: (Duration.microsecondsPerSecond / 60.0).round());
385 386 387 388

  static const double _maxOpacity = 0.5;
  static const double _pullOpacityGlowFactor = 0.8;
  static const double _velocityGlowFactor = 0.00006;
389 390
  static const double _sqrt3 = 1.73205080757; // const math.sqrt(3)
  static const double _widthToHeightFactor = (3.0 / 4.0) * (2.0 - _sqrt3);
391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410

  // absorbed velocities are clamped to the range _minVelocity.._maxVelocity
  static const double _minVelocity = 100.0; // logical pixels per second
  static const double _maxVelocity = 10000.0; // logical pixels per second

  @override
  void dispose() {
    _glowController.dispose();
    _displacementTicker.dispose();
    _pullRecedeTimer?.cancel();
    super.dispose();
  }

  /// Handle a scroll slamming into the edge at a particular velocity.
  ///
  /// The velocity must be positive.
  void absorbImpact(double velocity) {
    assert(velocity >= 0.0);
    _pullRecedeTimer?.cancel();
    _pullRecedeTimer = null;
411
    velocity = clampDouble(velocity, _minVelocity, _maxVelocity);
412
    _glowOpacityTween.begin = _state == _GlowState.idle ? 0.3 : _glowOpacity.value;
413
    _glowOpacityTween.end = clampDouble(velocity * _velocityGlowFactor, _glowOpacityTween.begin!, _maxOpacity);
414 415
    _glowSizeTween.begin = _glowSize.value;
    _glowSizeTween.end = math.min(0.025 + 7.5e-7 * velocity * velocity, 1.0);
416
    _glowController.duration = Duration(milliseconds: (0.15 + velocity * 0.02).round());
417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437
    _glowController.forward(from: 0.0);
    _displacement = 0.5;
    _state = _GlowState.absorb;
  }

  /// Handle a user-driven overscroll.
  ///
  /// The `overscroll` argument should be the scroll distance in logical pixels,
  /// the `extent` argument should be the total dimension of the viewport in the
  /// main axis in logical pixels, the `crossAxisOffset` argument should be the
  /// distance from the leading (left or top) edge of the cross axis of the
  /// viewport, and the `crossExtent` should be the size of the cross axis. For
  /// example, a pull of 50 pixels up the middle of a 200 pixel high and 100
  /// pixel wide vertical viewport should result in a call of `pull(50.0, 200.0,
  /// 50.0, 100.0)`. The `overscroll` value should be positive regardless of the
  /// direction.
  void pull(double overscroll, double extent, double crossAxisOffset, double crossExtent) {
    _pullRecedeTimer?.cancel();
    _pullDistance += overscroll / 200.0; // This factor is magic. Not clear why we need it to match Android.
    _glowOpacityTween.begin = _glowOpacity.value;
    _glowOpacityTween.end = math.min(_glowOpacity.value + overscroll / extent * _pullOpacityGlowFactor, _maxOpacity);
438
    final double height = math.min(extent, crossExtent * _widthToHeightFactor);
439
    _glowSizeTween.begin = _glowSize.value;
440
    _glowSizeTween.end = math.max(1.0 - 1.0 / (0.7 * math.sqrt(_pullDistance * height)), _glowSize.value);
441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460
    _displacementTarget = crossAxisOffset / crossExtent;
    if (_displacementTarget != _displacement) {
      if (!_displacementTicker.isTicking) {
        assert(_displacementTickerLastElapsed == null);
        _displacementTicker.start();
      }
    } else {
      _displacementTicker.stop();
      _displacementTickerLastElapsed = null;
    }
    _glowController.duration = _pullTime;
    if (_state != _GlowState.pull) {
      _glowController.forward(from: 0.0);
      _state = _GlowState.pull;
    } else {
      if (!_glowController.isAnimating) {
        assert(_glowController.value == 1.0);
        notifyListeners();
      }
    }
461
    _pullRecedeTimer = Timer(_pullHoldTime, () => _recede(_pullDecayTime));
462 463 464
  }

  void scrollEnd() {
465
    if (_state == _GlowState.pull) {
466
      _recede(_recedeTime);
467
    }
468 469 470
  }

  void _changePhase(AnimationStatus status) {
471
    if (status != AnimationStatus.completed) {
472
      return;
473
    }
474 475 476 477 478 479 480 481 482 483 484 485 486 487 488
    switch (_state) {
      case _GlowState.absorb:
        _recede(_recedeTime);
        break;
      case _GlowState.recede:
        _state = _GlowState.idle;
        _pullDistance = 0.0;
        break;
      case _GlowState.pull:
      case _GlowState.idle:
        break;
    }
  }

  void _recede(Duration duration) {
489
    if (_state == _GlowState.recede || _state == _GlowState.idle) {
490
      return;
491
    }
492 493 494 495 496 497 498 499 500 501 502 503 504
    _pullRecedeTimer?.cancel();
    _pullRecedeTimer = null;
    _glowOpacityTween.begin = _glowOpacity.value;
    _glowOpacityTween.end = 0.0;
    _glowSizeTween.begin = _glowSize.value;
    _glowSizeTween.end = 0.0;
    _glowController.duration = duration;
    _glowController.forward(from: 0.0);
    _state = _GlowState.recede;
  }

  void _tickDisplacement(Duration elapsed) {
    if (_displacementTickerLastElapsed != null) {
505
      final double t = (elapsed.inMicroseconds - _displacementTickerLastElapsed!.inMicroseconds).toDouble();
506 507 508 509 510 511 512 513 514 515 516 517
      _displacement = _displacementTarget - (_displacementTarget - _displacement) * math.pow(2.0, -t / _crossAxisHalfTime.inMicroseconds);
      notifyListeners();
    }
    if (nearEqual(_displacementTarget, _displacement, Tolerance.defaultTolerance.distance)) {
      _displacementTicker.stop();
      _displacementTickerLastElapsed = null;
    } else {
      _displacementTickerLastElapsed = elapsed;
    }
  }

  void paint(Canvas canvas, Size size) {
518
    if (_glowOpacity.value == 0.0) {
519
      return;
520
    }
521 522
    final double baseGlowScale = size.width > size.height ? size.height / size.width : 1.0;
    final double radius = size.width * 3.0 / 2.0;
523
    final double height = math.min(size.height, size.width * _widthToHeightFactor);
524
    final double scaleY = _glowSize.value * baseGlowScale;
525 526 527
    final Rect rect = Rect.fromLTWH(0.0, 0.0, size.width, height);
    final Offset center = Offset((size.width / 2.0) * (0.5 + _displacement), height - radius);
    final Paint paint = Paint()..color = color.withOpacity(_glowOpacity.value);
528
    canvas.save();
529
    canvas.translate(0.0, _paintOffset + _paintOffsetScrollPixels);
530 531 532 533 534
    canvas.scale(1.0, scaleY);
    canvas.clipRect(rect);
    canvas.drawCircle(center, radius, paint);
    canvas.restore();
  }
Ian Hickson's avatar
Ian Hickson committed
535 536 537 538 539

  @override
  String toString() {
    return '_GlowController(color: $color, axis: ${describeEnum(axis)})';
  }
540 541 542 543 544 545
}

class _GlowingOverscrollIndicatorPainter extends CustomPainter {
  _GlowingOverscrollIndicatorPainter({
    this.leadingController,
    this.trailingController,
546
    required this.axisDirection,
547 548
    super.repaint,
  });
549 550 551 552

  /// The controller for the overscroll glow on the side with negative scroll offsets.
  ///
  /// For a vertical downwards viewport, this is the top side.
553
  final _GlowController? leadingController;
554 555 556 557

  /// The controller for the overscroll glow on the side with positive scroll offsets.
  ///
  /// For a vertical downwards viewport, this is the bottom side.
558
  final _GlowController? trailingController;
559 560 561 562

  /// The direction of the viewport.
  final AxisDirection axisDirection;

563
  static const double piOver2 = math.pi / 2.0;
564

565
  void _paintSide(Canvas canvas, Size size, _GlowController? controller, AxisDirection axisDirection, GrowthDirection growthDirection) {
566
    if (controller == null) {
567
      return;
568
    }
569 570 571 572 573 574 575 576 577 578 579 580 581
    switch (applyGrowthDirectionToAxisDirection(axisDirection, growthDirection)) {
      case AxisDirection.up:
        controller.paint(canvas, size);
        break;
      case AxisDirection.down:
        canvas.save();
        canvas.translate(0.0, size.height);
        canvas.scale(1.0, -1.0);
        controller.paint(canvas, size);
        canvas.restore();
        break;
      case AxisDirection.left:
        canvas.save();
582 583
        canvas.rotate(piOver2);
        canvas.scale(1.0, -1.0);
584
        controller.paint(canvas, Size(size.height, size.width));
585 586 587 588
        canvas.restore();
        break;
      case AxisDirection.right:
        canvas.save();
589 590
        canvas.translate(size.width, 0.0);
        canvas.rotate(piOver2);
591
        controller.paint(canvas, Size(size.height, size.width));
592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607
        canvas.restore();
        break;
    }
  }

  @override
  void paint(Canvas canvas, Size size) {
    _paintSide(canvas, size, leadingController, axisDirection, GrowthDirection.reverse);
    _paintSide(canvas, size, trailingController, axisDirection, GrowthDirection.forward);
  }

  @override
  bool shouldRepaint(_GlowingOverscrollIndicatorPainter oldDelegate) {
    return oldDelegate.leadingController != leadingController
        || oldDelegate.trailingController != trailingController;
  }
Ian Hickson's avatar
Ian Hickson committed
608 609 610 611 612

  @override
  String toString() {
    return '_GlowingOverscrollIndicatorPainter($leadingController, $trailingController)';
  }
613
}
614

615
/// A Material Design visual indication that a scroll view has overscrolled.
616
///
617 618 619 620 621 622 623 624 625 626 627 628 629 630
/// A [StretchingOverscrollIndicator] listens for [ScrollNotification]s in order
/// to stretch the content of the [Scrollable]. These notifications are typically
/// generated by a [ScrollView], such as a [ListView] or a [GridView].
///
/// When triggered, the [StretchingOverscrollIndicator] generates an
/// [OverscrollIndicatorNotification] before showing an overscroll indication.
/// To prevent the indicator from showing the indication, call
/// [OverscrollIndicatorNotification.disallowIndicator] on the notification.
///
/// Created by [ScrollBehavior.buildOverscrollIndicator] on platforms
/// (e.g., Android) that commonly use this type of overscroll indication when
/// [ScrollBehavior.androidOverscrollIndicator] is
/// [AndroidOverscrollIndicator.stretch]. Otherwise, the default
/// [GlowingOverscrollIndicator] is applied.
631 632 633
/// [ScrollBehavior.androidOverscrollIndicator] is deprecated, use
/// [ThemeData.useMaterial3], or override
/// [ScrollBehavior.buildOverscrollIndicator] to choose the desired indicator.
634 635 636
///
/// See also:
///
637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652
///  * [OverscrollIndicatorNotification], which can be used to prevent the stretch
///    effect from being applied at all.
///  * [NotificationListener], to listen for the
///    [OverscrollIndicatorNotification].
///  * [GlowingOverscrollIndicator], the default overscroll indicator for
///    [TargetPlatform.android] and [TargetPlatform.fuchsia].
class StretchingOverscrollIndicator extends StatefulWidget {
  /// Creates a visual indication that a scroll view has overscrolled by
  /// applying a stretch transformation to the content.
  ///
  /// In order for this widget to display an overscroll indication, the [child]
  /// widget must contain a widget that generates a [ScrollNotification], such
  /// as a [ListView] or a [GridView].
  ///
  /// The [axisDirection] and [notificationPredicate] arguments must not be null.
  const StretchingOverscrollIndicator({
653
    super.key,
654 655
    required this.axisDirection,
    this.notificationPredicate = defaultScrollNotificationPredicate,
656
    this.clipBehavior = Clip.hardEdge,
657 658
    this.child,
  }) : assert(axisDirection != null),
659 660
       assert(notificationPredicate != null),
       assert(clipBehavior != null);
661 662 663 664 665 666 667 668 669 670

  /// {@macro flutter.overscroll.axisDirection}
  final AxisDirection axisDirection;

  /// {@macro flutter.overscroll.axis}
  Axis get axis => axisDirectionToAxis(axisDirection);

  /// {@macro flutter.overscroll.notificationPredicate}
  final ScrollNotificationPredicate notificationPredicate;

671 672 673 674 675
  /// {@macro flutter.material.Material.clipBehavior}
  ///
  /// Defaults to [Clip.hardEdge].
  final Clip clipBehavior;

676 677 678 679 680 681 682 683 684 685
  /// The widget below this widget in the tree.
  ///
  /// The overscroll indicator will apply a stretch effect to this child. This
  /// child (and its subtree) should include a source of [ScrollNotification]
  /// notifications.
  ///
  /// Typically a [StretchingOverscrollIndicator] is created by a
  /// [ScrollBehavior.buildOverscrollIndicator] method when opted-in using the
  /// [ScrollBehavior.androidOverscrollIndicator] flag. In this case
  /// the child is usually the one provided as an argument to that method.
686 687 688
  /// [ScrollBehavior.androidOverscrollIndicator] is deprecated, use
  /// [ThemeData.useMaterial3], or override
  /// [ScrollBehavior.buildOverscrollIndicator] to choose the desired indicator.
689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707
  final Widget? child;

  @override
  State<StretchingOverscrollIndicator> createState() => _StretchingOverscrollIndicatorState();

  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties.add(EnumProperty<AxisDirection>('axisDirection', axisDirection));
  }
}

class _StretchingOverscrollIndicatorState extends State<StretchingOverscrollIndicator> with TickerProviderStateMixin {
  late final _StretchController _stretchController = _StretchController(vsync: this);
  ScrollNotification? _lastNotification;
  OverscrollNotification? _lastOverscrollNotification;
  bool _accepted = true;

  bool _handleScrollNotification(ScrollNotification notification) {
708
    if (!widget.notificationPredicate(notification)) {
709
      return false;
710
    }
711 712 713 714 715 716

    if (notification is OverscrollNotification) {
      _lastOverscrollNotification = notification;
      if (_lastNotification.runtimeType is! OverscrollNotification) {
        final OverscrollIndicatorNotification confirmationNotification = OverscrollIndicatorNotification(leading: notification.overscroll < 0.0);
        confirmationNotification.dispatch(context);
717
        _accepted = confirmationNotification.accepted;
718 719 720 721 722 723 724 725 726 727
      }

      assert(notification.metrics.axis == widget.axis);
      if (_accepted) {
        if (notification.velocity != 0.0) {
          assert(notification.dragDetails == null);
          _stretchController.absorbImpact(notification.velocity.abs());
        } else {
          assert(notification.overscroll != 0.0);
          if (notification.dragDetails != null) {
728 729 730 731 732 733 734
            // We clamp the overscroll amount relative to the length of the viewport,
            // which is the furthest distance a single pointer could pull on the
            // screen. This is because more than one pointer will multiply the
            // amount of overscroll - https://github.com/flutter/flutter/issues/11884
            final double viewportDimension = notification.metrics.viewportDimension;
            final double distanceForPull =
              (notification.overscroll.abs() / viewportDimension) + _stretchController.pullDistance;
735
            final double clampedOverscroll = clampDouble(distanceForPull, 0, 1.0);
736
            _stretchController.pull(clampedOverscroll);
737 738 739
          }
        }
      }
740
    } else if (notification is ScrollEndNotification || notification is ScrollUpdateNotification) {
741 742 743 744 745 746
      _stretchController.scrollEnd();
    }
    _lastNotification = notification;
    return false;
  }

747
  AlignmentGeometry _getAlignmentForAxisDirection(double overscroll) {
748 749 750 751 752 753 754 755
    // Accounts for reversed scrollables by checking the AxisDirection
    switch (widget.axisDirection) {
      case AxisDirection.up:
        return overscroll > 0
            ? AlignmentDirectional.topCenter
            : AlignmentDirectional.bottomCenter;
      case AxisDirection.right:
        return overscroll > 0
756 757
            ? Alignment.centerRight
            : Alignment.centerLeft;
758 759 760 761 762 763
      case AxisDirection.down:
        return overscroll > 0
            ? AlignmentDirectional.bottomCenter
            : AlignmentDirectional.topCenter;
      case AxisDirection.left:
        return overscroll > 0
764 765
            ? Alignment.centerLeft
            : Alignment.centerRight;
766 767 768
    }
  }

769 770 771 772 773 774 775 776
  @override
  void dispose() {
    _stretchController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
777 778
    final Size size = MediaQuery.of(context).size;
    double mainAxisSize;
779 780 781 782 783 784 785 786 787 788 789 790
    return NotificationListener<ScrollNotification>(
      onNotification: _handleScrollNotification,
      child: AnimatedBuilder(
        animation: _stretchController,
        builder: (BuildContext context, Widget? child) {
          final double stretch = _stretchController.value;
          double x = 1.0;
          double y = 1.0;

          switch (widget.axis) {
            case Axis.horizontal:
              x += stretch;
791
              mainAxisSize = size.width;
792 793 794
              break;
            case Axis.vertical:
              y += stretch;
795
              mainAxisSize = size.height;
796 797 798
              break;
          }

799
          final AlignmentGeometry alignment = _getAlignmentForAxisDirection(
800 801 802
            _lastOverscrollNotification?.overscroll ?? 0.0
          );

803 804 805 806 807 808
          final double viewportDimension = _lastOverscrollNotification?.metrics.viewportDimension ?? mainAxisSize;

          final Widget transform = Transform(
            alignment: alignment,
            transform: Matrix4.diagonal3Values(x, y, 1.0),
            child: widget.child,
809
          );
810 811 812 813

          // Only clip if the viewport dimension is smaller than that of the
          // screen size in the main axis. If the viewport takes up the whole
          // screen, overflow from transforming the viewport is irrelevant.
814 815
          return ClipRect(
            clipBehavior: stretch != 0.0 && viewportDimension != mainAxisSize
816 817
              ? widget.clipBehavior
              : Clip.none,
818 819
            child: transform,
          );
820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847
        },
      ),
    );
  }
}

enum _StretchState {
  idle,
  absorb,
  pull,
  recede,
}

class _StretchController extends ChangeNotifier {
  _StretchController({ required TickerProvider vsync }) {
    _stretchController = AnimationController(vsync: vsync)
      ..addStatusListener(_changePhase);
    final Animation<double> decelerator = CurvedAnimation(
      parent: _stretchController,
      curve: Curves.decelerate,
    )..addListener(notifyListeners);
    _stretchSize = decelerator.drive(_stretchSizeTween);
  }

  late final AnimationController _stretchController;
  late final Animation<double> _stretchSize;
  final Tween<double> _stretchSizeTween = Tween<double>(begin: 0.0, end: 0.0);
  _StretchState _state = _StretchState.idle;
848 849

  double get pullDistance => _pullDistance;
850 851 852 853 854 855 856 857 858 859 860 861 862 863 864
  double _pullDistance = 0.0;

  // Constants from Android.
  static const double _exponentialScalar = math.e / 0.33;
  static const double _stretchIntensity = 0.016;
  static const double _flingFriction = 1.01;
  static const Duration _stretchDuration = Duration(milliseconds: 400);

  double get value => _stretchSize.value;

  /// Handle a fling to the edge of the viewport at a particular velocity.
  ///
  /// The velocity must be positive.
  void absorbImpact(double velocity) {
    assert(velocity >= 0.0);
865
    velocity = clampDouble(velocity, 1, 10000);
866 867 868 869 870 871 872 873 874 875 876 877 878 879
    _stretchSizeTween.begin = _stretchSize.value;
    _stretchSizeTween.end = math.min(_stretchIntensity + (_flingFriction / velocity), 1.0);
    _stretchController.duration = Duration(milliseconds: (velocity * 0.02).round());
    _stretchController.forward(from: 0.0);
    _state = _StretchState.absorb;
  }

  /// Handle a user-driven overscroll.
  ///
  /// The `normalizedOverscroll` argument should be the absolute value of the
  /// scroll distance in logical pixels, divided by the extent of the viewport
  /// in the main axis.
  void pull(double normalizedOverscroll) {
    assert(normalizedOverscroll >= 0.0);
880
    _pullDistance = normalizedOverscroll;
881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897
    _stretchSizeTween.begin = _stretchSize.value;
    final double linearIntensity =_stretchIntensity * _pullDistance;
    final double exponentialIntensity = _stretchIntensity * (1 - math.exp(-_pullDistance * _exponentialScalar));
    _stretchSizeTween.end = linearIntensity + exponentialIntensity;
    _stretchController.duration = _stretchDuration;
    if (_state != _StretchState.pull) {
      _stretchController.forward(from: 0.0);
      _state = _StretchState.pull;
    } else {
      if (!_stretchController.isAnimating) {
        assert(_stretchController.value == 1.0);
        notifyListeners();
      }
    }
  }

  void scrollEnd() {
898
    if (_state == _StretchState.pull) {
899
      _recede(_stretchDuration);
900
    }
901 902 903
  }

  void _changePhase(AnimationStatus status) {
904
    if (status != AnimationStatus.completed) {
905
      return;
906
    }
907 908 909 910 911 912 913 914 915 916 917 918 919 920 921
    switch (_state) {
      case _StretchState.absorb:
        _recede(_stretchDuration);
        break;
      case _StretchState.recede:
        _state = _StretchState.idle;
        _pullDistance = 0.0;
        break;
      case _StretchState.pull:
      case _StretchState.idle:
        break;
    }
  }

  void _recede(Duration duration) {
922
    if (_state == _StretchState.recede || _state == _StretchState.idle) {
923
      return;
924
    }
925 926 927 928 929 930 931 932 933 934 935 936
    _stretchSizeTween.begin = _stretchSize.value;
    _stretchSizeTween.end = 0.0;
    _stretchController.duration = duration;
    _stretchController.forward(from: 0.0);
    _state = _StretchState.recede;
  }

  @override
  void dispose() {
    _stretchController.dispose();
    super.dispose();
  }
Ian Hickson's avatar
Ian Hickson committed
937 938 939

  @override
  String toString() => '_StretchController()';
940 941 942 943 944 945 946 947 948 949 950 951 952 953
}

/// A notification that either a [GlowingOverscrollIndicator] or a
/// [StretchingOverscrollIndicator] will start showing an overscroll indication.
///
/// To prevent the indicator from showing the indication, call
/// [disallowIndicator] on the notification.
///
/// See also:
///
///  * [GlowingOverscrollIndicator], which generates this type of notification
///    by painting an indicator over the child content.
///  * [StretchingOverscrollIndicator], which generates this type of
///    notification by applying a stretch transformation to the child content.
954
class OverscrollIndicatorNotification extends Notification with ViewportNotificationMixin {
955 956
  /// Creates a notification that an [GlowingOverscrollIndicator] or a
  /// [StretchingOverscrollIndicator] will start showing an overscroll indication.
957 958
  ///
  /// The [leading] argument must not be null.
959
  OverscrollIndicatorNotification({
960
    required this.leading,
961 962
  });

963 964
  /// Whether the indication will be shown on the leading edge of the scroll
  /// view.
965 966
  final bool leading;

967
  /// Controls at which offset a [GlowingOverscrollIndicator] draws.
968 969 970 971 972 973 974 975 976
  ///
  /// A positive offset will move the glow away from its edge,
  /// i.e. for a vertical, [leading] indicator, a [paintOffset] of 100.0 will
  /// draw the indicator 100.0 pixels from the top of the edge.
  /// For a vertical indicator with [leading] set to `false`, a [paintOffset]
  /// of 100.0 will draw the indicator 100.0 pixels from the bottom instead.
  ///
  /// A negative [paintOffset] is generally not useful, since the glow will be
  /// clipped.
977 978
  ///
  /// This has no effect on a [StretchingOverscrollIndicator].
979 980
  double paintOffset = 0.0;

981 982 983 984 985 986 987 988 989 990
  @protected
  @visibleForTesting
  /// Whether the current overscroll event will allow for the indicator to be
  /// shown.
  ///
  /// Calling [disallowIndicator] sets this to false, preventing the over scroll
  /// indicator from showing.
  ///
  /// Defaults to true, cannot be null.
  bool accepted = true;
991

992 993 994 995 996 997
  /// Call this method if the glow should be prevented. This method is
  /// deprecated in favor of [disallowIndicator].
  @Deprecated(
    'Use disallowIndicator instead. '
    'This feature was deprecated after v2.5.0-6.0.pre.',
  )
998
  void disallowGlow() {
999
    accepted = false;
1000 1001
  }

1002 1003
  /// Call this method if the overscroll indicator should be prevented.
  void disallowIndicator() {
1004
    accepted = false;
1005 1006
  }

1007 1008 1009 1010 1011
  @override
  void debugFillDescription(List<String> description) {
    super.debugFillDescription(description);
    description.add('side: ${leading ? "leading edge" : "trailing edge"}');
  }
Adam Barth's avatar
Adam Barth committed
1012
}