fix(windows): windows global title bar

This commit is contained in:
Kingkor Roy Tirtho 2022-12-08 14:21:51 +06:00
parent 5b0e22c1b6
commit bd18f19821
4 changed files with 159 additions and 71 deletions

View File

@ -1,40 +1,114 @@
import 'package:bitsdojo_window/bitsdojo_window.dart'; import 'package:bitsdojo_window/bitsdojo_window.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:platform_ui/platform_ui.dart'; import 'package:platform_ui/platform_ui.dart';
import 'package:spotube/utils/platform.dart'; import 'package:spotube/utils/platform.dart';
class PageWindowTitleBar extends PlatformAppBar { class PageWindowTitleBar extends StatefulHookWidget with PreferredSizeWidget {
final Widget? leading;
final bool automaticallyImplyLeading;
final Widget? title;
final List<Widget>? actions;
final Color? backgroundColor;
final Color? foregroundColor;
final IconThemeData? actionsIconTheme;
final bool? centerTitle;
final double? titleSpacing;
final double toolbarOpacity;
final double? leadingWidth;
final TextStyle? toolbarTextStyle;
final TextStyle? titleTextStyle;
final double? titleWidth;
final Widget? center;
final bool hideWhenWindows;
PageWindowTitleBar({ PageWindowTitleBar({
super.backgroundColor, Key? key,
List<Widget>? actions, this.title,
super.actionsIconTheme, this.actions,
super.automaticallyImplyLeading = false, this.center,
super.centerTitle, this.toolbarOpacity = 1,
super.foregroundColor, this.backgroundColor,
super.key, this.actionsIconTheme,
super.leading, this.automaticallyImplyLeading = false,
super.leadingWidth, this.centerTitle,
Widget? center, this.foregroundColor,
super.titleSpacing, this.leading,
super.titleTextStyle, this.leadingWidth,
super.titleWidth, this.titleSpacing,
super.toolbarOpacity, this.titleTextStyle,
super.toolbarTextStyle, this.titleWidth,
}) : super( this.toolbarTextStyle,
this.hideWhenWindows = true,
}) : super(key: key);
@override
Size get preferredSize => Size.fromHeight(
platform == TargetPlatform.windows ? 33 : kToolbarHeight,
);
@override
State<PageWindowTitleBar> createState() => _PageWindowTitleBarState();
}
class _PageWindowTitleBarState extends State<PageWindowTitleBar> {
@override
Widget build(BuildContext context) {
useEffect(() {
if (platform == TargetPlatform.windows &&
widget.hideWhenWindows &&
Navigator.of(context).canPop()) {
final entry = OverlayEntry(
builder: (context) => const Positioned(
left: 5,
top: 5,
child: PlatformBackButton(),
),
);
WidgetsBinding.instance.addPostFrameCallback((_) {
Overlay.of(context)?.insert(entry);
});
return () {
entry.remove();
};
}
return null;
}, [platform, widget.hideWhenWindows]);
var appBar = PlatformAppBar(
actions: [ actions: [
...?actions, ...?widget.actions,
if (!kIsMacOS && !kIsMobile) if (!kIsMacOS && !kIsMobile)
platform == TargetPlatform.linux platform == TargetPlatform.linux
? MoveWindow(child: const PlatformWindowButtons()) ? MoveWindow(child: const PlatformWindowButtons())
: const PlatformWindowButtons(), : const PlatformWindowButtons(),
], ],
title: platform == TargetPlatform.linux title: platform == TargetPlatform.linux
? MoveWindow(child: Center(child: center)) ? MoveWindow(child: Center(child: widget.center))
: center, : widget.center,
toolbarOpacity: widget.toolbarOpacity,
backgroundColor: widget.backgroundColor,
actionsIconTheme: widget.actionsIconTheme,
automaticallyImplyLeading: widget.automaticallyImplyLeading,
centerTitle: widget.centerTitle,
foregroundColor: widget.foregroundColor,
leading: widget.leading,
leadingWidth: widget.leadingWidth,
titleSpacing: widget.titleSpacing,
titleTextStyle: widget.titleTextStyle,
titleWidth: widget.titleWidth,
toolbarTextStyle: widget.toolbarTextStyle,
); );
@override if (platform == TargetPlatform.windows && widget.hideWhenWindows) {
Widget build(BuildContext context) { return const SizedBox.shrink();
return MoveWindow(child: super.build(context)); }
return MoveWindow(
child: appBar,
);
} }
} }

