diff --git a/lib/core/widgets/app_pull_to_refresh.dart b/lib/core/widgets/app_pull_to_refresh.dart index 3cf3d06..ba5ac26 100644 --- a/lib/core/widgets/app_pull_to_refresh.dart +++ b/lib/core/widgets/app_pull_to_refresh.dart @@ -9,6 +9,8 @@ import '../theme/app_colors.dart'; const double _maxPullDistance = 96; const double _refreshThreshold = 56; +const double _indicatorHeight = 64; +const double _indicatorMaxOffset = 10; const Duration _arrowTurnDuration = Duration(milliseconds: 160); const Duration _retractDuration = Duration(milliseconds: 200); @@ -23,6 +25,9 @@ class AppPullToRefresh extends StatefulWidget { this.edgeOffset = 0, }); + static const AlwaysScrollableScrollPhysics physics = + AlwaysScrollableScrollPhysics(parent: BouncingScrollPhysics()); + final Widget child; final Future Function() onRefresh; final double edgeOffset; @@ -40,6 +45,12 @@ class _AppPullToRefreshState extends State { if (notification.depth != 0 || _refreshing) return false; if (notification is ScrollStartNotification) { if (notification.dragDetails != null) _setPullDistance(0); + } else if (notification is ScrollUpdateNotification) { + if (notification.dragDetails != null) { + _setPullDistance( + notification.metrics.minScrollExtent - notification.metrics.pixels, + ); + } } else if (notification is OverscrollNotification) { if (notification.dragDetails != null) { _setPullDistance(_pullDistance - notification.overscroll); @@ -100,19 +111,46 @@ class _AppPullToRefreshState extends State { child: Stack( fit: StackFit.expand, children: [ - widget.child, + Listener( + onPointerUp: (_) => _release(), + onPointerCancel: (_) => _release(), + child: widget.child, + ), if (_state != _PullState.idle) Positioned( top: widget.edgeOffset, left: 0, right: 0, - child: IgnorePointer(child: _indicator(context)), + child: IgnorePointer(child: _indicatorLayer(context)), ), ], ), ); } + Widget _indicatorLayer(BuildContext context) { + final progress = (_pullDistance / _refreshThreshold).clamp(0.0, 1.0); + final opacity = _state == _PullState.refreshing + ? 1.0 + : progress.clamp(0.0, 1.0); + return SizedBox( + height: _indicatorHeight, + child: Opacity( + opacity: opacity, + child: Transform.translate( + offset: Offset(0, _indicatorMaxOffset * progress), + child: Align( + alignment: Alignment.topCenter, + child: Padding( + padding: const EdgeInsets.only(top: 8), + child: _indicator(context), + ), + ), + ), + ), + ); + } + Widget _indicator(BuildContext context) { final l10n = AppLocalizations.of(context)!; if (_state == _PullState.refreshing) { diff --git a/lib/pages/discover/discover_view.dart b/lib/pages/discover/discover_view.dart index 606622a..4b1fa46 100644 --- a/lib/pages/discover/discover_view.dart +++ b/lib/pages/discover/discover_view.dart @@ -159,7 +159,7 @@ class _DiscoverPageState extends State { onRefresh: categories.load, child: ListView( controller: logic.scroll, - physics: const AlwaysScrollableScrollPhysics(), + physics: AppPullToRefresh.physics, padding: EdgeInsets.only( top: showHeader ? _stickyHeaderHeight : 0, bottom: AppDimens.spaceXl, diff --git a/lib/pages/downloads/downloads_page.dart b/lib/pages/downloads/downloads_page.dart index f3e6997..359c2a7 100644 --- a/lib/pages/downloads/downloads_page.dart +++ b/lib/pages/downloads/downloads_page.dart @@ -94,7 +94,7 @@ class _DownloadsBody extends StatelessWidget { return AppPullToRefresh( onRefresh: downloads.load, child: ListView( - physics: const AlwaysScrollableScrollPhysics(), + physics: AppPullToRefresh.physics, padding: const EdgeInsets.fromLTRB(16, 10, 16, 28), children: [ _PolicyPanel(downloads: downloads, policy: policy), diff --git a/lib/pages/favorites/favorites_page.dart b/lib/pages/favorites/favorites_page.dart index ee45a08..2676569 100644 --- a/lib/pages/favorites/favorites_page.dart +++ b/lib/pages/favorites/favorites_page.dart @@ -167,7 +167,7 @@ class _FavoritesBody extends StatelessWidget { return AppPullToRefresh( onRefresh: favorites.load, child: ListView( - physics: const AlwaysScrollableScrollPhysics(), + physics: AppPullToRefresh.physics, padding: const EdgeInsets.fromLTRB( _pageHorizontal, 4, diff --git a/lib/pages/home/home_browse_view.dart b/lib/pages/home/home_browse_view.dart index 6924045..7a13bf0 100644 --- a/lib/pages/home/home_browse_view.dart +++ b/lib/pages/home/home_browse_view.dart @@ -146,7 +146,7 @@ class _HomeBrowseViewState extends State { child: ListView( key: const Key('home-browse-page'), controller: _scroll, - physics: const AlwaysScrollableScrollPhysics(), + physics: AppPullToRefresh.physics, padding: const EdgeInsets.only(bottom: AppDimens.spaceXl), children: _sections(l10n, catalog), ), diff --git a/lib/pages/new_releases/new_releases_page.dart b/lib/pages/new_releases/new_releases_page.dart index e499302..3076aab 100644 --- a/lib/pages/new_releases/new_releases_page.dart +++ b/lib/pages/new_releases/new_releases_page.dart @@ -133,7 +133,7 @@ class _NewReleasesPageState extends State { child: ListView( key: const Key('new-releases-list'), controller: _scroll, - physics: const AlwaysScrollableScrollPhysics(), + physics: AppPullToRefresh.physics, padding: const EdgeInsets.only(bottom: 24), children: hero == null ? [ diff --git a/lib/pages/notices/notices_page.dart b/lib/pages/notices/notices_page.dart index 4c42abf..ef59a4d 100644 --- a/lib/pages/notices/notices_page.dart +++ b/lib/pages/notices/notices_page.dart @@ -69,7 +69,7 @@ class _NoticesPageState extends State { return AppPullToRefresh( onRefresh: _controller.refresh, child: ListView( - physics: const AlwaysScrollableScrollPhysics(), + physics: AppPullToRefresh.physics, children: [ SizedBox( height: MediaQuery.sizeOf(context).height * 0.7, @@ -94,7 +94,7 @@ class _NoticesPageState extends State { return AppPullToRefresh( onRefresh: _controller.refresh, child: ListView( - physics: const AlwaysScrollableScrollPhysics(), + physics: AppPullToRefresh.physics, children: [ SizedBox( height: MediaQuery.sizeOf(context).height * 0.7, @@ -113,7 +113,7 @@ class _NoticesPageState extends State { onRefresh: _controller.refresh, child: ListView.separated( key: const Key('notices-list'), - physics: const AlwaysScrollableScrollPhysics(), + physics: AppPullToRefresh.physics, padding: const EdgeInsets.fromLTRB(16, 12, 16, 28), itemCount: _controller.notices.length + 1, separatorBuilder: (_, _) => const SizedBox(height: 10), diff --git a/lib/pages/ranking/ranking_page.dart b/lib/pages/ranking/ranking_page.dart index bb2b3bb..e28923d 100644 --- a/lib/pages/ranking/ranking_page.dart +++ b/lib/pages/ranking/ranking_page.dart @@ -122,7 +122,7 @@ class _RankingPageState extends State { child: ListView( key: const Key('ranking-list'), controller: _scroll, - physics: const AlwaysScrollableScrollPhysics(), + physics: AppPullToRefresh.physics, padding: const EdgeInsets.only(top: 4, bottom: 24), children: top.isEmpty ? [ diff --git a/lib/pages/reserve/reserve_page.dart b/lib/pages/reserve/reserve_page.dart index a4a3bc8..551449d 100644 --- a/lib/pages/reserve/reserve_page.dart +++ b/lib/pages/reserve/reserve_page.dart @@ -49,7 +49,7 @@ class _ReservePageState extends State { onRefresh: _refresh, child: ListView( key: const Key('reserve-list'), - physics: const AlwaysScrollableScrollPhysics(), + physics: AppPullToRefresh.physics, padding: const EdgeInsets.fromLTRB(0, 4, 0, 24), children: [ AppSubpageHeader( diff --git a/lib/pages/wallet/wallet_page.dart b/lib/pages/wallet/wallet_page.dart index 651244f..72a5948 100644 --- a/lib/pages/wallet/wallet_page.dart +++ b/lib/pages/wallet/wallet_page.dart @@ -120,7 +120,7 @@ class _WalletPageState extends State { return AppPullToRefresh( onRefresh: wallet.load, child: ListView( - physics: const AlwaysScrollableScrollPhysics(), + physics: AppPullToRefresh.physics, padding: const EdgeInsets.fromLTRB(16, 8, 16, 28), children: [ _BalanceHero(wallet: snapshot.wallet), diff --git a/lib/pages/watch_records/watch_records_page.dart b/lib/pages/watch_records/watch_records_page.dart index 00fd4a2..157c48b 100644 --- a/lib/pages/watch_records/watch_records_page.dart +++ b/lib/pages/watch_records/watch_records_page.dart @@ -149,7 +149,7 @@ class _WatchRecordsBodyState extends State<_WatchRecordsBody> { return AppPullToRefresh( onRefresh: controller.load, child: ListView( - physics: const AlwaysScrollableScrollPhysics(), + physics: AppPullToRefresh.physics, padding: const EdgeInsets.fromLTRB( _pageHorizontal, 4, diff --git a/test/core/app_pull_to_refresh_test.dart b/test/core/app_pull_to_refresh_test.dart index b86aa7e..7a55e00 100644 --- a/test/core/app_pull_to_refresh_test.dart +++ b/test/core/app_pull_to_refresh_test.dart @@ -26,7 +26,7 @@ void main() { }, child: ListView( key: const Key('pull-refresh-list'), - physics: const AlwaysScrollableScrollPhysics(), + physics: AppPullToRefresh.physics, children: const [SizedBox(height: 1200)], ), ), @@ -34,14 +34,17 @@ void main() { ), ); - final gesture = await tester.startGesture( - tester.getCenter(find.byKey(const Key('pull-refresh-list'))), - ); + final list = find.byKey(const Key('pull-refresh-list')); + final gesture = await tester.startGesture(tester.getCenter(list)); await gesture.moveBy(const Offset(0, 30)); await tester.pump(); + final scrollable = tester.state( + find.descendant(of: list, matching: find.byType(Scrollable)).first, + ); + expect(scrollable.position.pixels, lessThan(0)); expect(find.text('Pull to refresh'), findsOneWidget); - await gesture.moveBy(const Offset(0, 40)); + await gesture.moveBy(const Offset(0, 120)); await tester.pump(); expect(find.text('Release to refresh'), findsOneWidget); diff --git a/test/discover/home_all_dramas_grid_test.dart b/test/discover/home_all_dramas_grid_test.dart index d90e923..0103065 100644 --- a/test/discover/home_all_dramas_grid_test.dart +++ b/test/discover/home_all_dramas_grid_test.dart @@ -300,7 +300,11 @@ void main() { ); expect(refresh.edgeOffset, 52); - await tester.drag(_verticalFeed, const Offset(0, 120)); + expect( + tester.widget(_verticalFeed).physics, + AppPullToRefresh.physics, + ); + await tester.drag(_verticalFeed, const Offset(0, 240)); await tester.pump(); expect(find.text('Refreshing…'), findsOneWidget); await tester.pumpAndSettle(); diff --git a/test/discover/theater_pages_test.dart b/test/discover/theater_pages_test.dart index 7b6ae6e..4bb3437 100644 --- a/test/discover/theater_pages_test.dart +++ b/test/discover/theater_pages_test.dart @@ -6,6 +6,7 @@ import 'package:fruitshorts/app.dart'; import 'package:fruitshorts/core/data/models/drama.dart'; import 'package:fruitshorts/core/data/models/home_feed.dart'; import 'package:fruitshorts/core/theme/app_colors.dart'; +import 'package:fruitshorts/core/widgets/app_pull_to_refresh.dart'; import 'package:fruitshorts/core/data/repositories/favorite_repository.dart'; import 'package:fruitshorts/core/data/repositories/playback_repository.dart'; import 'package:fruitshorts/core/data/repositories/watch_history_repository.dart'; @@ -181,7 +182,9 @@ void main() { await tester.pumpAndSettle(); final list = find.byKey(const Key('ranking-list')); - await tester.drag(list, const Offset(0, -8000)); + expect(tester.widget(list).physics, AppPullToRefresh.physics); + final position = _scrollPosition(tester, const Key('ranking-list')); + position.jumpTo(position.maxScrollExtent); await tester.pump(); expect(find.byKey(const Key('ranking-row-19')), findsOneWidget); @@ -191,23 +194,22 @@ void main() { expect(find.byKey(const Key('ranking-load-more')), findsOneWidget); await tester.pump(const Duration(milliseconds: 1)); - await tester.drag(list, const Offset(0, -8000)); + position.jumpTo(position.maxScrollExtent); await tester.pump(); expect(find.byKey(const Key('ranking-row-39')), findsOneWidget); expect(find.byKey(const Key('ranking-row-40')), findsNothing); expect(find.byKey(const Key('ranking-no-more')), findsOneWidget); - final position = _scrollPosition(tester, const Key('ranking-list')); position.jumpTo(0); await tester.pump(); final beforeRefresh = repository.fetchCalls; - await tester.drag(list, const Offset(0, 120)); + await tester.drag(list, const Offset(0, 240)); await tester.pump(); await tester.pumpAndSettle(); expect(repository.fetchCalls, beforeRefresh + 1); expect(position.pixels, 0); - await tester.drag(list, const Offset(0, -8000)); + position.jumpTo(position.maxScrollExtent); await tester.pump(); expect(find.byKey(const Key('ranking-load-more')), findsOneWidget); expect(find.byKey(const Key('ranking-no-more')), findsNothing); @@ -223,11 +225,13 @@ void main() { await tester.pumpAndSettle(); final list = find.byKey(const Key('new-releases-list')); + expect(tester.widget(list).physics, AppPullToRefresh.physics); await tester.drag(list, const Offset(0, -400)); await tester.pump(); expect(_countKeys('home-drama-card-'), 20); - await tester.drag(list, const Offset(0, -8000)); + final position = _scrollPosition(tester, const Key('new-releases-list')); + position.jumpTo(position.maxScrollExtent); await tester.pump(); expect(find.byKey(const Key('new-releases-load-more')), findsOneWidget); await tester.pump(const Duration(milliseconds: 299)); @@ -237,7 +241,6 @@ void main() { expect(_countKeys('home-drama-card-'), 40); await tester.pumpAndSettle(); - final position = _scrollPosition(tester, const Key('new-releases-list')); position.jumpTo(position.maxScrollExtent); await tester.pumpAndSettle(); expect(find.byKey(const Key('new-releases-no-more')), findsOneWidget); @@ -245,7 +248,7 @@ void main() { position.jumpTo(0); await tester.pump(); final beforeRefresh = repository.fetchCalls; - await tester.drag(list, const Offset(0, 120)); + await tester.drag(list, const Offset(0, 240)); await tester.pump(); await tester.pumpAndSettle(); expect(repository.fetchCalls, beforeRefresh + 1); @@ -263,10 +266,9 @@ void main() { await tester.pumpAndSettle(); final beforeRefresh = repository.fetchCalls; - await tester.drag( - find.byKey(const Key('reserve-list')), - const Offset(0, 120), - ); + final list = find.byKey(const Key('reserve-list')); + expect(tester.widget(list).physics, AppPullToRefresh.physics); + await tester.drag(list, const Offset(0, 240)); await tester.pump(); await tester.pumpAndSettle(); diff --git a/test/library/favorites_page_test.dart b/test/library/favorites_page_test.dart index 72a951c..b286d81 100644 --- a/test/library/favorites_page_test.dart +++ b/test/library/favorites_page_test.dart @@ -75,7 +75,11 @@ void main() { expect(find.byIcon(Icons.star_rounded), findsNWidgets(2)); expect(find.byIcon(Icons.favorite_rounded), findsNothing); expect(find.byType(AppPullToRefresh), findsOneWidget); - await tester.drag(find.byType(ListView), const Offset(0, 120)); + expect( + tester.widget(find.byType(ListView)).physics, + AppPullToRefresh.physics, + ); + await tester.drag(find.byType(ListView), const Offset(0, 240)); await tester.pump(); expect(find.text('Refreshing…'), findsOneWidget); await tester.pumpAndSettle(); diff --git a/test/watch/watch_records_page_test.dart b/test/watch/watch_records_page_test.dart index e88cef1..ec98178 100644 --- a/test/watch/watch_records_page_test.dart +++ b/test/watch/watch_records_page_test.dart @@ -85,7 +85,7 @@ void main() { matching: find.byType(ListView), ), ); - expect(list.physics, isA()); + expect(list.physics, AppPullToRefresh.physics); }); testWidgets(