fix: get rid of overflow errors & status bar dark color

lib/components/player/player.dart

@@ -15,6 +15,7 @@ import 'package:spotube/components/shared/animated_gradient.dart';
 import 'package:spotube/components/shared/dialogs/track_details_dialog.dart';
 import 'package:spotube/components/shared/page_window_title_bar.dart';
 import 'package:spotube/components/shared/image/universal_image.dart';
+import 'package:spotube/components/shared/panels/sliding_up_panel.dart';
 import 'package:spotube/extensions/constrains.dart';
 import 'package:spotube/extensions/context.dart';
 import 'package:spotube/hooks/use_custom_status_bar_color.dart';
@@ -26,13 +27,10 @@ import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 
 class PlayerView extends HookConsumerWidget {
- final bool isOpen;
- final Function() onClosePage;
-
+ final PanelController panelController;
  const PlayerView({
  Key? key,
- required this.isOpen,
- required this.onClosePage,
+ required this.panelController,
  }) : super(key: key);
 
  @override
@@ -50,7 +48,7 @@ class PlayerView extends HookConsumerWidget {
  useEffect(() {
  if (mediaQuery.lgAndUp) {
  WidgetsBinding.instance.addPostFrameCallback((_) {
- onClosePage();
+ panelController.close();
  });
  }
  return null;
@@ -65,35 +63,53 @@ class PlayerView extends HookConsumerWidget {
  );
 
  final palette = usePaletteGenerator(albumArt);
- final bgColor = palette.dominantColor?.color ?? theme.colorScheme.primary;
  final titleTextColor = palette.dominantColor?.titleTextColor;
  final bodyTextColor = palette.dominantColor?.bodyTextColor;
 
+ final bgColor = palette.dominantColor?.color ?? theme.colorScheme.primary;
+
+ final GlobalKey<ScaffoldState> scaffoldKey =
+ useMemoized(() => GlobalKey(), []);
+
+ useEffect(() {
+ WidgetsBinding.instance.renderView.automaticSystemUiAdjustment = false;
+
+ return () {
+ WidgetsBinding.instance.renderView.automaticSystemUiAdjustment = true;
+ };
+ }, [panelController.isPanelOpen]);
+
  useCustomStatusBarColor(
  bgColor,
- isOpen,
+ panelController.isPanelOpen,
  noSetBGColor: true,
+ automaticSystemUiAdjustment: false,
  );
 
+ final topPadding = MediaQueryData.fromView(View.of(context)).padding.top;
+
  return WillPopScope(
  onWillPop: () async {
- onClosePage();
+ panelController.close();
  return false;
  },
  child: IconTheme(
  data: theme.iconTheme.copyWith(color: bodyTextColor),
  child: Scaffold(
+ key: scaffoldKey,
  appBar: PreferredSize(
- preferredSize: const Size.fromHeight(kToolbarHeight),
- child: SafeArea(
- minimum: const EdgeInsets.only(top: 30),
+ preferredSize: Size.fromHeight(
+ kToolbarHeight + topPadding,
+ ),
+ child: Padding(
+ padding: EdgeInsets.only(top: topPadding),
  child: PageWindowTitleBar(
  backgroundColor: Colors.transparent,
  foregroundColor: titleTextColor,
  toolbarOpacity: 1,
  leading: IconButton(
  icon: const Icon(SpotubeIcons.angleDown, size: 18),
- onPressed: onClosePage,
+ onPressed: panelController.close,
  ),
  actions: [
  IconButton(
@@ -207,7 +223,7 @@ class PlayerView extends HookConsumerWidget {
  color: bodyTextColor,
  ),
  onRouteChange: (route) {
- onClosePage();
+ panelController.close();
  GoRouter.of(context).push(route);
  },
  ),

lib/components/player/player_overlay.dart

@@ -175,21 +175,19 @@ class PlayerOverlay extends HookConsumerWidget {
  ),
  ),
  panelBuilder: (position) {
+ // this is the reason we're getting an update
  final navigationHeight = ref.watch(navigationPanelHeight);
- if (navigationHeight == 50) return const SizedBox();
 
- return AnimatedContainer(
- clipBehavior: Clip.antiAlias,
- duration: const Duration(milliseconds: 250),
- decoration: navigationHeight == 0
- ? const BoxDecoration(borderRadius: BorderRadius.zero)
- : const BoxDecoration(borderRadius: radius),
- child: HorizontalScrollableWidget(
- child: PlayerView(
- isOpen: panelController.isPanelOpen,
- onClosePage: () {
- panelController.close();
- },
+ return IgnorePointer(
+ ignoring: !panelController.isPanelOpen,
+ child: AnimatedContainer(
+ clipBehavior: Clip.antiAlias,
+ duration: const Duration(milliseconds: 250),
+ decoration: navigationHeight == 0
+ ? const BoxDecoration(borderRadius: BorderRadius.zero)
+ : const BoxDecoration(borderRadius: radius),
+ child: HorizontalScrollableWidget(
+ child: PlayerView(panelController: panelController),
  ),
  ),
  );

lib/components/root/spotube_navigation_bar.dart

@@ -51,7 +51,8 @@ class SpotubeNavigationBar extends HookConsumerWidget {
  }, [selectedIndex]);
 
  if (layoutMode == LayoutMode.extended ||
- (mediaQuery.mdAndUp && layoutMode == LayoutMode.adaptive)) {
+ (mediaQuery.mdAndUp && layoutMode == LayoutMode.adaptive) ||
+ panelHeight < 10) {
  return const SizedBox();
  }
 

lib/hooks/use_custom_status_bar_color.dart

@@ -6,6 +6,7 @@ void useCustomStatusBarColor(
  Color color,
  bool isCurrentRoute, {
  bool noSetBGColor = false,
+ bool? automaticSystemUiAdjustment,
 }) {
  final context = useContext();
  final backgroundColor = Theme.of(context).scaffoldBackgroundColor;
@@ -21,20 +22,30 @@ void useCustomStatusBarColor(
  final statusBarColor = SystemChrome.latestStyle?.statusBarColor;
 
  useEffect(() {
- if (isCurrentRoute && statusBarColor != color) {
- SystemChrome.setSystemUIOverlayStyle(
- SystemUiOverlayStyle(
- statusBarColor:
- noSetBGColor ? Colors.transparent : color, // status bar color
- statusBarIconBrightness: color.computeLuminance() > 0.179
- ? Brightness.dark
- : Brightness.light,
- ),
- );
- } else if (!isCurrentRoute && statusBarColor == color) {
- resetStatusbar();
- }
- return;
+ WidgetsBinding.instance.addPostFrameCallback((_) {
+ if (automaticSystemUiAdjustment != null) {
+ WidgetsBinding.instance.renderView.automaticSystemUiAdjustment =
+ automaticSystemUiAdjustment;
+ }
+ if (isCurrentRoute && statusBarColor != color) {
+ final isLight = color.computeLuminance() > 0.179;
+ SystemChrome.setSystemUIOverlayStyle(
+ SystemUiOverlayStyle(
+ statusBarColor:
+ noSetBGColor ? Colors.transparent : color, // status bar color
+ statusBarIconBrightness:
+ isLight ? Brightness.dark : Brightness.light,
+ ),
+ );
+ } else if (!isCurrentRoute && statusBarColor == color) {
+ resetStatusbar();
+ }
+ });
+ return () {
+ if (automaticSystemUiAdjustment != null) {
+ WidgetsBinding.instance.renderView.automaticSystemUiAdjustment = false;
+ }
+ };
  }, [color, isCurrentRoute, statusBarColor]);
 
  useEffect(() {