fix(macos): backbutton and window button overlap and unused empty space on home

This commit is contained in:
Kingkor Roy Tirtho 2024-01-24 12:03:31 +06:00
parent a752cf4c97
commit b9417ca357
3 changed files with 47 additions and 36 deletions

View File

@ -62,28 +62,45 @@ class _PageWindowTitleBarState extends ConsumerState<PageWindowTitleBar> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return GestureDetector( final mediaQuery = MediaQuery.of(context);
onHorizontalDragStart: onDrag,
onVerticalDragStart: onDrag, return LayoutBuilder(builder: (context, constrains) {
child: AppBar( final hasFullscreen = mediaQuery.size.width == constrains.maxWidth;
leading: widget.leading, final hasLeadingOrCanPop =
automaticallyImplyLeading: widget.automaticallyImplyLeading, widget.leading != null || Navigator.canPop(context);
actions: [
...?widget.actions, return GestureDetector(
WindowTitleBarButtons(foregroundColor: widget.foregroundColor), onHorizontalDragStart: onDrag,
], onVerticalDragStart: onDrag,
backgroundColor: widget.backgroundColor, child: Padding(
foregroundColor: widget.foregroundColor, padding: EdgeInsets.only(
actionsIconTheme: widget.actionsIconTheme, left: DesktopTools.platform.isMacOS &&
centerTitle: widget.centerTitle, hasFullscreen &&
titleSpacing: widget.titleSpacing, hasLeadingOrCanPop
toolbarOpacity: widget.toolbarOpacity, ? 65
leadingWidth: widget.leadingWidth, : 0,
toolbarTextStyle: widget.toolbarTextStyle, ),
titleTextStyle: widget.titleTextStyle, child: AppBar(
title: widget.title, 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,
toolbarOpacity: widget.toolbarOpacity,
leadingWidth: widget.leadingWidth,
toolbarTextStyle: widget.toolbarTextStyle,
titleTextStyle: widget.titleTextStyle,
title: widget.title,
),
),
);
});
} }
} }

View File

@ -1,9 +1,7 @@
import 'package:buttons_tabbar/buttons_tabbar.dart'; import 'package:buttons_tabbar/buttons_tabbar.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:spotube/hooks/utils/use_breakpoint_value.dart';
import 'package:spotube/hooks/utils/use_brightness_value.dart'; import 'package:spotube/hooks/utils/use_brightness_value.dart';
import 'package:spotube/utils/platform.dart';
class ThemedButtonsTabBar extends HookWidget implements PreferredSizeWidget { class ThemedButtonsTabBar extends HookWidget implements PreferredSizeWidget {
final List<Widget> tabs; final List<Widget> tabs;
@ -17,16 +15,8 @@ class ThemedButtonsTabBar extends HookWidget implements PreferredSizeWidget {
Color.lerp(theme.colorScheme.primary, Colors.black, 0.7)!, Color.lerp(theme.colorScheme.primary, Colors.black, 0.7)!,
); );
final breakpoint = useBreakpointValue(
xs: 85.0,
sm: 85.0,
md: 35.0,
others: 0.0,
);
return Padding( return Padding(
padding: EdgeInsets.only( padding: const EdgeInsets.only(
left: kIsMacOS ? breakpoint : 0,
top: 8, top: 8,
bottom: 8, bottom: 8,
), ),

View File

@ -1,6 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_desktop_tools/flutter_desktop_tools.dart'; import 'package:flutter_desktop_tools/flutter_desktop_tools.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:gap/gap.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:spotube/components/home/sections/featured.dart'; import 'package:spotube/components/home/sections/featured.dart';
import 'package:spotube/components/home/sections/friends.dart'; import 'package:spotube/components/home/sections/friends.dart';
@ -19,12 +20,15 @@ class HomePage extends HookConsumerWidget {
return SafeArea( return SafeArea(
bottom: false, bottom: false,
child: Scaffold( child: Scaffold(
appBar: DesktopTools.platform.isMobile appBar:
? null DesktopTools.platform.isLinux || DesktopTools.platform.isWindows
: const PageWindowTitleBar(), ? const PageWindowTitleBar()
: null,
body: CustomScrollView( body: CustomScrollView(
controller: controller, controller: controller,
slivers: [ slivers: [
if (DesktopTools.platform.isMacOS || DesktopTools.platform.isWeb)
const SliverGap(20),
const HomeGenresSection(), const HomeGenresSection(),
SliverList.list( SliverList.list(
children: const [ children: const [