bachelor/wonders
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add fullscreen keyboard list scroller component, incorporate into editorial_screen

Browse Source
This commit is contained in:
Shawn 2023-12-04 11:32:45 -07:00
parent c2d33ac9d3
commit d710a9718a
3 changed files with 129 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
lib/ui/common/fullscreen_keyboard_list_scroller.dart Normal file
View File

@ -0,0 +1,75 @@
import 'package:wonders/common_libs.dart';
import 'package:wonders/logic/common/throttler.dart';
import 'package:wonders/ui/common/fullscreen_keyboard_listener.dart';
class FullscreenKeyboardListScroller extends StatelessWidget {
FullscreenKeyboardListScroller({super.key, required this.child, required this.scrollController});
static const int _scrollAmountOnPress = 75;
static const int _scrollAmountOnHold = 30;
static final Duration _keyPressAnimationDuration = $styles.times.fast * .5;
final Widget child;
final ScrollController scrollController;
final Throttler _throttler = Throttler(32.milliseconds);
double clampOffset(px) => px.clamp(0, scrollController.position.maxScrollExtent).toDouble();
void _handleKeyDown(int px) {
scrollController.animateTo(
clampOffset(scrollController.offset + px),
duration: _keyPressAnimationDuration,
curve: Curves.easeOut,
);
}
void _handleKeyRepeat(int px) {
final offset = clampOffset(scrollController.offset + px);
_throttler.call(() => scrollController.jumpTo(offset));
}
@override
Widget build(BuildContext context) {
return FullscreenKeyboardListener(
child: child,
onKeyRepeat: (event) {
if (event.logicalKey == LogicalKeyboardKey.arrowUp) {
_handleKeyRepeat(-_scrollAmountOnHold);
return true;
}
if (event.logicalKey == LogicalKeyboardKey.arrowDown) {
_handleKeyRepeat(_scrollAmountOnHold);
return true;
}
return false;
},
onKeyDown: (event) {
if (event.logicalKey == LogicalKeyboardKey.arrowUp) {
_handleKeyDown(-_scrollAmountOnPress);
return true;
}
if (event.logicalKey == LogicalKeyboardKey.arrowDown) {
_handleKeyDown(_scrollAmountOnPress);
return true;
}
if (event.logicalKey == LogicalKeyboardKey.pageUp) {
_handleKeyDown(-_getViewportSize(context));
return true;
}
if (event.logicalKey == LogicalKeyboardKey.pageDown) {
_handleKeyDown(_getViewportSize(context));
return true;
}
return false;
},
);
}
int _getViewportSize(BuildContext context) {
final rb = context.findRenderObject() as RenderBox?;
if (rb != null) {
return rb.size.height.round() - 100;
}
return 0;
}
}

12
lib/ui/common/fullscreen_keyboard_listener.dart
View File

