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