From 5bb8231782287faf75c778fadb3a03ac774d14f0 Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Sun, 1 Oct 2023 11:39:33 +0600 Subject: [PATCH] fix: get rid of overflow errors & status bar dark color --- lib/components/player/player.dart | 44 +++++++++++++------ lib/components/player/player_overlay.dart | 24 +++++----- .../root/spotube_navigation_bar.dart | 3 +- lib/hooks/use_custom_status_bar_color.dart | 39 ++++++++++------ 4 files changed, 68 insertions(+), 42 deletions(-) diff --git a/lib/components/player/player.dart b/lib/components/player/player.dart index 4075cf354..42563d1a3 100644 --- a/lib/components/player/player.dart +++ b/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 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); }, ), diff --git a/lib/components/player/player_overlay.dart b/lib/components/player/player_overlay.dart index b69dc4bdc..c6818dbc2 100644 --- a/lib/components/player/player_overlay.dart +++ b/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), ), ), ); diff --git a/lib/components/root/spotube_navigation_bar.dart b/lib/components/root/spotube_navigation_bar.dart index ec4c4f2d6..9cea56038 100644 --- a/lib/components/root/spotube_navigation_bar.dart +++ b/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(); } diff --git a/lib/hooks/use_custom_status_bar_color.dart b/lib/hooks/use_custom_status_bar_color.dart index 92f845cf5..d1266fe26 100644 --- a/lib/hooks/use_custom_status_bar_color.dart +++ b/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(() {