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,9 +62,24 @@ class _PageWindowTitleBarState extends ConsumerState<PageWindowTitleBar> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final mediaQuery = MediaQuery.of(context);
return LayoutBuilder(builder: (context, constrains) {
final hasFullscreen = mediaQuery.size.width == constrains.maxWidth;
final hasLeadingOrCanPop =
widget.leading != null || Navigator.canPop(context);
return GestureDetector( return GestureDetector(
onHorizontalDragStart: onDrag, onHorizontalDragStart: onDrag,
onVerticalDragStart: onDrag, onVerticalDragStart: onDrag,
child: Padding(
padding: EdgeInsets.only(
left: DesktopTools.platform.isMacOS &&
hasFullscreen &&
hasLeadingOrCanPop
? 65
: 0,
),
child: AppBar( child: AppBar(
leading: widget.leading, leading: widget.leading,
automaticallyImplyLeading: widget.automaticallyImplyLeading, automaticallyImplyLeading: widget.automaticallyImplyLeading,
@ -83,7 +98,9 @@ class _PageWindowTitleBarState extends ConsumerState<PageWindowTitleBar> {
titleTextStyle: widget.titleTextStyle, titleTextStyle: widget.titleTextStyle,
title: widget.title, 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 [