mirror of
https://github.com/gabehf/Fladder.git
synced 2026-03-08 23:18:16 -07:00
fix: Lots of navigation improvements
This commit is contained in:
PartyDonut
parent
c299492d6d
commit
5174bb3a6c
55 changed files with 1019 additions and 832 deletions
|
|
@ -6,10 +6,13 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|||
import 'package:iconsax_plus/iconsax_plus.dart';
|
||||
|
||||
import 'package:fladder/providers/settings/client_settings_provider.dart';
|
||||
import 'package:fladder/screens/shared/media/poster_widget.dart';
|
||||
import 'package:fladder/util/adaptive_layout/adaptive_layout.dart';
|
||||
import 'package:fladder/util/focus_provider.dart';
|
||||
import 'package:fladder/util/list_padding.dart';
|
||||
import 'package:fladder/util/sticky_header_text.dart';
|
||||
import 'package:fladder/util/throttler.dart';
|
||||
import 'package:fladder/widgets/navigation_scaffold/components/navigation_body.dart';
|
||||
import 'package:fladder/widgets/navigation_scaffold/components/side_navigation_bar.dart';
|
||||
import 'package:fladder/widgets/shared/ensure_visible.dart';
|
||||
|
||||
|
|
@ -21,7 +24,7 @@ class HorizontalList<T> extends ConsumerStatefulWidget {
|
|||
final String? subtext;
|
||||
final List<T> items;
|
||||
final int? startIndex;
|
||||
final Widget Function(BuildContext context, int index, int selected) itemBuilder;
|
||||
final Widget Function(BuildContext context, int index) itemBuilder;
|
||||
final Function(int index)? onFocused;
|
||||
final bool scrollToEnd;
|
||||
final EdgeInsets contentPadding;
|
||||
|
|
@ -52,7 +55,7 @@ class HorizontalList<T> extends ConsumerStatefulWidget {
|
|||
|
||||
class _HorizontalListState extends ConsumerState<HorizontalList> {
|
||||
final FocusNode parentNode = FocusNode();
|
||||
late int currentIndex = 0;
|
||||
FocusNode? lastFocused;
|
||||
final GlobalKey _firstItemKey = GlobalKey();
|
||||
final ScrollController _scrollController = ScrollController();
|
||||
final contentPadding = 8.0;
|
||||
|
|
@ -60,81 +63,30 @@ class _HorizontalListState extends ConsumerState<HorizontalList> {
|
|||
double? _firstItemWidth;
|
||||
bool hasFocus = false;
|
||||
|
||||
late List<FocusNode> _focusNodes;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_initFocusNodes();
|
||||
_measureFirstItem();
|
||||
}
|
||||
|
||||
void _measureFirstItem() {
|
||||
if (_firstItemWidth != null) return;
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
final context = _firstItemKey.currentContext;
|
||||
if (context != null) {
|
||||
final box = context.findRenderObject() as RenderBox;
|
||||
final itemContext = _firstItemKey.currentContext;
|
||||
if (itemContext != null) {
|
||||
final box = itemContext.findRenderObject() as RenderBox;
|
||||
_firstItemWidth = box.size.width;
|
||||
_scrollToPosition(widget.startIndex ?? 0);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
void _initFocusNodes() {
|
||||
_focusNodes = List.generate(widget.items.length, (i) {
|
||||
final node = FocusNode();
|
||||
node.addListener(() {
|
||||
if (node.hasFocus) {
|
||||
_scrollToPosition(i);
|
||||
if (widget.onFocused != null) {
|
||||
widget.onFocused?.call(i);
|
||||
} else {
|
||||
context.ensureVisible();
|
||||
}
|
||||
}
|
||||
});
|
||||
return node;
|
||||
});
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
if (widget.autoFocus) {
|
||||
_focusNodes[currentIndex].requestFocus();
|
||||
context.ensureVisible();
|
||||
if ((FocusProvider.autoFocusOf(context) || widget.autoFocus) &&
|
||||
AdaptiveLayout.inputDeviceOf(context) == InputDevice.dPad) {
|
||||
final nodesOnSameRow = _nodesInRow(parentNode);
|
||||
nodesOnSameRow[widget.startIndex ?? 0].requestFocus();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
for (var node in _focusNodes) {
|
||||
node.dispose();
|
||||
}
|
||||
parentNode.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
void didUpdateWidget(HorizontalList oldWidget) {
|
||||
super.didUpdateWidget(oldWidget);
|
||||
|
||||
if (widget.items.length != oldWidget.items.length) {
|
||||
for (var node in _focusNodes) {
|
||||
node.dispose();
|
||||
}
|
||||
_initFocusNodes();
|
||||
|
||||
if (currentIndex >= widget.items.length) {
|
||||
currentIndex = widget.items.isEmpty ? 0 : widget.items.length - 1;
|
||||
}
|
||||
|
||||
if (widget.items.isNotEmpty && parentNode.hasFocus) {
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
_focusNodes[currentIndex].requestFocus();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _scrollToPosition(int index) async {
|
||||
if (_firstItemWidth == null) return;
|
||||
|
||||
|
|
@ -167,110 +119,119 @@ class _HorizontalListState extends ConsumerState<HorizontalList> {
|
|||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final hasPointer = AdaptiveLayout.of(context).inputDevice == InputDevice.pointer;
|
||||
return Focus(
|
||||
focusNode: parentNode,
|
||||
onFocusChange: (value) {
|
||||
if (value) {
|
||||
_focusNodes[currentIndex].requestFocus();
|
||||
}
|
||||
},
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Padding(
|
||||
padding: widget.contentPadding,
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Flexible(
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
if (widget.label != null)
|
||||
Flexible(
|
||||
child: ExcludeFocus(
|
||||
child: StickyHeaderText(
|
||||
label: widget.label ?? "",
|
||||
onClick: widget.onLabelClick,
|
||||
final hasPointer = AdaptiveLayout.inputDeviceOf(context) == InputDevice.pointer;
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Padding(
|
||||
padding: widget.contentPadding,
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Flexible(
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
if (widget.label != null)
|
||||
Flexible(
|
||||
child: ExcludeFocus(
|
||||
child: StickyHeaderText(
|
||||
label: widget.label ?? "",
|
||||
onClick:
|
||||
AdaptiveLayout.inputDeviceOf(context) == InputDevice.dPad ? null : widget.onLabelClick,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (widget.subtext != null)
|
||||
Flexible(
|
||||
child: ExcludeFocus(
|
||||
child: Opacity(
|
||||
opacity: 0.5,
|
||||
child: Text(
|
||||
widget.subtext!,
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (widget.subtext != null)
|
||||
Flexible(
|
||||
child: ExcludeFocus(
|
||||
child: Opacity(
|
||||
opacity: 0.5,
|
||||
child: Text(
|
||||
widget.subtext!,
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
...widget.titleActions
|
||||
],
|
||||
),
|
||||
),
|
||||
...widget.titleActions
|
||||
],
|
||||
),
|
||||
if (widget.items.length > 1)
|
||||
ExcludeFocus(
|
||||
child: Card(
|
||||
elevation: 5,
|
||||
color: Theme.of(context).colorScheme.surface,
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
if (hasPointer)
|
||||
GestureDetector(
|
||||
onLongPress: () => _scrollToStart(),
|
||||
child: IconButton(
|
||||
onPressed: () {
|
||||
_scrollController.animateTo(
|
||||
_scrollController.offset + -(MediaQuery.of(context).size.width / 1.75),
|
||||
duration: const Duration(milliseconds: 250),
|
||||
curve: Curves.easeInOut);
|
||||
},
|
||||
icon: const Icon(
|
||||
IconsaxPlusLinear.arrow_left_1,
|
||||
size: 20,
|
||||
)),
|
||||
),
|
||||
if (widget.startIndex != null)
|
||||
IconButton(
|
||||
tooltip: "Scroll to current",
|
||||
),
|
||||
if (widget.items.length > 1)
|
||||
ExcludeFocus(
|
||||
child: Card(
|
||||
elevation: 5,
|
||||
color: Theme.of(context).colorScheme.surface,
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
if (hasPointer)
|
||||
GestureDetector(
|
||||
onLongPress: () => _scrollToStart(),
|
||||
child: IconButton(
|
||||
onPressed: () {
|
||||
_scrollToPosition(widget.startIndex!);
|
||||
_scrollController.animateTo(
|
||||
_scrollController.offset + -(MediaQuery.of(context).size.width / 1.75),
|
||||
duration: const Duration(milliseconds: 250),
|
||||
curve: Curves.easeInOut);
|
||||
},
|
||||
icon: const Icon(
|
||||
Icons.circle,
|
||||
size: 16,
|
||||
IconsaxPlusLinear.arrow_left_1,
|
||||
size: 20,
|
||||
)),
|
||||
if (hasPointer)
|
||||
GestureDetector(
|
||||
onLongPress: () => _scrollToEnd(),
|
||||
child: IconButton(
|
||||
onPressed: () {
|
||||
_scrollController.animateTo(
|
||||
_scrollController.offset + (MediaQuery.of(context).size.width / 1.75),
|
||||
duration: const Duration(milliseconds: 250),
|
||||
curve: Curves.easeInOut);
|
||||
},
|
||||
icon: const Icon(
|
||||
IconsaxPlusLinear.arrow_right_3,
|
||||
size: 20,
|
||||
)),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
if (widget.startIndex != null)
|
||||
IconButton(
|
||||
tooltip: "Scroll to current",
|
||||
onPressed: () => _scrollToPosition(widget.startIndex!),
|
||||
icon: const Icon(
|
||||
Icons.circle,
|
||||
size: 16,
|
||||
)),
|
||||
if (hasPointer)
|
||||
GestureDetector(
|
||||
onLongPress: () => _scrollToEnd(),
|
||||
child: IconButton(
|
||||
onPressed: () {
|
||||
_scrollController.animateTo(
|
||||
_scrollController.offset + (MediaQuery.of(context).size.width / 1.75),
|
||||
duration: const Duration(milliseconds: 250),
|
||||
curve: Curves.easeInOut);
|
||||
},
|
||||
icon: const Icon(
|
||||
IconsaxPlusLinear.arrow_right_3,
|
||||
size: 20,
|
||||
)),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
].addPadding(const EdgeInsets.symmetric(horizontal: 6)),
|
||||
),
|
||||
),
|
||||
].addPadding(const EdgeInsets.symmetric(horizontal: 6)),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
SizedBox(
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Focus(
|
||||
focusNode: parentNode,
|
||||
onFocusChange: (value) {
|
||||
if (value) {
|
||||
final nodesOnSameRow = _nodesInRow(parentNode);
|
||||
final focusNode = lastFocused ?? _firstFullyVisibleNode(context, nodesOnSameRow);
|
||||
|
||||
if (focusNode != null) {
|
||||
if (widget.onFocused != null) {
|
||||
widget.onFocused!(nodesOnSameRow.indexOf(focusNode));
|
||||
} else {
|
||||
context.ensureVisible();
|
||||
}
|
||||
focusNode.requestFocus();
|
||||
}
|
||||
}
|
||||
},
|
||||
child: SizedBox(
|
||||
height: widget.height ??
|
||||
((AdaptiveLayout.poster(context).size *
|
||||
ref.watch(clientSettingsProvider.select((value) => value.posterSize))) /
|
||||
|
|
@ -278,72 +239,137 @@ class _HorizontalListState extends ConsumerState<HorizontalList> {
|
|||
0.72,
|
||||
child: FocusTraversalGroup(
|
||||
policy: HorizontalRailFocus(
|
||||
parentNode: parentNode,
|
||||
nodes: _focusNodes,
|
||||
onChanged: (value) {
|
||||
currentIndex = value;
|
||||
_focusNodes[value].requestFocus();
|
||||
}),
|
||||
child: ExcludeFocusTraversal(
|
||||
child: ListView.separated(
|
||||
controller: _scrollController,
|
||||
scrollDirection: Axis.horizontal,
|
||||
padding: widget.contentPadding,
|
||||
itemBuilder: (context, index) {
|
||||
return FocusProvider(
|
||||
focusNode: _focusNodes[index],
|
||||
hasFocus: hasFocus && index == currentIndex,
|
||||
key: index == 0 ? _firstItemKey : null,
|
||||
child: widget.itemBuilder(context, index, hasFocus ? currentIndex : -1),
|
||||
parentNode: parentNode,
|
||||
throttle: Throttler(duration: const Duration(milliseconds: 125)),
|
||||
onFocused: (node) {
|
||||
lastFocused = node;
|
||||
final nodesOnSameRow = _nodesInRow(parentNode);
|
||||
if (widget.onFocused != null) {
|
||||
widget.onFocused?.call(nodesOnSameRow.indexOf(node));
|
||||
}
|
||||
final nodeContext = node.context!;
|
||||
final renderObject = nodeContext.findRenderObject();
|
||||
if (renderObject != null) {
|
||||
final position = _scrollController.position;
|
||||
position.ensureVisible(
|
||||
renderObject,
|
||||
alignment: _calcAlignmentWithPadding(nodeContext),
|
||||
duration: const Duration(milliseconds: 200),
|
||||
curve: Curves.fastOutSlowIn,
|
||||
);
|
||||
},
|
||||
separatorBuilder: (context, index) => SizedBox(width: contentPadding),
|
||||
itemCount: widget.items.length,
|
||||
),
|
||||
}
|
||||
},
|
||||
),
|
||||
child: ListView.separated(
|
||||
controller: _scrollController,
|
||||
scrollDirection: Axis.horizontal,
|
||||
padding: widget.contentPadding,
|
||||
itemBuilder: (context, index) => index == widget.items.length
|
||||
? PosterPlaceHolder(
|
||||
onTap: widget.onLabelClick ?? () {},
|
||||
aspectRatio: widget.dominantRatio ?? AdaptiveLayout.poster(context).ratio,
|
||||
)
|
||||
: Container(
|
||||
key: index == 0 ? _firstItemKey : null,
|
||||
child: widget.itemBuilder(context, index),
|
||||
),
|
||||
separatorBuilder: (context, index) => SizedBox(width: contentPadding),
|
||||
itemCount: widget.onLabelClick != null && AdaptiveLayout.inputDeviceOf(context) == InputDevice.dPad
|
||||
? widget.items.length + 1
|
||||
: widget.items.length,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
double _calcAlignmentWithPadding(BuildContext context) {
|
||||
final viewportWidth = _scrollController.position.viewportDimension;
|
||||
final double leftPadding = widget.contentPadding.left + (contentPadding * 2);
|
||||
return leftPadding / viewportWidth;
|
||||
}
|
||||
}
|
||||
|
||||
FocusNode? _firstFullyVisibleNode(
|
||||
BuildContext context,
|
||||
List<FocusNode> nodes,
|
||||
) {
|
||||
if (nodes.isEmpty) return null;
|
||||
|
||||
final scrollable = Scrollable.of(context);
|
||||
|
||||
final viewportBox = scrollable.context.findRenderObject() as RenderBox;
|
||||
final viewportSize = viewportBox.size;
|
||||
|
||||
for (final node in nodes) {
|
||||
final renderObj = node.context?.findRenderObject();
|
||||
if (renderObj is RenderBox) {
|
||||
final topLeft = renderObj.localToGlobal(Offset.zero, ancestor: viewportBox);
|
||||
final bottomRight = renderObj.localToGlobal(renderObj.size.bottomRight(Offset.zero), ancestor: viewportBox);
|
||||
|
||||
final nodeRect = Rect.fromPoints(topLeft, bottomRight);
|
||||
|
||||
final fullyVisible = nodeRect.left >= 0 &&
|
||||
nodeRect.right <= viewportSize.width &&
|
||||
nodeRect.top >= 0 &&
|
||||
nodeRect.bottom <= viewportSize.height;
|
||||
|
||||
if (fullyVisible) {
|
||||
return node;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return nodes.firstOrNull;
|
||||
}
|
||||
|
||||
List<FocusNode> _nodesInRow(FocusNode parentNode) {
|
||||
return parentNode.descendants.where((n) => n.canRequestFocus && n.context != null).toList()
|
||||
..sort((a, b) => a.rect.left.compareTo(b.rect.left));
|
||||
}
|
||||
|
||||
class HorizontalRailFocus extends WidgetOrderTraversalPolicy {
|
||||
final FocusNode parentNode;
|
||||
final List<FocusNode> nodes;
|
||||
final Function(int value) onChanged;
|
||||
final void Function(FocusNode node) onFocused;
|
||||
final Throttler? throttle;
|
||||
|
||||
HorizontalRailFocus({
|
||||
required this.parentNode,
|
||||
required this.nodes,
|
||||
required this.onChanged,
|
||||
required this.onFocused,
|
||||
this.throttle,
|
||||
});
|
||||
|
||||
@override
|
||||
bool inDirection(FocusNode currentNode, TraversalDirection direction) {
|
||||
// Find the index of the currently focused node
|
||||
final int current = nodes.indexWhere((node) => node.hasFocus);
|
||||
// If nothing is focused, default to 0
|
||||
final int currentIndex = current == -1 ? 0 : current;
|
||||
if (throttle?.canRun() == false) return true;
|
||||
|
||||
final rowNodes = _nodesInRow(parentNode);
|
||||
final index = rowNodes.indexOf(currentNode);
|
||||
|
||||
if (direction == TraversalDirection.left) {
|
||||
if (currentIndex <= 0) {
|
||||
if (index > 0) {
|
||||
final target = rowNodes[index - 1];
|
||||
target.requestFocus();
|
||||
onFocused(target);
|
||||
} else {
|
||||
lastMainFocus = currentNode;
|
||||
navBarNode.requestFocus();
|
||||
return true;
|
||||
} else {
|
||||
onChanged(math.max(currentIndex - 1, 0));
|
||||
return true;
|
||||
}
|
||||
} else if (direction == TraversalDirection.right) {
|
||||
if (currentIndex >= nodes.length - 1) {
|
||||
// Corrected boundary check
|
||||
return super.inDirection(parentNode, direction);
|
||||
} else {
|
||||
onChanged(math.min(currentIndex + 1, nodes.length - 1));
|
||||
return true;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
if (direction == TraversalDirection.right) {
|
||||
if (index < rowNodes.length - 1) {
|
||||
final target = rowNodes[index + 1];
|
||||
target.requestFocus();
|
||||
onFocused(target);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
parentNode.requestFocus();
|
||||
return super.inDirection(parentNode, direction);
|
||||
return super.inDirection(currentNode, direction);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue