From 940b79c880ed99efd5513218401413ae1e2a664f Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Thu, 28 Mar 2024 19:38:23 +0600 Subject: [PATCH] feat: add user icon next to devices button --- .../shared/page_window_title_bar.dart | 98 +++++++++++++++---- lib/pages/home/home.dart | 32 +++--- 2 files changed, 93 insertions(+), 37 deletions(-) diff --git a/lib/components/shared/page_window_title_bar.dart b/lib/components/shared/page_window_title_bar.dart index ff40bac7..f956fa28 100644 --- a/lib/components/shared/page_window_title_bar.dart +++ b/lib/components/shared/page_window_title_bar.dart @@ -26,6 +26,8 @@ class PageWindowTitleBar extends StatefulHookConsumerWidget final double? titleWidth; final Widget? title; + final bool _sliver; + const PageWindowTitleBar({ super.key, this.actions, @@ -42,7 +44,38 @@ class PageWindowTitleBar extends StatefulHookConsumerWidget this.titleTextStyle, this.titleWidth, this.toolbarTextStyle, - }); + }) : _sliver = false, + pinned = false, + floating = false, + snap = false, + stretch = false; + + final bool pinned; + final bool floating; + final bool snap; + final bool stretch; + + const PageWindowTitleBar.sliver({ + super.key, + this.actions, + this.title, + this.backgroundColor, + this.actionsIconTheme, + this.automaticallyImplyLeading = false, + this.centerTitle, + this.foregroundColor, + this.leading, + this.leadingWidth, + this.titleSpacing, + this.titleTextStyle, + this.titleWidth, + this.toolbarTextStyle, + this.pinned = false, + this.floating = false, + this.snap = false, + this.stretch = false, + }) : _sliver = true, + toolbarOpacity = 1; @override Size get preferredSize => const Size.fromHeight(kToolbarHeight); @@ -64,6 +97,48 @@ class _PageWindowTitleBarState extends ConsumerState { Widget build(BuildContext context) { final mediaQuery = MediaQuery.of(context); + if (widget._sliver) { + return SliverLayoutBuilder( + builder: (context, constraints) { + final hasFullscreen = + mediaQuery.size.width == constraints.crossAxisExtent; + final hasLeadingOrCanPop = + widget.leading != null || Navigator.canPop(context); + + return SliverPadding( + padding: EdgeInsets.only( + left: DesktopTools.platform.isMacOS && + hasFullscreen && + hasLeadingOrCanPop + ? 65 + : 0, + ), + sliver: SliverAppBar( + leading: widget.leading, + automaticallyImplyLeading: widget.automaticallyImplyLeading, + actions: [ + ...?widget.actions, + WindowTitleBarButtons(foregroundColor: widget.foregroundColor), + ], + backgroundColor: widget.backgroundColor, + foregroundColor: widget.foregroundColor, + actionsIconTheme: widget.actionsIconTheme, + centerTitle: widget.centerTitle, + titleSpacing: widget.titleSpacing, + leadingWidth: widget.leadingWidth, + toolbarTextStyle: widget.toolbarTextStyle, + titleTextStyle: widget.titleTextStyle, + title: widget.title, + pinned: widget.pinned, + floating: widget.floating, + snap: widget.snap, + stretch: widget.stretch, + ), + ); + }, + ); + } + return LayoutBuilder(builder: (context, constrains) { final hasFullscreen = mediaQuery.size.width == constrains.maxWidth; final hasLeadingOrCanPop = @@ -349,10 +424,7 @@ class WindowButton extends StatelessWidget { class MinimizeWindowButton extends WindowButton { MinimizeWindowButton( - {super.key, - super.colors, - super.onPressed, - bool? animate}) + {super.key, super.colors, super.onPressed, bool? animate}) : super( animate: animate ?? false, iconBuilder: (buttonContext) => @@ -362,10 +434,7 @@ class MinimizeWindowButton extends WindowButton { class MaximizeWindowButton extends WindowButton { MaximizeWindowButton( - {super.key, - super.colors, - super.onPressed, - bool? animate}) + {super.key, super.colors, super.onPressed, bool? animate}) : super( animate: animate ?? false, iconBuilder: (buttonContext) => @@ -374,11 +443,7 @@ class MaximizeWindowButton extends WindowButton { } class RestoreWindowButton extends WindowButton { - RestoreWindowButton( - {super.key, - super.colors, - super.onPressed, - bool? animate}) + RestoreWindowButton({super.key, super.colors, super.onPressed, bool? animate}) : super( animate: animate ?? false, iconBuilder: (buttonContext) => @@ -394,10 +459,7 @@ final _defaultCloseButtonColors = WindowButtonColors( class CloseWindowButton extends WindowButton { CloseWindowButton( - {super.key, - WindowButtonColors? colors, - super.onPressed, - bool? animate}) + {super.key, WindowButtonColors? colors, super.onPressed, bool? animate}) : super( colors: colors ?? _defaultCloseButtonColors, animate: animate ?? false, diff --git a/lib/pages/home/home.dart b/lib/pages/home/home.dart index 1e7e3389..487ceb4c 100644 --- a/lib/pages/home/home.dart +++ b/lib/pages/home/home.dart @@ -3,6 +3,7 @@ import 'package:flutter_desktop_tools/flutter_desktop_tools.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:gap/gap.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; +import 'package:spotube/collections/spotube_icons.dart'; import 'package:spotube/components/connect/connect_device.dart'; import 'package:spotube/components/home/sections/featured.dart'; import 'package:spotube/components/home/sections/friends.dart'; @@ -21,28 +22,21 @@ class HomePage extends HookConsumerWidget { return SafeArea( bottom: false, child: Scaffold( - appBar: - DesktopTools.platform.isLinux || DesktopTools.platform.isWindows - ? const PageWindowTitleBar( - actions: [ - ConnectDeviceButton(), - Gap(10), - ], - ) - : null, body: CustomScrollView( controller: controller, slivers: [ - if (DesktopTools.platform.isMacOS || DesktopTools.platform.isWeb) - const SliverGap(20), - if (!DesktopTools.platform.isLinux && - !DesktopTools.platform.isWindows) - const SliverAppBar( - actions: [ - ConnectDeviceButton(), - Gap(10), - ], - ), + PageWindowTitleBar.sliver( + pinned: DesktopTools.platform.isDesktop, + actions: [ + const ConnectDeviceButton(), + const Gap(10), + IconButton.filledTonal( + icon: const Icon(SpotubeIcons.user), + onPressed: () {}, + ), + const Gap(10), + ], + ), const HomeGenresSection(), const SliverToBoxAdapter(child: HomeFeaturedSection()), const HomePageFriendsSection(),