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

chore: Custom implementation of overflow bar for side_nav_bar

Browse source
This commit is contained in:
PartyDonut 2025-10-27 13:22:53 +01:00
parent 0d7408b499
commit 09de9e2c6b
2 changed files with 203 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

111
lib/widgets/navigation_scaffold/components/side_navigation_bar.dart
View file

@ -4,7 +4,6 @@ import 'package:auto_route/auto_route.dart';
import 'package:collection/collection.dart'; import 'package:collection/collection.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:iconsax_plus/iconsax_plus.dart'; import 'package:iconsax_plus/iconsax_plus.dart';
import 'package:overflow_view/overflow_view.dart';
import 'package:fladder/models/collection_types.dart'; import 'package:fladder/models/collection_types.dart';
import 'package:fladder/models/library_filter_model.dart'; import 'package:fladder/models/library_filter_model.dart';
@ -26,6 +25,7 @@ import 'package:fladder/widgets/navigation_scaffold/components/settings_user_ico
import 'package:fladder/widgets/shared/custom_tooltip.dart'; import 'package:fladder/widgets/shared/custom_tooltip.dart';
import 'package:fladder/widgets/shared/item_actions.dart'; import 'package:fladder/widgets/shared/item_actions.dart';
import 'package:fladder/widgets/shared/modal_bottom_sheet.dart'; import 'package:fladder/widgets/shared/modal_bottom_sheet.dart';
import 'package:fladder/widgets/shared/simple_overflow_widget.dart';
final navBarNode = FocusNode(); final navBarNode = FocusNode();
@ -87,7 +87,7 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
duration: const Duration(milliseconds: 250), duration: const Duration(milliseconds: 250),
opacity: !fullScreenChildRoute ? 1 : 0, opacity: !fullScreenChildRoute ? 1 : 0,
child: Container( child: Container(
color: Theme.of(context).colorScheme.surface.withValues(alpha: shouldExpand ? 0.95 : 0.85), color: Theme.of(context).colorScheme.surface.withValues(alpha: 0.65),
width: shouldExpand ? expandedWidth : collapsedWidth, width: shouldExpand ? expandedWidth : collapsedWidth,
child: Padding( child: Padding(
key: const Key('navigation_rail'), key: const Key('navigation_rail'),
@ -158,9 +158,8 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
endIndent: 32, endIndent: 32,
), ),
Flexible( Flexible(
child: OverflowView.flexible( child: SimpleOverflowWidget(
direction: Axis.vertical, axis: Axis.vertical,
spacing: 4,
children: views.map( children: views.map(
(view) { (view) {
final selected = context.router.currentUrl.contains(view.id); final selected = context.router.currentUrl.contains(view.id);
@ -225,25 +224,25 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
); );
}, },
).toList(), ).toList(),
builder: (context, remaining) { overflowBuilder: (remainingCount) => CustomTooltip(
return CustomTooltip( tooltipContent: expandedSideBar
tooltipContent: expandedSideBar ? null
? null : Card(
: Card( child: Padding(
child: Padding( padding: const EdgeInsets.all(12),
padding: const EdgeInsets.all(12), child: Text(
child: Text( context.localized.moreOptions,
context.localized.moreOptions, style: Theme.of(context).textTheme.titleSmall,
style: Theme.of(context).textTheme.titleSmall,
),
), ),
), ),
position: TooltipPosition.right, ),
child: PopupMenuButton( position: TooltipPosition.right,
iconColor: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.45), child: PopupMenuButton(
padding: EdgeInsets.zero, iconColor: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.45),
tooltip: "", padding: EdgeInsets.zero,
icon: NavigationButton( tooltip: "",
icon: ExcludeFocus(
child: NavigationButton(
label: context.localized.other, label: context.localized.other,
selectedIcon: const Icon(IconsaxPlusLinear.arrow_square_down), selectedIcon: const Icon(IconsaxPlusLinear.arrow_square_down),
icon: const Icon(IconsaxPlusLinear.arrow_square_down), icon: const Icon(IconsaxPlusLinear.arrow_square_down),
@ -261,45 +260,45 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
: null, : null,
horizontal: true, horizontal: true,
), ),
itemBuilder: (context) => views ),
.sublist(views.length - remaining) itemBuilder: (context) => views
.map( .sublist(views.length - remainingCount)
(e) => PopupMenuItem( .map(
onTap: () => context.pushRoute(LibrarySearchRoute( (e) => PopupMenuItem(
viewModelId: e.id, onTap: () => context.pushRoute(LibrarySearchRoute(
).withFilter(e.collectionType.defaultFilters)), viewModelId: e.id,
child: Row( ).withFilter(e.collectionType.defaultFilters)),
spacing: 8, child: Row(
children: [ spacing: 8,
usePostersForLibrary children: [
? Padding( usePostersForLibrary
padding: const EdgeInsets.symmetric(vertical: 4), ? Padding(
child: ClipRRect( padding: const EdgeInsets.symmetric(vertical: 4),
borderRadius: FladderTheme.smallShape.borderRadius, child: ClipRRect(
child: SizedBox.square( borderRadius: FladderTheme.smallShape.borderRadius,
dimension: 45, child: SizedBox.square(
child: FladderImage( dimension: 45,
image: e.imageData?.primary, child: FladderImage(
placeHolder: Card( image: e.imageData?.primary,
child: Icon( placeHolder: Card(
e.collectionType.iconOutlined, child: Icon(
), e.collectionType.iconOutlined,
), ),
decodeHeight: 64,
), ),
decodeHeight: 64,
), ),
), ),
) ),
: Icon(e.collectionType.iconOutlined), )
Text(e.name), : Icon(e.collectionType.iconOutlined),
], Text(e.name),
), ],
), ),
) ),
.toList(), )
), .toList(),
); ),
}, ),
), ),
), ),
], ],

