gabehf/Fladder
1
0
Fork 0
mirror of https://github.com/gabehf/Fladder.git synced 2026-03-11 00:10:29 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: Lots of navigation improvements

Browse source
This commit is contained in:
PartyDonut 2025-10-03 13:02:51 +02:00
parent c299492d6d
commit 5174bb3a6c
55 changed files with 1019 additions and 832 deletions
Download patch file Download diff file Expand all files Collapse all files

2
lib/widgets/media_query_scaler.dart
View file

@ -8,7 +8,7 @@ class MediaQueryScaler extends StatelessWidget {
const MediaQueryScaler({
required this.child,
required this.enable,
this.scale = 1.35,
this.scale = 1.4,
super.key,
});

4
lib/widgets/navigation_scaffold/components/drawer_list_button.dart
View file

@ -45,7 +45,7 @@ class _DrawerListButtonState extends ConsumerState<DrawerListButton> {
selected: widget.selected,
selectedTileColor: Theme.of(context).colorScheme.primary,
selectedColor: Theme.of(context).colorScheme.onPrimary,
onLongPress: widget.actions.isNotEmpty && AdaptiveLayout.of(context).inputDevice == InputDevice.touch
onLongPress: widget.actions.isNotEmpty && AdaptiveLayout.inputDeviceOf(context) == InputDevice.touch
? () => showBottomSheetPill(
context: context,
content: (context, scrollController) => ListView(
@ -61,7 +61,7 @@ class _DrawerListButtonState extends ConsumerState<DrawerListButton> {
child:
AnimatedFadeSize(duration: widget.duration, child: widget.selected ? widget.selectedIcon : widget.icon),
),
trailing: widget.actions.isNotEmpty && AdaptiveLayout.of(context).inputDevice == InputDevice.pointer
trailing: widget.actions.isNotEmpty && AdaptiveLayout.inputDeviceOf(context) == InputDevice.pointer
? AnimatedOpacity(
duration: const Duration(milliseconds: 125),
opacity: showPopupButton ? 1 : 0,

2
lib/widgets/navigation_scaffold/components/navigation_button.dart
View file

@ -50,7 +50,7 @@ class _NavigationButtonState extends ConsumerState<NavigationButton> {
: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.45);
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 6),
child: ElevatedButton(
child: TextButton(
focusNode: widget.navFocusNode ? navBarNode : null,
onHover: (value) => setState(() => showPopupButton = value),
style: ButtonStyle(

25
lib/widgets/shared/button_group.dart
View file

@ -79,16 +79,23 @@ class ExpressiveButton extends StatelessWidget {
right: isSelected || position == PositionContext.last ? const Radius.circular(16) : const Radius.circular(4),
);
return ElevatedButton.icon(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(borderRadius: borderRadius),
elevation: isSelected ? 4 : 0,
backgroundColor:
isSelected ? Theme.of(context).colorScheme.primary : Theme.of(context).colorScheme.surfaceContainerHighest,
foregroundColor:
isSelected ? Theme.of(context).colorScheme.onPrimary : Theme.of(context).colorScheme.onSurfaceVariant,
textStyle: Theme.of(context).textTheme.labelLarge,
style: ButtonStyle(
shape: WidgetStatePropertyAll(RoundedRectangleBorder(borderRadius: borderRadius)),
elevation: WidgetStatePropertyAll(isSelected ? 4 : 0),
backgroundColor: WidgetStatePropertyAll(
isSelected ? Theme.of(context).colorScheme.primary : Theme.of(context).colorScheme.surfaceContainerHighest),
foregroundColor: WidgetStatePropertyAll(
isSelected ? Theme.of(context).colorScheme.onPrimary : Theme.of(context).colorScheme.onSurfaceVariant),
textStyle: WidgetStatePropertyAll(Theme.of(context).textTheme.labelLarge),
visualDensity: VisualDensity.comfortable,
padding: const EdgeInsets.all(12),
side: WidgetStateProperty.resolveWith((states) => BorderSide(
width: 2,
color: (isSelected
? Theme.of(context).colorScheme.onPrimary
: Theme.of(context).colorScheme.onPrimaryContainer)
.withValues(alpha: states.contains(WidgetState.focused) ? 1.0 : 0),
)),
padding: const WidgetStatePropertyAll(EdgeInsets.all(12)),
),
onPressed: onPressed,
label: label,

6
lib/widgets/shared/clickable_text.dart
View file

@ -1,6 +1,9 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fladder/util/adaptive_layout/adaptive_layout.dart';
class ClickableText extends ConsumerStatefulWidget {
final String text;
final double opacity;
@ -56,6 +59,9 @@ class _ClickableTextState extends ConsumerState<ClickableText> {
@override
Widget build(BuildContext context) {
if (AdaptiveLayout.inputDeviceOf(context) == InputDevice.dPad) {
return _textWidget(false);
}
return widget.onTap != null ? _buildClickable() : _textWidget(false);
}
}

60
lib/widgets/shared/custom_shader_mask.dart Normal file
View file

@ -0,0 +1,60 @@
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class CustomShaderMask extends StatefulWidget {
final Widget child;
const CustomShaderMask({required this.child, super.key});
@override
CustomShaderMaskState createState() => CustomShaderMaskState();
}
class CustomShaderMaskState extends State<CustomShaderMask> {
ui.Image? gradientImage;
@override
void initState() {
super.initState();
_loadImage('assets/gradient.png');
}
Future<void> _loadImage(String assetPath) async {
final data = await rootBundle.load(assetPath);
final bytes = data.buffer.asUint8List();
final codec = await ui.instantiateImageCodec(bytes);
final frame = await codec.getNextFrame();
setState(() {
gradientImage = frame.image;
});
}
@override
Widget build(BuildContext context) {
if (gradientImage == null) {
return const SizedBox.shrink();
}
return ShaderMask(
shaderCallback: (Rect bounds) {
final imageWidth = gradientImage!.width.toDouble();
final imageHeight = gradientImage!.height.toDouble();
final scaleX = bounds.width / imageWidth;
final scaleY = bounds.height / imageHeight;
final matrix = Matrix4.diagonal3Values(scaleX, scaleY, 1);
return ImageShader(
gradientImage!,
TileMode.clamp,
TileMode.clamp,
matrix.storage,
);
},
blendMode: BlendMode.dstIn,
child: widget.child,
);
}
}

2
lib/widgets/shared/ensure_visible.dart
View file

@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
extension EnsureVisibleHelper on BuildContext {
Future<void> ensureVisible({
Duration duration = const Duration(milliseconds: 300),
Duration duration = const Duration(milliseconds: 225),
double? alignment,
Curve curve = Curves.fastOutSlowIn,
}) {

149
lib/widgets/shared/grid_focus_traveler.dart
View file

@ -1,9 +1,10 @@
import 'package:flutter/material.dart';
import 'package:collection/collection.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fladder/util/adaptive_layout/adaptive_layout.dart';
import 'package:fladder/util/focus_provider.dart';
import 'package:fladder/widgets/navigation_scaffold/components/navigation_body.dart';
import 'package:fladder/widgets/navigation_scaffold/components/side_navigation_bar.dart';
class GridFocusTraveler extends ConsumerStatefulWidget {
@ -28,80 +29,44 @@ class GridFocusTraveler extends ConsumerStatefulWidget {
class _GridFocusTravelerState extends ConsumerState<GridFocusTraveler> {
late int selectedIndex = widget.currentIndex;
late final List<FocusNode> _focusNodes;
@override
void initState() {
super.initState();
_focusNodes = List.generate(widget.itemCount, (index) => FocusNode());
_focusNodes.mapIndexed(
(index, element) {
element.addListener(() {
if (element.hasFocus) {
setState(() {
selectedIndex = index;
});
}
});
},
);
if (!FocusProvider.autoFocusOf(context)) {
WidgetsBinding.instance.addPostFrameCallback((_) {
_focusNodes.firstOrNull?.requestFocus();
});
}
}
@override
void didUpdateWidget(GridFocusTraveler oldWidget) {
super.didUpdateWidget(oldWidget);
if (widget.itemCount != oldWidget.itemCount) {
for (var node in _focusNodes) {
node.dispose();
}
_focusNodes = List.generate(widget.itemCount, (index) => FocusNode());
if (selectedIndex >= widget.itemCount) {
selectedIndex = widget.itemCount - 1;
if (selectedIndex >= 0) {
WidgetsBinding.instance.addPostFrameCallback((_) {
_focusNodes[selectedIndex].requestFocus();
});
}
}
}
}
@override
void dispose() {
for (var node in _focusNodes) {
node.dispose();
}
super.dispose();
}
bool _initializedFocus = false;
@override
Widget build(BuildContext context) {
return FocusTraversalGroup(
policy: GridFocusTravelerPolicy(
navBarNode: navBarNode,
nodes: _focusNodes,
crossAxisCount: widget.crossAxisCount,
onChanged: (value) {
selectedIndex = value;
_focusNodes[value].requestFocus();
},
),
child: SliverGrid.builder(
gridDelegate: widget.gridDelegate,
itemCount: widget.itemCount,
itemBuilder: (context, index) {
return FocusProvider(
focusNode: _focusNodes[index],
child: Builder(
builder: (context) => widget.itemBuilder(context, selectedIndex, index),
),
child: Builder(
builder: (context) {
if (!_initializedFocus && AdaptiveLayout.inputDeviceOf(context) == InputDevice.dPad) {
WidgetsBinding.instance.addPostFrameCallback((_) {
final parent = Focus.of(context);
final nodes = _childNodes(parent);
if (nodes.isNotEmpty) {
nodes.first.requestFocus();
setState(() {
selectedIndex = 0;
_initializedFocus = true;
});
}
});
}
return SliverGrid.builder(
gridDelegate: widget.gridDelegate,
itemCount: widget.itemCount,
itemBuilder: (context, index) {
return FocusProvider(
child: Builder(
builder: (context) => widget.itemBuilder(context, selectedIndex, index),
),
);
},
);
},
),
@ -109,21 +74,20 @@ class _GridFocusTravelerState extends ConsumerState<GridFocusTraveler> {
}
}
class GridFocusTravelerPolicy extends ReadingOrderTraversalPolicy {
/// The complete list of FocusNodes for the grid.
final List<FocusNode> nodes;
List<FocusNode> _childNodes(FocusNode node) {
return node.descendants.where((n) => n.canRequestFocus && n.context != null).toList()
..sort((a, b) {
final dy = a.rect.top.compareTo(b.rect.top);
return dy != 0 ? dy : a.rect.left.compareTo(b.rect.left);
});
}
/// The number of items in each row.
class GridFocusTravelerPolicy extends WidgetOrderTraversalPolicy {
final int crossAxisCount;
/// Callback to notify the parent which node index should be focused next.
final Function(int value) onChanged;
/// The navigation bar node to focus when navigating left from the first column.
final FocusNode navBarNode;
GridFocusTravelerPolicy({
required this.nodes,
required this.crossAxisCount,
required this.onChanged,
required this.navBarNode,
@ -131,52 +95,53 @@ class GridFocusTravelerPolicy extends ReadingOrderTraversalPolicy {
@override
bool inDirection(FocusNode currentNode, TraversalDirection direction) {
final int current = nodes.indexOf(currentNode);
final parent = currentNode.parent;
if (parent == null) {
return super.inDirection(currentNode, direction);
}
final nodes = _childNodes(parent);
final current = nodes.indexOf(currentNode);
if (current == -1) {
return super.inDirection(currentNode, direction);
}
final int itemCount = nodes.length;
final int row = current ~/ crossAxisCount;
final int col = current % crossAxisCount;
final int rowCount = (itemCount / crossAxisCount).ceil();
int? next;
final itemCount = nodes.length;
final row = current ~/ crossAxisCount;
final col = current % crossAxisCount;
final rowCount = (itemCount / crossAxisCount).ceil();
int? next;
switch (direction) {
case TraversalDirection.left:
if (col > 0) {
next = current - 1;
}
if (col > 0) next = current - 1;
break;
case TraversalDirection.right:
if (col < crossAxisCount - 1 && current + 1 < itemCount) {
next = current + 1;
}
break;
case TraversalDirection.up:
if (row > 0) {
next = current - crossAxisCount;
}
if (row > 0) next = current - crossAxisCount;
break;
case TraversalDirection.down:
if (row < rowCount - 1) {
final int candidate = current + crossAxisCount;
if (candidate < itemCount) {
next = candidate;
}
final candidate = current + crossAxisCount;
if (candidate < itemCount) next = candidate;
}
break;
}
if (next != null) {
final target = nodes[next];
target.requestFocus();
onChanged(next);
return true;
}
if (direction == TraversalDirection.left && col == 0) {
lastMainFocus = currentNode;
navBarNode.requestFocus();
return true;
}

422
lib/widgets/shared/horizontal_list.dart
View file

@ -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);
}
}

19
lib/widgets/shared/selectable_icon_button.dart
View file

@ -39,18 +39,27 @@ class _SelectableIconButtonState extends ConsumerState<SelectableIconButton> {
Widget build(BuildContext context) {
const duration = Duration(milliseconds: 250);
const iconSize = 24.0;
final theme = Theme.of(context).colorScheme;
final buttonState = WidgetStateProperty.resolveWith(
(states) {
return BorderSide(
width: 2,
color: theme.onPrimaryContainer.withValues(alpha: states.contains(WidgetState.focused) ? 0.9 : 0.0),
);
},
);
return Tooltip(
message: widget.label ?? "",
child: ElevatedButton(
style: ButtonStyle(
side: buttonState,
elevation: WidgetStatePropertyAll(
widget.backgroundColor != null ? (widget.backgroundColor!.a < 1 ? 0 : null) : null),
backgroundColor: WidgetStatePropertyAll(
widget.backgroundColor ?? (widget.selected ? Theme.of(context).colorScheme.primary : null)),
iconColor: WidgetStatePropertyAll(
widget.iconColor ?? (widget.selected ? Theme.of(context).colorScheme.onPrimary : null)),
foregroundColor: WidgetStatePropertyAll(
widget.iconColor ?? (widget.selected ? Theme.of(context).colorScheme.onPrimary : null)),
widget.backgroundColor ?? (widget.selected ? theme.primaryContainer : theme.surfaceContainerHigh)),
iconColor: WidgetStatePropertyAll(widget.iconColor ?? (widget.selected ? theme.onPrimaryContainer : null)),
foregroundColor:
WidgetStatePropertyAll(widget.iconColor ?? (widget.selected ? theme.onPrimaryContainer : null)),
padding: const WidgetStatePropertyAll(EdgeInsets.zero),
),
onFocusChange: (value) {