@ -1,16 +1,17 @@
import 'package:wonders/common_libs.dart';
class FullScreenKeyboardListener extends StatefulWidget {
const FullScreenKeyboardListener({super.key, required this.child, this.onKeyDown, this.onKeyUp});
class FullscreenKeyboardListener extends StatefulWidget {
const FullscreenKeyboardListener({super.key, required this.child, this.onKeyDown, this.onKeyUp, this.onKeyRepeat});
final Widget child;
final bool Function(KeyDownEvent event)? onKeyDown;
final bool Function(KeyUpEvent event)? onKeyUp;
final bool Function(KeyRepeatEvent event)? onKeyRepeat;
@override
State<FullScreenKeyboardListener> createState() => _FullScreenKeyboardListenerState();
State<FullscreenKeyboardListener> createState() => _FullscreenKeyboardListenerState();
}
class _FullScreenKeyboardListenerState extends State<FullScreenKeyboardListener> {
class _FullscreenKeyboardListenerState extends State<FullscreenKeyboardListener> {
@override
void initState() {
super.initState();
@ -31,6 +32,9 @@ class _FullScreenKeyboardListenerState extends State<FullScreenKeyboardListener>
if (event is KeyUpEvent && widget.onKeyUp != null) {
result = widget.onKeyUp!.call(event);
}
if (event is KeyRepeatEvent && widget.onKeyRepeat != null) {
result = widget.onKeyRepeat!.call(event);
}
return result;
}

89
lib/ui/screens/editorial/editorial_screen.dart
View File

@ -14,6 +14,7 @@ import 'package:wonders/ui/common/centered_box.dart';
import 'package:wonders/ui/common/compass_divider.dart';
import 'package:wonders/ui/common/controls/app_header.dart';
import 'package:wonders/ui/common/curved_clippers.dart';
import 'package:wonders/ui/common/fullscreen_keyboard_list_scroller.dart';
import 'package:wonders/ui/common/google_maps_marker.dart';
import 'package:wonders/ui/common/gradient_container.dart';
import 'package:wonders/ui/common/hidden_collectible.dart';
@ -111,54 +112,56 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
padding: widget.contentPadding,
child: SizedBox(
child: FocusTraversalGroup(
child: CustomScrollView(
primary: false,
controller: _scroller,
scrollBehavior: ScrollConfiguration.of(context).copyWith(),
key: PageStorageKey('editorial'),
slivers: [
/// Invisible padding at the top of the list, so the illustration shows through the btm
SliverToBoxAdapter(
child: SizedBox(height: illustrationHeight),
),
/// Text content, animates itself to hide behind the app bar as it scrolls up
SliverToBoxAdapter(
child: ValueListenableBuilder<double>(
valueListenable: _scrollPos,
builder: (_, value, child) {
double offsetAmt = max(0, value * .3);
double opacity = (1 - offsetAmt / 150).clamp(0, 1);
return Transform.translate(
offset: Offset(0, offsetAmt),
child: Opacity(opacity: opacity, child: child),
);
},
child: _TitleText(widget.data, scroller: _scroller),
child: FullscreenKeyboardListScroller(
scrollController: _scroller,
child: CustomScrollView(
controller: _scroller,
scrollBehavior: ScrollConfiguration.of(context).copyWith(),
key: PageStorageKey('editorial'),
slivers: [
/// Invisible padding at the top of the list, so the illustration shows through the btm
SliverToBoxAdapter(
child: SizedBox(height: illustrationHeight),
),
),
/// Collapsing App bar, pins to the top of the list
SliverAppBar(
pinned: true,
collapsedHeight: minAppBarHeight,
toolbarHeight: minAppBarHeight,
expandedHeight: maxAppBarHeight,
backgroundColor: Colors.transparent,
elevation: 0,
leading: SizedBox.shrink(),
flexibleSpace: SizedBox.expand(
child: _AppBar(
widget.data.type,
scrollPos: _scrollPos,
sectionIndex: _sectionIndex,
/// Text content, animates itself to hide behind the app bar as it scrolls up
SliverToBoxAdapter(
child: ValueListenableBuilder<double>(
valueListenable: _scrollPos,
builder: (_, value, child) {
double offsetAmt = max(0, value * .3);
double opacity = (1 - offsetAmt / 150).clamp(0, 1);
return Transform.translate(
offset: Offset(0, offsetAmt),
child: Opacity(opacity: opacity, child: child),
);
},
child: _TitleText(widget.data, scroller: _scroller),
),
),
),
/// Editorial content (text and images)
_ScrollingContent(widget.data, scrollPos: _scrollPos, sectionNotifier: _sectionIndex),
],
/// Collapsing App bar, pins to the top of the list
SliverAppBar(
pinned: true,
collapsedHeight: minAppBarHeight,
toolbarHeight: minAppBarHeight,
expandedHeight: maxAppBarHeight,
backgroundColor: Colors.transparent,
elevation: 0,
leading: SizedBox.shrink(),
flexibleSpace: SizedBox.expand(
child: _AppBar(
widget.data.type,
scrollPos: _scrollPos,
sectionIndex: _sectionIndex,
),
),
),
/// Editorial content (text and images)
_ScrollingContent(widget.data, scrollPos: _scrollPos, sectionNotifier: _sectionIndex),
],
),
),
),
),