148
lib/widgets/shared/simple_overflow_widget.dart Normal file
View file

@ -0,0 +1,148 @@
import 'package:flutter/material.dart';
class SimpleOverflowWidget extends StatefulWidget {
const SimpleOverflowWidget({
super.key,
required this.children,
required this.overflowBuilder,
this.axis = Axis.horizontal,
});
final List<Widget> children;
final Widget Function(int remaining) overflowBuilder;
final Axis axis;
@override
State<SimpleOverflowWidget> createState() => _SimpleOverflowWidgetState();
}
class _SimpleOverflowWidgetState extends State<SimpleOverflowWidget> {
int _remaining = 0;
@override
Widget build(BuildContext context) {
final overflowChild = _remaining != 0 ? widget.overflowBuilder(_remaining) : const SizedBox.shrink();
final List<Widget> layoutChildren = [];
for (int i = 0; i < widget.children.length; i++) {
layoutChildren.add(
LayoutId(
id: i,
child: widget.children[i],
),
);
}
layoutChildren.add(
LayoutId(
id: 'overflow',
child: overflowChild,
),
);
return CustomMultiChildLayout(
delegate: _OverflowDelegate(
axis: widget.axis,
childCount: widget.children.length,
onLayoutCalculated: (int newRemaining) {
if (_remaining != newRemaining) {
WidgetsBinding.instance.addPostFrameCallback((_) {
if (mounted) {
setState(() {
_remaining = newRemaining;
});
}
});
}
},
),
children: layoutChildren,
);
}
}
class _OverflowDelegate extends MultiChildLayoutDelegate {
_OverflowDelegate({
required this.axis,
required this.childCount,
required this.onLayoutCalculated,
});
final Axis axis;
final int childCount;
final void Function(int) onLayoutCalculated;
static const Offset _offscreen = Offset(-9999, -9999);
@override
void performLayout(Size size) {
final double maxSpace = (axis == Axis.horizontal ? size.width : size.height);
double usedSpace = 0.0;
int visibleCount = 0;
final BoxConstraints overflowConstraints =
(axis == Axis.horizontal) ? BoxConstraints(maxHeight: size.height) : BoxConstraints(maxWidth: size.width);
double overflowSpace = 0.0;
Size? overflowSize;
if (hasChild('overflow')) {
overflowSize = layoutChild('overflow', overflowConstraints);
overflowSpace = (axis == Axis.horizontal ? overflowSize.width : overflowSize.height);
}
bool isOverflowing = false;
for (int i = 0; i < childCount; i++) {
if (!hasChild(i)) continue;
final Size childSize = layoutChild(i, overflowConstraints);
if (isOverflowing) {
positionChild(i, _offscreen);
continue;
}
final double childSpace = (axis == Axis.horizontal ? childSize.width : childSize.height);
final int potentialRemaining = childCount - i;
final double spaceToReserve = (potentialRemaining > 1) ? overflowSpace : 0.0;
if (usedSpace + childSpace + spaceToReserve > maxSpace) {
isOverflowing = true;
positionChild(i, _offscreen);
continue;
}
final Offset offset;
if (axis == Axis.horizontal) {
offset = Offset(usedSpace, (size.height - childSize.height) / 2);
} else {
offset = Offset((size.width - childSize.width) / 2, usedSpace);
}
positionChild(i, offset);
usedSpace += childSpace;
visibleCount++;
}
final int newRemaining = childCount - visibleCount;
if (hasChild('overflow')) {
if (newRemaining > 0 && overflowSize != null) {
final Offset offset = (axis == Axis.horizontal)
? Offset(usedSpace, (size.height - overflowSize.height) / 2)
: Offset((size.width - overflowSize.width) / 2, usedSpace);
positionChild('overflow', offset);
} else {
positionChild('overflow', _offscreen);
}
}
onLayoutCalculated(newRemaining);
}
@override
bool shouldRelayout(_OverflowDelegate oldDelegate) {
return oldDelegate.axis != axis || oldDelegate.childCount != childCount;
}
}