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: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<HomeScreen> {
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<HomeScreen> {
}
// 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<HomeScreen> {
});
}
}
handleTopOverscroll(topOverscroll);
}
handleScrollEvent(BuildContext context) {
handleTopOverscroll(double overscrollTopAmount) {
const scrollMessageSensitivity = 20;
const pageSwitchSensitivity = 60;
var offsetAmount = overscrollTopAmount.abs();
var collapsed = context.read<HomePageState>().collapse;
if (overscrollTopAmount != 0) {
if (offsetAmount > pageSwitchSensitivity) {
if (!collapsed) {
if (overscrollTopAmount > pageSwitchSensitivity) {
// switch to student ID page
context.router.navigate(const StudentIdRoute());
context.read<HomePageState>().collapse = true;
} else if (offsetAmount > scrollMessageSensitivity) {
} else if (overscrollTopAmount > scrollMessageSensitivity) {
// show student ID hint
context.read<HomePageState>().showScrollMessage = true;
} else {
// hide student ID hint
context.read<HomePageState>().showScrollMessage = false;
}
} else {
context.read<HomePageState>().showScrollMessage = false;
}
if (_controller.position.pixels > pageSwitchSensitivity) {
context.router.navigate(const HomeRoute());
context.read<HomePageState>().collapse = false;
}
if (collapsed && -overscrollTopAmount > pageSwitchSensitivity) {
// switch back to home page
context.router.navigate(const HomeRoute());
context.read<HomePageState>().collapse = false;
}
}
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (context) => HomePageState(),
builder: (context, _) => Scaffold(
body: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
return Scaffold(
body: AnnotatedRegion<SystemUiOverlayStyle>(
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<ScrollNotification>(
onNotification: (notification) {
if (notification is ScrollUpdateNotification) {
handleScrollEvent(context);
}
return true;
},
child: Consumer<HomePageState>(
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<HomePageState>(
builder: (context, state, _) =>
ClipRect(child: HomeContent(
controller: _controller,
collapse: state.collapse,
),
),
),
],
),
),
),
),
),
);
}
}