fix: improve homepage scrolling behavior and clean up logic

This commit is contained in:
Michael Thomas 2023-03-12 12:06:50 -04:00
parent 0038efc13c
commit 3ad68594e2
1 changed files with 64 additions and 60 deletions

View File

@ -6,6 +6,17 @@ import 'package:furman_now/src/screens/home/content.dart';
import 'package:furman_now/src/screens/home/state.dart'; import 'package:furman_now/src/screens/home/state.dart';
import 'package:provider/provider.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 { class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key); const HomeScreen({Key? key}) : super(key: key);
@ -28,10 +39,11 @@ class _HomeScreenState extends State<HomeScreen> {
updateScrollPosition() { updateScrollPosition() {
// bottom overscroll // bottom overscroll
if (_controller.position.pixels > _controller.position.maxScrollExtent) { var bottomOverscroll =
setState(() {
overscrollBottomAmount =
_controller.position.pixels - _controller.position.maxScrollExtent; _controller.position.pixels - _controller.position.maxScrollExtent;
if (bottomOverscroll > 0) {
setState(() {
overscrollBottomAmount = bottomOverscroll;
}); });
} else { } else {
if (overscrollBottomAmount != 0) { if (overscrollBottomAmount != 0) {
@ -42,10 +54,10 @@ class _HomeScreenState extends State<HomeScreen> {
} }
// top overscroll // top overscroll
if (_controller.position.pixels < 0) { var topOverscroll = -_controller.position.pixels;
if (topOverscroll > 0) {
setState(() { setState(() {
overscrollTopAmount = overscrollTopAmount = topOverscroll;
_controller.position.pixels.abs();
}); });
} else { } else {
if (overscrollTopAmount != 0) { if (overscrollTopAmount != 0) {
@ -54,37 +66,39 @@ class _HomeScreenState extends State<HomeScreen> {
}); });
} }
} }
handleTopOverscroll(topOverscroll);
} }
handleScrollEvent(BuildContext context) { handleTopOverscroll(double overscrollTopAmount) {
const scrollMessageSensitivity = 20; const scrollMessageSensitivity = 20;
const pageSwitchSensitivity = 60; const pageSwitchSensitivity = 60;
var offsetAmount = overscrollTopAmount.abs(); var collapsed = context.read<HomePageState>().collapse;
if (overscrollTopAmount != 0) { if (!collapsed) {
if (offsetAmount > pageSwitchSensitivity) { if (overscrollTopAmount > pageSwitchSensitivity) {
// switch to student ID page
context.router.navigate(const StudentIdRoute()); context.router.navigate(const StudentIdRoute());
context.read<HomePageState>().collapse = true; context.read<HomePageState>().collapse = true;
} else if (offsetAmount > scrollMessageSensitivity) { } else if (overscrollTopAmount > scrollMessageSensitivity) {
// show student ID hint
context.read<HomePageState>().showScrollMessage = true; context.read<HomePageState>().showScrollMessage = true;
} else { } else {
// hide student ID hint
context.read<HomePageState>().showScrollMessage = false; context.read<HomePageState>().showScrollMessage = false;
} }
} else { }
context.read<HomePageState>().showScrollMessage = false;
if (_controller.position.pixels > pageSwitchSensitivity) { if (collapsed && -overscrollTopAmount > pageSwitchSensitivity) {
// switch back to home page
context.router.navigate(const HomeRoute()); context.router.navigate(const HomeRoute());
context.read<HomePageState>().collapse = false; context.read<HomePageState>().collapse = false;
} }
} }
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return ChangeNotifierProvider( return Scaffold(
create: (context) => HomePageState(),
builder: (context, _) => Scaffold(
body: AnnotatedRegion<SystemUiOverlayStyle>( body: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light, value: SystemUiOverlayStyle.light,
child: Container( child: Container(
@ -95,6 +109,12 @@ class _HomeScreenState extends State<HomeScreen> {
child: Stack( child: Stack(
fit: StackFit.loose, fit: StackFit.loose,
children: [ children: [
const AutoTabsRouter(
routes: [
HomeRoute(),
StudentIdRoute(),
],
),
// overscroll indicator color // overscroll indicator color
Align( Align(
alignment: Alignment.bottomCenter, alignment: Alignment.bottomCenter,
@ -103,20 +123,7 @@ class _HomeScreenState extends State<HomeScreen> {
color: Colors.grey.shade50, color: Colors.grey.shade50,
), ),
), ),
const AutoTabsRouter( Consumer<HomePageState>(
routes: [
HomeRoute(),
StudentIdRoute(),
],
),
NotificationListener<ScrollNotification>(
onNotification: (notification) {
if (notification is ScrollUpdateNotification) {
handleScrollEvent(context);
}
return true;
},
child: Consumer<HomePageState>(
builder: (context, state, _) => builder: (context, state, _) =>
ClipRect(child: HomeContent( ClipRect(child: HomeContent(
controller: _controller, controller: _controller,
@ -124,15 +131,12 @@ class _HomeScreenState extends State<HomeScreen> {
), ),
), ),
), ),
),
], ],
), ),
), ),
), ),
), ),
), ),
),
); );
} }
} }