fix: prevent transient bottom overflow from mini-player animation

SlidingUpPanel animates its own height between minHeight and maxHeight
(full screen) while opening/closing. Since it sits as a plain child in
the Scaffold's footers column, that transient height briefly exceeds
the fixed collapsed slot it was given, overflowing the footers column
by ~18-24px during the animation.

Wrap it in a fixed-size SizedBox + OverflowBox so the panel can still
paint at its actual (larger) size while reporting only the collapsed
height to its parent, avoiding the layout overflow.
This commit is contained in:
Lars 2026-08-31 22:32:51 +02:00
parent 69a310c78f
commit f2339bd9d3

View File

@ -28,13 +28,28 @@ class PlayerOverlay extends HookConsumerWidget {
final panelController = ref.watch(playerOverlayControllerProvider);
return SlidingUpPanel(
// [SlidingUpPanel] animates its own height between [minHeight] and
// [maxHeight] (the full screen height) while it is being opened/closed.
// Since this widget sits as a plain child inside the [Scaffold]'s
// footers column, that transient height briefly exceeds the collapsed
// [minHeight] slot it was given, overflowing the footers column by a
// few pixels. [OverflowBox] lets the panel keep painting at its actual
// (larger) size while reporting only the fixed collapsed height to its
// parent, so the outer layout never overflows.
return SizedBox(
height: canShow ? 63 : 0,
width: screenSize.width,
child: OverflowBox(
maxHeight: screenSize.height,
alignment: Alignment.bottomCenter,
child: SlidingUpPanel(
maxHeight: screenSize.height,
backdropEnabled: false,
minHeight: canShow ? 63 : 0,
onPanelSlide: (position) {
final invertedPosition = 1 - position;
ref.read(navigationPanelHeight.notifier).state = 50 * invertedPosition;
ref.read(navigationPanelHeight.notifier).state =
50 * invertedPosition;
},
controller: panelController,
color: Colors.transparent,
@ -43,12 +58,16 @@ class PlayerOverlay extends HookConsumerWidget {
header: SizedBox(
height: 63,
width: screenSize.width,
child: PlayerOverlayCollapsedSection(panelController: panelController),
child: PlayerOverlayCollapsedSection(
panelController: panelController,
),
),
panelBuilder: (scrollController) => PlayerView(
panelController: panelController,
scrollController: scrollController,
),
),
),
);
}
}