View File

@ -23,12 +23,7 @@ class LibraryPage extends HookConsumerWidget {
const UserAlbums(), const UserAlbums(),
][index.value]; ][index.value];
return SafeArea( var tabbar = PlatformTabBar(
child: PlatformScaffold(
appBar: PageWindowTitleBar(
titleWidth: 347,
centerTitle: true,
center: PlatformTabBar(
androidIsScrollable: true, androidIsScrollable: true,
selectedIndex: index.value, selectedIndex: index.value,
onSelectedIndexChanged: (value) => index.value = value, onSelectedIndexChanged: (value) => index.value = value,
@ -41,7 +36,18 @@ class LibraryPage extends HookConsumerWidget {
PlatformTab(label: 'Artists', icon: const SizedBox.shrink()), PlatformTab(label: 'Artists', icon: const SizedBox.shrink()),
PlatformTab(label: 'Albums', icon: const SizedBox.shrink()), PlatformTab(label: 'Albums', icon: const SizedBox.shrink()),
], ],
), );
return SafeArea(
child: PlatformScaffold(
appBar: platform == TargetPlatform.windows
? PreferredSize(
preferredSize: const Size.fromHeight(40),
child: tabbar,
)
: PageWindowTitleBar(
titleWidth: 347,
centerTitle: true,
center: tabbar,
), ),
body: body, body: body,
), ),

View File

@ -42,19 +42,13 @@ class LyricsPage extends HookConsumerWidget {
GeniusLyrics(palette: palette), GeniusLyrics(palette: palette),
][index.value]; ][index.value];
return PlatformScaffold( final tabbar = PreferredSize(
extendBodyBehindAppBar: true, preferredSize: const Size.fromHeight(40),
appBar: !kIsMacOS child: PlatformTabBar(
? PageWindowTitleBar( isNavigational: PlatformProperty.only(linux: true, other: false),
toolbarOpacity: 0,
backgroundColor: Colors.transparent,
center: PlatformTabBar(
isNavigational:
PlatformProperty.only(linux: true, other: false),
selectedIndex: index.value, selectedIndex: index.value,
onSelectedIndexChanged: (value) => index.value = value, onSelectedIndexChanged: (value) => index.value = value,
backgroundColor: backgroundColor: PlatformTheme.of(context).scaffoldBackgroundColor,
PlatformTheme.of(context).scaffoldBackgroundColor,
tabs: [ tabs: [
PlatformTab( PlatformTab(
label: "Synced", label: "Synced",
@ -68,7 +62,17 @@ class LyricsPage extends HookConsumerWidget {
), ),
], ],
), ),
);
return PlatformScaffold(
extendBodyBehindAppBar: true,
appBar: !kIsMacOS
? (platform != TargetPlatform.windows
? PageWindowTitleBar(
toolbarOpacity: 0,
backgroundColor: Colors.transparent,
center: tabbar,
) )
: tabbar)
: null, : null,
body: Container( body: Container(
clipBehavior: Clip.hardEdge, clipBehavior: Clip.hardEdge,

View File

@ -8,6 +8,7 @@ import 'package:spotube/components/shared/dialogs/replace_downloaded_dialog.dart
import 'package:spotube/components/root/bottom_player.dart'; import 'package:spotube/components/root/bottom_player.dart';
import 'package:spotube/components/root/sidebar.dart'; import 'package:spotube/components/root/sidebar.dart';
import 'package:spotube/components/root/spotube_navigation_bar.dart'; import 'package:spotube/components/root/spotube_navigation_bar.dart';
import 'package:spotube/components/shared/page_window_title_bar.dart';
import 'package:spotube/hooks/use_update_checker.dart'; import 'package:spotube/hooks/use_update_checker.dart';
import 'package:spotube/provider/downloader_provider.dart'; import 'package:spotube/provider/downloader_provider.dart';
@ -63,6 +64,9 @@ class RootApp extends HookConsumerWidget {
}, [backgroundColor]); }, [backgroundColor]);
return PlatformScaffold( return PlatformScaffold(
appBar: platform == TargetPlatform.windows
? PageWindowTitleBar(hideWhenWindows: false)
: null,
body: Sidebar( body: Sidebar(
selectedIndex: index.value, selectedIndex: index.value,
onSelectedIndexChanged: (i) { onSelectedIndexChanged: (i) {