From 3ad68594e29e135ce87667e0a28ae24414d5144f Mon Sep 17 00:00:00 2001 From: Michael Thomas Date: Sun, 12 Mar 2023 12:06:50 -0400 Subject: [PATCH] fix: improve homepage scrolling behavior and clean up logic --- lib/src/screens/home/index.dart | 124 ++++++++++++++++---------------- 1 file changed, 64 insertions(+), 60 deletions(-) diff --git a/lib/src/screens/home/index.dart b/lib/src/screens/home/index.dart index ecfdd35..9a54a98 100644 --- a/lib/src/screens/home/index.dart +++ b/lib/src/screens/home/index.dart @@ -6,6 +6,17 @@ import 'package:furman_now/src/screens/home/content.dart'; import 'package:furman_now/src/screens/home/state.dart'; import 'package:provider/provider.dart'; +class HomeScreenProvider extends StatelessWidget { + @override + Widget build(BuildContext context) { + return ChangeNotifierProvider( + create: (context) => HomePageState(), + child: const HomeScreen(), + ); + } + +} + class HomeScreen extends StatefulWidget { const HomeScreen({Key? key}) : super(key: key); @@ -28,10 +39,11 @@ class _HomeScreenState extends State { updateScrollPosition() { // bottom overscroll - if (_controller.position.pixels > _controller.position.maxScrollExtent) { + var bottomOverscroll = + _controller.position.pixels - _controller.position.maxScrollExtent; + if (bottomOverscroll > 0) { setState(() { - overscrollBottomAmount = - _controller.position.pixels - _controller.position.maxScrollExtent; + overscrollBottomAmount = bottomOverscroll; }); } else { if (overscrollBottomAmount != 0) { @@ -42,10 +54,10 @@ class _HomeScreenState extends State { } // top overscroll - if (_controller.position.pixels < 0) { + var topOverscroll = -_controller.position.pixels; + if (topOverscroll > 0) { setState(() { - overscrollTopAmount = - _controller.position.pixels.abs(); + overscrollTopAmount = topOverscroll; }); } else { if (overscrollTopAmount != 0) { @@ -54,85 +66,77 @@ class _HomeScreenState extends State { }); } } + + handleTopOverscroll(topOverscroll); } - handleScrollEvent(BuildContext context) { + handleTopOverscroll(double overscrollTopAmount) { const scrollMessageSensitivity = 20; const pageSwitchSensitivity = 60; - var offsetAmount = overscrollTopAmount.abs(); + var collapsed = context.read().collapse; - if (overscrollTopAmount != 0) { - if (offsetAmount > pageSwitchSensitivity) { + if (!collapsed) { + if (overscrollTopAmount > pageSwitchSensitivity) { + // switch to student ID page context.router.navigate(const StudentIdRoute()); context.read().collapse = true; - } else if (offsetAmount > scrollMessageSensitivity) { + } else if (overscrollTopAmount > scrollMessageSensitivity) { + // show student ID hint context.read().showScrollMessage = true; } else { + // hide student ID hint context.read().showScrollMessage = false; } - } else { - context.read().showScrollMessage = false; + } - if (_controller.position.pixels > pageSwitchSensitivity) { - context.router.navigate(const HomeRoute()); - context.read().collapse = false; - } + if (collapsed && -overscrollTopAmount > pageSwitchSensitivity) { + // switch back to home page + context.router.navigate(const HomeRoute()); + context.read().collapse = false; } } @override Widget build(BuildContext context) { - return ChangeNotifierProvider( - create: (context) => HomePageState(), - builder: (context, _) => Scaffold( - body: AnnotatedRegion( - value: SystemUiOverlayStyle.light, + return Scaffold( + body: AnnotatedRegion( + value: SystemUiOverlayStyle.light, + child: Container( + color: const Color(0xffb7acc9), + child: SafeArea( child: Container( color: const Color(0xffb7acc9), - child: SafeArea( - child: Container( - color: const Color(0xffb7acc9), - child: Stack( - fit: StackFit.loose, - children: [ - // overscroll indicator color - Align( - alignment: Alignment.bottomCenter, - child: Container( - height: overscrollBottomAmount + 30, - color: Colors.grey.shade50, - ), - ), - const AutoTabsRouter( - routes: [ - HomeRoute(), - StudentIdRoute(), - ], - ), - NotificationListener( - onNotification: (notification) { - if (notification is ScrollUpdateNotification) { - handleScrollEvent(context); - } - return true; - }, - child: Consumer( - builder: (context, state, _) => - ClipRect(child: HomeContent( - controller: _controller, - collapse: state.collapse, - ), - ), - ), - ), + child: Stack( + fit: StackFit.loose, + children: [ + const AutoTabsRouter( + routes: [ + HomeRoute(), + StudentIdRoute(), ], ), - ), + // overscroll indicator color + Align( + alignment: Alignment.bottomCenter, + child: Container( + height: overscrollBottomAmount + 30, + color: Colors.grey.shade50, + ), + ), + Consumer( + builder: (context, state, _) => + ClipRect(child: HomeContent( + controller: _controller, + collapse: state.collapse, + ), + ), + ), + ], ), ), ), ), + ), ); } } -