feat: Android TV support (#503)

Co-authored-by: PartyDonut <PartyDonut@users.noreply.github.com>
This commit is contained in:
PartyDonut 2025-09-28 21:07:49 +02:00 committed by GitHub
parent 7ab8c015b9
commit c299492d6d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
168 changed files with 12019 additions and 3073 deletions

View file

@ -32,8 +32,11 @@ class AdaptiveFab {
padding: const EdgeInsets.symmetric(horizontal: 6),
child: FilledButton.tonal(
onPressed: onPressed,
style: FilledButton.styleFrom(
padding: const EdgeInsets.all(16),
),
child: Row(
spacing: 24,
spacing: 16,
children: [
child,
Flexible(child: Text(title)),

View file

@ -31,7 +31,7 @@ class _BackgroundImageState extends ConsumerState<BackgroundImage> {
@override
void didUpdateWidget(covariant BackgroundImage oldWidget) {
super.didUpdateWidget(oldWidget);
if (oldWidget.items.length != widget.items.length || oldWidget.images.length != widget.images.length) {
if (!oldWidget.items.equals(widget.items)) {
updateItems();
}
}

View file

@ -81,10 +81,12 @@ class DestinationModel {
);
}
NavigationButton toNavigationButton(bool selected, bool horizontal, bool expanded, {Widget? customIcon}) {
NavigationButton toNavigationButton(bool selected, bool horizontal, bool expanded,
{bool navFocusNode = false, Widget? customIcon}) {
return NavigationButton(
label: label,
selected: selected,
navFocusNode: navFocusNode,
onPressed: action,
horizontal: horizontal,
expanded: expanded,

View file

@ -25,6 +25,7 @@ double floatingPlayerHeight(BuildContext context) => switch (AdaptiveLayout.view
ViewSize.phone => 75,
ViewSize.tablet => 85,
ViewSize.desktop => 95,
ViewSize.television => 105,
};
class FloatingPlayerBar extends ConsumerStatefulWidget {

View file

@ -64,25 +64,28 @@ class _NavigationBodyState extends ConsumerState<NavigationBody> {
child: widget.child,
);
return switch (AdaptiveLayout.layoutOf(context)) {
ViewSize.phone => paddedChild(),
ViewSize.tablet => hasOverlay
? SideNavigationBar(
currentIndex: widget.currentIndex,
destinations: widget.destinations,
currentLocation: widget.currentLocation,
child: paddedChild(),
scaffoldKey: widget.drawerKey,
)
: paddedChild(),
ViewSize.desktop => SideNavigationBar(
currentIndex: widget.currentIndex,
destinations: widget.destinations,
currentLocation: widget.currentLocation,
child: paddedChild(),
scaffoldKey: widget.drawerKey,
)
};
return FocusTraversalGroup(
policy: GlobalFallbackTraversalPolicy(fallbackNode: navBarNode),
child: switch (AdaptiveLayout.layoutOf(context)) {
ViewSize.phone => paddedChild(),
ViewSize.tablet => hasOverlay
? SideNavigationBar(
currentIndex: widget.currentIndex,
destinations: widget.destinations,
currentLocation: widget.currentLocation,
child: paddedChild(),
scaffoldKey: widget.drawerKey,
)
: paddedChild(),
ViewSize.desktop || ViewSize.television => SideNavigationBar(
currentIndex: widget.currentIndex,
destinations: widget.destinations,
currentLocation: widget.currentLocation,
child: paddedChild(),
scaffoldKey: widget.drawerKey,
)
},
);
}
MediaQueryData semiNestedPadding(BuildContext context, bool hasOverlay) {
@ -92,3 +95,28 @@ class _NavigationBodyState extends ConsumerState<NavigationBody> {
);
}
}
FocusNode? lastMainFocus;
class GlobalFallbackTraversalPolicy extends ReadingOrderTraversalPolicy {
final FocusNode fallbackNode;
GlobalFallbackTraversalPolicy({required this.fallbackNode}) : super();
@override
bool inDirection(FocusNode currentNode, TraversalDirection direction) {
lastMainFocus = null;
final handled = super.inDirection(currentNode, direction);
if (!handled && direction == TraversalDirection.left) {
lastMainFocus = currentNode;
if (fallbackNode.canRequestFocus && fallbackNode.context?.mounted == true) {
final cb = FocusTraversalPolicy.defaultTraversalRequestFocusCallback;
cb(fallbackNode);
return true;
}
}
return handled;
}
}

View file

@ -3,12 +3,14 @@ import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fladder/util/localization_helper.dart';
import 'package:fladder/widgets/navigation_scaffold/components/side_navigation_bar.dart';
import 'package:fladder/widgets/shared/item_actions.dart';
class NavigationButton extends ConsumerStatefulWidget {
final String? label;
final Widget selectedIcon;
final Widget icon;
final bool navFocusNode;
final bool horizontal;
final bool expanded;
final Function()? onPressed;
@ -21,6 +23,7 @@ class NavigationButton extends ConsumerStatefulWidget {
required this.label,
required this.selectedIcon,
required this.icon,
this.navFocusNode = false,
this.horizontal = false,
this.expanded = false,
this.onPressed,
@ -48,6 +51,7 @@ class _NavigationButtonState extends ConsumerState<NavigationButton> {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 6),
child: ElevatedButton(
focusNode: widget.navFocusNode ? navBarNode : null,
onHover: (value) => setState(() => showPopupButton = value),
style: ButtonStyle(
elevation: const WidgetStatePropertyAll(0),
@ -64,95 +68,97 @@ class _NavigationButtonState extends ConsumerState<NavigationButton> {
})),
onPressed: widget.onPressed,
onLongPress: widget.onLongPress,
child: widget.horizontal
? Padding(
padding: widget.customIcon != null
? EdgeInsetsGeometry.zero
: const EdgeInsets.symmetric(vertical: 6, horizontal: 8),
child: SizedBox(
height: widget.customIcon != null ? 60 : 35,
child: Row(
spacing: 4,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
AnimatedContainer(
duration: const Duration(milliseconds: 250),
height: widget.selected ? 16 : 0,
margin: const EdgeInsets.only(top: 1.5),
width: 6,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Theme.of(context)
.colorScheme
.primary
.withValues(alpha: widget.selected && !widget.expanded ? 1 : 0),
),
),
widget.customIcon ??
AnimatedSwitcher(
duration: widget.duration,
child: widget.selected ? widget.selectedIcon : widget.icon,
),
const SizedBox(width: 6),
if (widget.horizontal && widget.expanded) ...[
if (widget.label != null)
Expanded(
child: ConstrainedBox(
constraints: const BoxConstraints(minWidth: 80),
child: Text(
widget.label!,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
),
if (widget.trailing.isNotEmpty)
AnimatedOpacity(
duration: const Duration(milliseconds: 125),
opacity: showPopupButton ? 1 : 0,
child: PopupMenuButton(
tooltip: context.localized.options,
iconColor: foreGroundColor,
iconSize: 18,
itemBuilder: (context) => widget.trailing.popupMenuItems(useIcons: true),
),
)
],
],
),
),
)
: Padding(
padding: widget.customIcon != null ? EdgeInsetsGeometry.zero : const EdgeInsets.all(8),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
spacing: 8,
child: ExcludeFocusTraversal(
child: widget.horizontal
? Padding(
padding: widget.customIcon != null
? EdgeInsetsGeometry.zero
: const EdgeInsets.symmetric(vertical: 6, horizontal: 8),
child: SizedBox(
height: widget.customIcon != null ? 60 : 35,
child: Row(
spacing: 4,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
AnimatedContainer(
duration: const Duration(milliseconds: 250),
height: widget.selected ? 16 : 0,
margin: const EdgeInsets.only(top: 1.5),
width: 6,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Theme.of(context)
.colorScheme
.primary
.withValues(alpha: widget.selected && !widget.expanded ? 1 : 0),
),
),
widget.customIcon ??
AnimatedSwitcher(
duration: widget.duration,
child: widget.selected ? widget.selectedIcon : widget.icon,
),
if (widget.label != null && widget.horizontal && widget.expanded)
Flexible(child: Text(widget.label!))
const SizedBox(width: 6),
if (widget.horizontal && widget.expanded) ...[
if (widget.label != null)
Expanded(
child: ConstrainedBox(
constraints: const BoxConstraints(minWidth: 80),
child: Text(
widget.label!,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
),
if (widget.trailing.isNotEmpty)
AnimatedOpacity(
duration: const Duration(milliseconds: 125),
opacity: showPopupButton ? 1 : 0,
child: PopupMenuButton(
tooltip: context.localized.options,
iconColor: foreGroundColor,
iconSize: 18,
itemBuilder: (context) => widget.trailing.popupMenuItems(useIcons: true),
),
)
],
],
),
AnimatedContainer(
duration: const Duration(milliseconds: 250),
margin: EdgeInsets.only(top: widget.selected ? 4 : 0),
height: widget.selected ? 6 : 0,
width: widget.selected ? 14 : 0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Theme.of(context).colorScheme.primary.withValues(alpha: widget.selected ? 1 : 0),
),
)
: Padding(
padding: widget.customIcon != null ? EdgeInsetsGeometry.zero : const EdgeInsets.all(8),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
spacing: 8,
children: [
widget.customIcon ??
AnimatedSwitcher(
duration: widget.duration,
child: widget.selected ? widget.selectedIcon : widget.icon,
),
if (widget.label != null && widget.horizontal && widget.expanded)
Flexible(child: Text(widget.label!))
],
),
),
],
AnimatedContainer(
duration: const Duration(milliseconds: 250),
margin: EdgeInsets.only(top: widget.selected ? 4 : 0),
height: widget.selected ? 6 : 0,
width: widget.selected ? 14 : 0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Theme.of(context).colorScheme.primary.withValues(alpha: widget.selected ? 1 : 0),
),
),
],
),
),
),
),
),
);
}

View file

@ -20,12 +20,15 @@ import 'package:fladder/util/fladder_image.dart';
import 'package:fladder/util/localization_helper.dart';
import 'package:fladder/widgets/navigation_scaffold/components/adaptive_fab.dart';
import 'package:fladder/widgets/navigation_scaffold/components/destination_model.dart';
import 'package:fladder/widgets/navigation_scaffold/components/navigation_body.dart';
import 'package:fladder/widgets/navigation_scaffold/components/navigation_button.dart';
import 'package:fladder/widgets/navigation_scaffold/components/settings_user_icon.dart';
import 'package:fladder/widgets/shared/custom_tooltip.dart';
import 'package:fladder/widgets/shared/item_actions.dart';
import 'package:fladder/widgets/shared/modal_bottom_sheet.dart';
final navBarNode = FocusNode();
class SideNavigationBar extends ConsumerStatefulWidget {
final int currentIndex;
final List<DestinationModel> destinations;
@ -53,7 +56,7 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
final views = ref.watch(viewsProvider.select((value) => value.views));
final usePostersForLibrary = ref.watch(clientSettingsProvider.select((value) => value.usePosterForLibrary));
final expandedWidth = 250.0;
final expandedWidth = 200.0;
final padding = MediaQuery.paddingOf(context);
final collapsedWidth = 90 + padding.left;
@ -64,6 +67,9 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
final fullScreenChildRoute = fullScreenRoutes.contains(context.router.current.name);
final hasOverlay = AdaptiveLayout.layoutModeOf(context) == LayoutMode.dual ||
homeRoutes.any((element) => element.name.contains(context.router.current.name));
return Stack(
children: [
AdaptiveLayoutBuilder(
@ -73,15 +79,16 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
),
child: (context) => widget.child,
),
IgnorePointer(
ignoring: fullScreenChildRoute,
child: AnimatedOpacity(
duration: const Duration(milliseconds: 250),
opacity: !fullScreenChildRoute ? 1 : 0,
child: Container(
color: Theme.of(context).colorScheme.surface.withValues(alpha: shouldExpand ? 0.95 : 0.85),
width: shouldExpand ? expandedWidth : collapsedWidth,
child: MouseRegion(
FocusTraversalGroup(
policy: _RailTraversalPolicy(),
child: IgnorePointer(
ignoring: !hasOverlay || fullScreenChildRoute,
child: AnimatedOpacity(
duration: const Duration(milliseconds: 250),
opacity: !fullScreenChildRoute ? 1 : 0,
child: Container(
color: Theme.of(context).colorScheme.surface.withValues(alpha: shouldExpand ? 0.95 : 0.85),
width: shouldExpand ? expandedWidth : collapsedWidth,
child: Padding(
key: const Key('navigation_rail'),
padding: padding.copyWith(right: 0, top: isDesktop ? padding.top : null),
@ -111,9 +118,12 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
),
),
if (largeBar) ...[
AnimatedFadeSize(
duration: const Duration(milliseconds: 250),
child: shouldExpand ? actionButton(context).extended : actionButton(context).normal,
Padding(
padding: const EdgeInsets.symmetric(horizontal: 4).copyWith(bottom: expandedSideBar ? 10 : 0),
child: AnimatedFadeSize(
duration: const Duration(milliseconds: 250),
child: shouldExpand ? actionButton(context).extended : actionButton(context).normal,
),
),
],
Expanded(
@ -137,6 +147,7 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
child: destination.toNavigationButton(
widget.currentIndex == index,
true,
navFocusNode: index == 0,
shouldExpand,
),
),
@ -204,6 +215,7 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
: view.collectionType.iconOutlined,
),
),
decodeHeight: 64,
),
),
)
@ -273,6 +285,7 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
e.collectionType.iconOutlined,
),
),
decodeHeight: 64,
),
),
),
@ -299,7 +312,7 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
selectedIcon: const Icon(IconsaxPlusBold.setting_3),
horizontal: true,
expanded: shouldExpand,
icon: const SettingsUserIcon(),
icon: const ExcludeFocusTraversal(child: SettingsUserIcon()),
onPressed: () {
if (AdaptiveLayout.layoutModeOf(context) == LayoutMode.single) {
context.router.push(const SettingsRoute());
@ -332,3 +345,64 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
);
}
}
class _RailTraversalPolicy extends ReadingOrderTraversalPolicy {
_RailTraversalPolicy();
@override
bool inDirection(FocusNode currentNode, TraversalDirection direction) {
if (direction == TraversalDirection.left) {
return false;
}
if (direction == TraversalDirection.right) {
if (lastMainFocus != null && _isLaidOut(lastMainFocus!)) {
lastMainFocus!.requestFocus();
return true;
} else {
return super.inDirection(currentNode, direction);
}
}
if (direction == TraversalDirection.up || direction == TraversalDirection.down) {
final scope = currentNode.enclosingScope;
if (scope == null) {
return false;
}
final candidates = scope.traversalDescendants
.where((n) => n.canRequestFocus && FocusTraversalGroup.maybeOfNode(n) == this && _isLaidOut(n))
.toList();
if (candidates.isEmpty) return false;
final sorted = sortDescendants(candidates, currentNode).toList();
var index = sorted.indexOf(currentNode);
if (index == -1) {
index = direction == TraversalDirection.down ? -1 : sorted.length;
}
final nextIndex = direction == TraversalDirection.down ? index + 1 : index - 1;
if (nextIndex < 0 || nextIndex >= sorted.length) {
return true;
}
requestFocusCallback(sorted[nextIndex]);
return true;
}
return super.inDirection(currentNode, direction);
}
}
bool _isLaidOut(FocusNode node) {
final ro = node.context?.findRenderObject();
return ro is RenderBox && ro.hasSize;
}
bool isNodeInCurrentRoute(FocusNode node) {
if (!node.canRequestFocus) return false;
if (node.context == null) return false;
final nearestScope = FocusScope.of(node.context!);
return nearestScope.hasFocus || nearestScope.isFirstFocus;
}