overscroll_indicator_test.dart 21.8 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
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'dart:math' as math;

import 'package:flutter/widgets.dart';
8
import 'package:flutter_test/flutter_test.dart';
9 10 11 12 13

import '../rendering/mock_canvas.dart';

final Matcher doesNotOverscroll = isNot(paints..circle());

14
Future<void> slowDrag(WidgetTester tester, Offset start, Offset offset) async {
15
  final TestGesture gesture = await tester.startGesture(start);
16 17 18 19 20 21 22 23 24 25
  for (int index = 0; index < 10; index += 1) {
    await gesture.moveBy(offset);
    await tester.pump(const Duration(milliseconds: 20));
  }
  await gesture.up();
}

void main() {
  testWidgets('Overscroll indicator color', (WidgetTester tester) async {
    await tester.pumpWidget(
26
      const Directionality(
27
        textDirection: TextDirection.ltr,
28
        child: CustomScrollView(
29
          slivers: <Widget>[
30
            SliverToBoxAdapter(child: SizedBox(height: 2000.0)),
31 32
          ],
        ),
33 34
      ),
    );
35
    final RenderObject painter = tester.renderObject(find.byType(CustomPaint));
36 37 38 39

    expect(painter, doesNotOverscroll);

    // the scroll gesture from tester.scroll happens in zero time, so nothing should appear:
40
    await tester.drag(find.byType(Scrollable), const Offset(0.0, 100.0));
41 42 43 44 45 46
    expect(painter, doesNotOverscroll);
    await tester.pump(); // allow the ticker to register itself
    expect(painter, doesNotOverscroll);
    await tester.pump(const Duration(milliseconds: 100)); // animate
    expect(painter, doesNotOverscroll);

47
    final TestGesture gesture = await tester.startGesture(const Offset(200.0, 200.0));
48 49 50 51 52
    await tester.pump(const Duration(milliseconds: 100)); // animate
    expect(painter, doesNotOverscroll);
    await gesture.up();
    expect(painter, doesNotOverscroll);

53
    await slowDrag(tester, const Offset(200.0, 200.0), const Offset(0.0, 5.0));
54 55
    expect(painter, paints..circle(color: const Color(0x0DFFFFFF)));

56
    await tester.pumpAndSettle(const Duration(seconds: 1));
57 58
    expect(painter, doesNotOverscroll);
  });
59

60 61
  testWidgets('Nested scrollable', (WidgetTester tester) async {
    await tester.pumpWidget(
62
      Directionality(
63
        textDirection: TextDirection.ltr,
64
        child: GlowingOverscrollIndicator(
65 66 67
          axisDirection: AxisDirection.down,
          color: const Color(0x0DFFFFFF),
          notificationPredicate: (ScrollNotification notification) => notification.depth == 1,
68
          child: const SingleChildScrollView(
69
            scrollDirection: Axis.horizontal,
70
            child: SizedBox(
71
                width: 600.0,
72
                child: CustomScrollView(
73
                  slivers: <Widget>[
74
                    SliverToBoxAdapter(child: SizedBox(height: 2000.0)),
75 76 77 78 79 80 81
                  ],
                ),
              ),
            ),
          ),
        ),
      );
82

83 84
    final RenderObject outerPainter = tester.renderObject(find.byType(CustomPaint).first);
    final RenderObject innerPainter = tester.renderObject(find.byType(CustomPaint).last);
85

86 87 88 89
    await slowDrag(tester, const Offset(200.0, 200.0), const Offset(0.0, 5.0));
    expect(outerPainter, paints..circle());
    expect(innerPainter, paints..circle());
  });
90

91 92
  testWidgets('Overscroll indicator changes side when you drag on the other side', (WidgetTester tester) async {
    await tester.pumpWidget(
93
      const Directionality(
94
        textDirection: TextDirection.ltr,
95
        child: CustomScrollView(
96
          slivers: <Widget>[
97
            SliverToBoxAdapter(child: SizedBox(height: 2000.0)),
98 99
          ],
        ),
100 101
      ),
    );
102
    final RenderObject painter = tester.renderObject(find.byType(CustomPaint));
103

104
    await slowDrag(tester, const Offset(400.0, 200.0), const Offset(0.0, 10.0));
105
    expect(painter, paints..circle(x: 400.0));
106
    await slowDrag(tester, const Offset(100.0, 200.0), const Offset(0.0, 10.0));
107 108 109
    expect(painter, paints..something((Symbol method, List<dynamic> arguments) {
      if (method != #drawCircle)
        return false;
110
      final Offset center = arguments[0] as Offset;
111
      if (center.dx < 400.0)
112 113 114
        return true;
      throw 'Dragging on left hand side did not overscroll on left hand side.';
    }));
115
    await slowDrag(tester, const Offset(700.0, 200.0), const Offset(0.0, 10.0));
116 117 118
    expect(painter, paints..something((Symbol method, List<dynamic> arguments) {
      if (method != #drawCircle)
        return false;
119
      final Offset center = arguments[0] as Offset;
120
      if (center.dx > 400.0)
121 122 123 124
        return true;
      throw 'Dragging on right hand side did not overscroll on right hand side.';
    }));

125
    await tester.pumpAndSettle(const Duration(seconds: 1));
126 127 128 129 130
    expect(painter, doesNotOverscroll);
  });

  testWidgets('Overscroll indicator changes side when you shift sides', (WidgetTester tester) async {
    await tester.pumpWidget(
131
      const Directionality(
132
        textDirection: TextDirection.ltr,
133
        child: CustomScrollView(
134
          slivers: <Widget>[
135
            SliverToBoxAdapter(child: SizedBox(height: 2000.0)),
136 137
          ],
        ),
138 139
      ),
    );
140
    final RenderObject painter = tester.renderObject(find.byType(CustomPaint));
141
    final TestGesture gesture = await tester.startGesture(const Offset(300.0, 200.0));
142 143 144 145 146 147 148 149 150
    await gesture.moveBy(const Offset(0.0, 10.0));
    await tester.pump(const Duration(milliseconds: 20));
    double oldX = 0.0;
    for (int index = 0; index < 10; index += 1) {
      await gesture.moveBy(const Offset(50.0, 50.0));
      await tester.pump(const Duration(milliseconds: 20));
      expect(painter, paints..something((Symbol method, List<dynamic> arguments) {
        if (method != #drawCircle)
          return false;
151
        final Offset center = arguments[0] as Offset;
152
        if (center.dx <= oldX)
153
          throw 'Sliding to the right did not make the center of the radius slide to the right.';
154
        oldX = center.dx;
155 156 157 158 159
        return true;
      }));
    }
    await gesture.up();

160
    await tester.pumpAndSettle(const Duration(seconds: 1));
161 162 163
    expect(painter, doesNotOverscroll);
  });

164
  group("Flipping direction of scrollable doesn't change overscroll behavior", () {
165 166
    testWidgets('down', (WidgetTester tester) async {
      await tester.pumpWidget(
167
        const Directionality(
168
          textDirection: TextDirection.ltr,
169
          child: CustomScrollView(
170 171
            physics: AlwaysScrollableScrollPhysics(),
            slivers: <Widget>[
172
              SliverToBoxAdapter(child: SizedBox(height: 20.0)),
173 174
            ],
          ),
175 176
        ),
      );
177
      final RenderObject painter = tester.renderObject(find.byType(CustomPaint));
178
      await slowDrag(tester, const Offset(200.0, 200.0), const Offset(0.0, 5.0));
179 180
      expect(painter, paints..save()..circle()..restore()..save()..scale(y: -1.0)..restore()..restore());

181
      await tester.pumpAndSettle(const Duration(seconds: 1));
182 183 184 185 186
      expect(painter, doesNotOverscroll);
    });

    testWidgets('up', (WidgetTester tester) async {
      await tester.pumpWidget(
187
        const Directionality(
188
          textDirection: TextDirection.ltr,
189
          child: CustomScrollView(
190
            reverse: true,
191 192
            physics: AlwaysScrollableScrollPhysics(),
            slivers: <Widget>[
193
              SliverToBoxAdapter(child: SizedBox(height: 20.0)),
194 195
            ],
          ),
196 197
        ),
      );
198
      final RenderObject painter = tester.renderObject(find.byType(CustomPaint));
199
      await slowDrag(tester, const Offset(200.0, 200.0), const Offset(0.0, 5.0));
200 201
      expect(painter, paints..save()..scale(y: -1.0)..restore()..save()..circle()..restore()..restore());

202
      await tester.pumpAndSettle(const Duration(seconds: 1));
203 204 205 206 207 208
      expect(painter, doesNotOverscroll);
    });
  });

  testWidgets('Overscroll in both directions', (WidgetTester tester) async {
    await tester.pumpWidget(
209
      const Directionality(
210
        textDirection: TextDirection.ltr,
211
        child: CustomScrollView(
212 213
          physics: AlwaysScrollableScrollPhysics(),
          slivers: <Widget>[
214
            SliverToBoxAdapter(child: SizedBox(height: 20.0)),
215 216
          ],
        ),
217 218
      ),
    );
219
    final RenderObject painter = tester.renderObject(find.byType(CustomPaint));
220
    await slowDrag(tester, const Offset(200.0, 200.0), const Offset(0.0, 5.0));
221 222
    expect(painter, paints..circle());
    expect(painter, isNot(paints..circle()..circle()));
223
    await slowDrag(tester, const Offset(200.0, 200.0), const Offset(0.0, -5.0));
224 225
    expect(painter, paints..circle()..circle());

226
    await tester.pumpAndSettle(const Duration(seconds: 1));
227 228 229 230
    expect(painter, doesNotOverscroll);
  });

  testWidgets('Overscroll horizontally', (WidgetTester tester) async {
231
    await tester.pumpWidget(
232
      const Directionality(
233
        textDirection: TextDirection.ltr,
234
        child: CustomScrollView(
235
          scrollDirection: Axis.horizontal,
236 237
          physics: AlwaysScrollableScrollPhysics(),
          slivers: <Widget>[
238
            SliverToBoxAdapter(child: SizedBox(height: 20.0)),
239 240
          ],
        ),
241
      ),
242
    );
243
    final RenderObject painter = tester.renderObject(find.byType(CustomPaint));
244
    await slowDrag(tester, const Offset(200.0, 200.0), const Offset(5.0, 0.0));
245
    expect(painter, paints..rotate(angle: math.pi / 2.0)..circle()..saveRestore());
246
    expect(painter, isNot(paints..circle()..circle()));
247
    await slowDrag(tester, const Offset(200.0, 200.0), const Offset(-5.0, 0.0));
248 249 250 251 252 253 254 255
    expect(
      painter,
      paints
        ..rotate(angle: math.pi / 2.0)
        ..circle()
        ..rotate(angle: math.pi / 2.0)
        ..circle(),
    );
256

257
    await tester.pumpAndSettle(const Duration(seconds: 1));
258 259 260
    expect(painter, doesNotOverscroll);
  });

261
  testWidgets('Nested overscrolls do not throw exceptions', (WidgetTester tester) async {
262
    await tester.pumpWidget(Directionality(
263
      textDirection: TextDirection.ltr,
264
      child: PageView(
265
        children: <Widget>[
266
          ListView(
267
            children: <Widget>[
268
              Container(
269 270
                width: 2000.0,
                height: 2000.0,
271
                color: const Color(0xFF00FF00),
272 273 274 275 276
              ),
            ],
          ),
        ],
      ),
277
    ));
278

279
    await tester.dragFrom(const Offset(100.0, 100.0), const Offset(0.0, 2000.0));
280
    await tester.pumpAndSettle();
281 282
  });

283 284 285
  testWidgets('Changing settings', (WidgetTester tester) async {
    RenderObject painter;

286
    await tester.pumpWidget(
287
      const Directionality(
288
        textDirection: TextDirection.ltr,
289 290
        child: ScrollConfiguration(
          behavior: TestScrollBehavior1(),
291
          child: CustomScrollView(
292
            scrollDirection: Axis.horizontal,
293
            physics: AlwaysScrollableScrollPhysics(),
294
            reverse: true,
295
            slivers: <Widget>[
296
              SliverToBoxAdapter(child: SizedBox(height: 20.0)),
297 298
            ],
          ),
299
        ),
300
      ),
301
    );
302
    painter = tester.renderObject(find.byType(CustomPaint));
303
    await slowDrag(tester, const Offset(200.0, 200.0), const Offset(5.0, 0.0));
304
    expect(painter, paints..rotate(angle: math.pi / 2.0)..circle(color: const Color(0x0A00FF00)));
305 306
    expect(painter, isNot(paints..circle()..circle()));

307
    await tester.pumpAndSettle(const Duration(seconds: 1));
308
    await tester.pumpWidget(
309
      const Directionality(
310
        textDirection: TextDirection.ltr,
311 312
        child: ScrollConfiguration(
          behavior: TestScrollBehavior2(),
313
          child: CustomScrollView(
314
            scrollDirection: Axis.horizontal,
315 316
            physics: AlwaysScrollableScrollPhysics(),
            slivers: <Widget>[
317
              SliverToBoxAdapter(child: SizedBox(height: 20.0)),
318 319
            ],
          ),
320
        ),
321
      ),
322
    );
323
    painter = tester.renderObject(find.byType(CustomPaint));
324
    await slowDrag(tester, const Offset(200.0, 200.0), const Offset(5.0, 0.0));
325
    expect(painter, paints..rotate(angle: math.pi / 2.0)..circle(color: const Color(0x0A0000FF))..saveRestore());
326 327
    expect(painter, isNot(paints..circle()..circle()));
  });
328

329 330 331 332 333 334
  testWidgets('CustomScrollView overscroll indicator works if there is sliver before center', (WidgetTester tester) async {
    final Key centerKey = UniqueKey();
    await tester.pumpWidget(
      Directionality(
        textDirection: TextDirection.ltr,
        child: ScrollConfiguration(
335
          behavior: const TestScrollBehavior2(),
336 337 338 339 340 341
          child: CustomScrollView(
            center: centerKey,
            physics: const AlwaysScrollableScrollPhysics(),
            slivers: <Widget>[
              SliverList(
                delegate: SliverChildBuilderDelegate(
342
                  (BuildContext context, int index) => Text('First sliver $index'),
343 344 345 346 347 348
                  childCount: 2,
                ),
              ),
              SliverList(
                key: centerKey,
                delegate: SliverChildBuilderDelegate(
349
                  (BuildContext context, int index) => Text('Second sliver $index'),
350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367
                  childCount: 5,
                ),
              ),
            ],
          ),
        ),
      ),
    );

    expect(find.text('First sliver 1'), findsNothing);

    await slowDrag(tester, const Offset(200.0, 200.0), const Offset(0.0, 300.0));
    expect(find.text('First sliver 1'), findsOneWidget);
    final RenderObject painter = tester.renderObject(find.byType(CustomPaint));
    // The scroll offset and paint extend should cancel out each other.
    expect(painter, paints..save()..translate(y: 0.0)..scale()..circle());
  });

368 369 370 371 372 373
  testWidgets('CustomScrollView overscroll indicator works well with [CustomScrollView.center] and [OverscrollIndicatorNotification.paintOffset]', (WidgetTester tester) async {
    final Key centerKey = UniqueKey();
    await tester.pumpWidget(
      Directionality(
        textDirection: TextDirection.ltr,
        child: ScrollConfiguration(
374
          behavior: const TestScrollBehavior2(),
375 376 377 378 379 380 381 382 383 384 385 386 387
          child: NotificationListener<OverscrollIndicatorNotification>(
            onNotification: (OverscrollIndicatorNotification notification) {
              if (notification.leading) {
                notification.paintOffset = 50.0;
              }
              return false;
            },
            child: CustomScrollView(
              center: centerKey,
              physics: const AlwaysScrollableScrollPhysics(),
              slivers: <Widget>[
                SliverList(
                  delegate: SliverChildBuilderDelegate(
388
                    (BuildContext context, int index) => Text('First sliver $index'),
389 390 391 392 393 394
                    childCount: 2,
                  ),
                ),
                SliverList(
                  key: centerKey,
                  delegate: SliverChildBuilderDelegate(
395
                    (BuildContext context, int index) => Text('Second sliver $index'),
396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477
                    childCount: 5,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );

    expect(find.text('First sliver 1'), findsNothing);

    await slowDrag(tester, const Offset(200.0, 200.0), const Offset(0.0, 5.0)); // offset will be magnified ten times
    expect(find.text('First sliver 1'), findsOneWidget);
    final RenderObject painter = tester.renderObject(find.byType(CustomPaint));
    // The OverscrollIndicator should respect the [OverscrollIndicatorNotification.paintOffset] setting.
    expect(painter, paints..save()..translate(y: 50.0)..scale()..circle());
  });

  testWidgets('The OverscrollIndicator should not overflow the scrollable view edge', (WidgetTester tester) async {
    // Regressing test for https://github.com/flutter/flutter/issues/64149
    await tester.pumpWidget(
      Directionality(
        textDirection: TextDirection.ltr,
        child: NotificationListener<OverscrollIndicatorNotification>(
          onNotification: (OverscrollIndicatorNotification notification) {
            notification.paintOffset = 50.0; // both the leading and trailing indicator have a 50.0 pixels offset.
            return false;
          },
          child: const CustomScrollView(
            slivers: <Widget>[
              SliverToBoxAdapter(child: SizedBox(height: 2000.0)),
            ],
          ),
        ),
      ),
    );
    final RenderObject painter = tester.renderObject(find.byType(CustomPaint));
    await slowDrag(tester, const Offset(200.0, 200.0), const Offset(0.0, 5.0));
    expect(painter, paints..save()..translate(y: 50.0)..scale()..circle());
    // Reverse scroll (30 pixels), and the offset < notification.paintOffset.
    await tester.dragFrom(const Offset(200.0, 200.0), const Offset(0.0, -30.0));
    await tester.pump();
    // The OverscrollIndicator should move with the CustomScrollView.
    expect(painter, paints..save()..translate(y: 50.0 - 30.0)..scale()..circle());

    // Reverse scroll (30+20 pixels) and offset == notification.paintOffset.
    await tester.dragFrom(const Offset(200.0, 200.0), const Offset(0.0, -20.0));
    await tester.pump();
    expect(painter, paints..save()..translate(y: 50.0 - 50.0)..scale()..circle());

    // Reverse scroll (30+20+10 pixels) and offset > notification.paintOffset.
    await tester.dragFrom(const Offset(200.0, 200.0), const Offset(0.0, -10.0));
    await tester.pump();
    // The OverscrollIndicator should not overflow the CustomScrollView's edge.
    expect(painter, paints..save()..translate(y: 50.0 - 50.0)..scale()..circle());

    await tester.pumpAndSettle(); // Finish the leading indicator.

    // trigger the trailing indicator
    await slowDrag(tester, const Offset(200.0, 200.0), const Offset(0.0, -200.0));
    expect(painter, paints..scale(y: -1.0)..save()..translate(y: 50.0)..scale()..circle());

    // Reverse scroll (30 pixels), and the offset < notification.paintOffset.
    await tester.dragFrom(const Offset(200.0, 200.0), const Offset(0.0, 30.0));
    await tester.pump();
    // The OverscrollIndicator should move with the CustomScrollView.
    expect(painter, paints..scale(y: -1.0)..save()..translate(y: 50.0 - 30.0)..scale()..circle());

    // Reverse scroll (30+20 pixels) and offset == notification.paintOffset.
    await tester.dragFrom(const Offset(200.0, 200.0), const Offset(0.0, 20.0));
    await tester.pump();
    expect(painter, paints..scale(y: -1.0)..save()..translate(y: 50.0 - 50.0)..scale()..circle());

    // Reverse scroll (30+20+10 pixels) and offset > notification.paintOffset.
    await tester.dragFrom(const Offset(200.0, 200.0), const Offset(0.0, 10.0));
    await tester.pump();
    // The OverscrollIndicator should not overflow the CustomScrollView's edge.
    expect(painter, paints..scale(y: -1.0)..save()..translate(y: 50.0 - 50.0)..scale()..circle());
  });

  group('[OverscrollIndicatorNotification.paintOffset] test', () {
478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498
    testWidgets('Leading', (WidgetTester tester) async {
      await tester.pumpWidget(
        Directionality(
          textDirection: TextDirection.ltr,
          child: NotificationListener<OverscrollIndicatorNotification>(
            onNotification: (OverscrollIndicatorNotification notification) {
              if (notification.leading) {
                notification.paintOffset = 50.0;
              }
              return false;
            },
            child: const CustomScrollView(
              slivers: <Widget>[
                SliverToBoxAdapter(child: SizedBox(height: 2000.0)),
              ],
            ),
          ),
        ),
      );
      final RenderObject painter = tester.renderObject(find.byType(CustomPaint));
      await slowDrag(tester, const Offset(200.0, 200.0), const Offset(0.0, 5.0));
499
      // The OverscrollIndicator should respect the [OverscrollIndicatorNotification.paintOffset] setting.
500 501 502 503
      expect(painter, paints..save()..translate(y: 50.0)..scale()..circle());
      // Reverse scroll direction.
      await tester.dragFrom(const Offset(200.0, 200.0), const Offset(0.0, -30.0));
      await tester.pump();
504
      // The OverscrollIndicator should move with the CustomScrollView.
505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530
      expect(painter, paints..save()..translate(y: 50.0 - 30.0)..scale()..circle());
    });

    testWidgets('Trailing', (WidgetTester tester) async {
      await tester.pumpWidget(
        Directionality(
          textDirection: TextDirection.ltr,
          child: NotificationListener<OverscrollIndicatorNotification>(
            onNotification: (OverscrollIndicatorNotification notification) {
              if (!notification.leading) {
                notification.paintOffset = 50.0;
              }
              return false;
            },
            child: const CustomScrollView(
              slivers: <Widget>[
                SliverToBoxAdapter(child: SizedBox(height: 2000.0)),
              ],
            ),
          ),
        ),
      );
      final RenderObject painter = tester.renderObject(find.byType(CustomPaint));
      await tester.dragFrom(const Offset(200.0, 200.0), const Offset(200.0, -10000.0));
      await tester.pump();
      await slowDrag(tester, const Offset(200.0, 200.0), const Offset(0.0, -5.0));
531
      // The OverscrollIndicator should respect the [OverscrollIndicatorNotification.paintOffset] setting.
532 533 534 535
      expect(painter, paints..scale(y: -1.0)..save()..translate(y: 50.0)..scale()..circle());
      // Reverse scroll direction.
      await tester.dragFrom(const Offset(200.0, 200.0), const Offset(0.0, 30.0));
      await tester.pump();
536
      // The OverscrollIndicator should move with the CustomScrollView.
537 538 539
      expect(painter, paints..scale(y: -1.0)..save()..translate(y: 50.0 - 30.0)..scale()..circle());
    });
  });
540 541
}

Adam Barth's avatar
Adam Barth committed
542
class TestScrollBehavior1 extends ScrollBehavior {
543 544
  const TestScrollBehavior1();

545
  @override
546
  Widget buildOverscrollIndicator(BuildContext context, Widget child, ScrollableDetails details) {
547
    return GlowingOverscrollIndicator(
548
      axisDirection: details.direction,
549
      color: const Color(0xFF00FF00),
550
      child: child,
551
    );
552 553 554
  }
}

Adam Barth's avatar
Adam Barth committed
555
class TestScrollBehavior2 extends ScrollBehavior {
556 557
  const TestScrollBehavior2();

558
  @override
559
  Widget buildOverscrollIndicator(BuildContext context, Widget child, ScrollableDetails details) {
560
    return GlowingOverscrollIndicator(
561
      axisDirection: details.direction,
562
      color: const Color(0xFF0000FF),
563
      child: child,
564
    );
565 566
  }
}