kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2025-09-13 16:05:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: mobile track collection search bar position and page_window_title_bar exception on mobile platforms

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2023-01-06 10:56:47 +06:00
parent a06cd0da84
commit d0aaa971fe
4 changed files with 120 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
lib/components/library/user_artists.dart
View File

@ -56,10 +56,13 @@ class UserArtists extends HookConsumerWidget {
preferredSize: const Size.fromHeight(50), preferredSize: const Size.fromHeight(50),
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0), padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: PlatformTextField( child: ColoredBox(
onChanged: (value) => searchText.value = value, color: PlatformTheme.of(context).scaffoldBackgroundColor!,
prefixIcon: Icons.filter_alt_outlined, child: PlatformTextField(
placeholder: 'Filter artists...', onChanged: (value) => searchText.value = value,
prefixIcon: Icons.filter_alt_outlined,
placeholder: 'Filter artists...',
),
), ),
), ),
), ),

2
lib/components/shared/page_window_title_bar.dart
View File

@ -54,7 +54,7 @@ class PageWindowTitleBar extends StatefulHookWidget with PreferredSizeWidget {
class _PageWindowTitleBarState extends State<PageWindowTitleBar> { class _PageWindowTitleBarState extends State<PageWindowTitleBar> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final isMaximized = useState(appWindow.isMaximized); final isMaximized = useState(kIsDesktop ? appWindow.isMaximized : false);
useEffect(() { useEffect(() {
if (platform == TargetPlatform.windows && if (platform == TargetPlatform.windows &&

197
lib/components/shared/track_table/track_collection_view.dart
View File

@ -141,43 +141,48 @@ class TrackCollectionView<T> extends HookConsumerWidget {
return () => controller.removeListener(listener); return () => controller.removeListener(listener);
}, [collapsed.value]); }, [collapsed.value]);
final leading = Row( final searchbar = ConstrainedBox(
mainAxisSize: MainAxisSize.min, constraints: const BoxConstraints(
children: [ maxWidth: 400,
if (platform != TargetPlatform.windows) maxHeight: 50,
PlatformBackButton(color: color?.titleTextColor), ),
const SizedBox(width: 10), child: PlatformTextField(
ConstrainedBox( onChanged: (value) => searchText.value = value,
constraints: const BoxConstraints( placeholder: "Search tracks...",
maxWidth: 400, backgroundColor: Colors.transparent,
maxHeight: 40, focusedBackgroundColor: Colors.transparent,
), style: TextStyle(
child: PlatformTextField( color: color?.titleTextColor,
onChanged: (value) => searchText.value = value,
placeholder: "Search tracks...",
backgroundColor: Colors.transparent,
prefixIcon: Icons.search_rounded,
),
), ),
], placeholderStyle: TextStyle(
color: color?.titleTextColor,
),
focusedStyle: TextStyle(
color: color?.titleTextColor,
),
borderColor: color?.titleTextColor,
prefixIconColor: color?.titleTextColor,
cursorColor: color?.titleTextColor,
prefixIcon: Icons.search_rounded,
),
); );
useEffect(() { useEffect(() {
OverlayEntry? entry; OverlayEntry? entry;
WidgetsBinding.instance.addPostFrameCallback((_) { WidgetsBinding.instance.addPostFrameCallback((_) {
if (platform == TargetPlatform.windows) { if (platform == TargetPlatform.windows && kIsDesktop) {
entry = OverlayEntry(builder: (context) { entry = OverlayEntry(builder: (context) {
return Positioned( return Positioned(
left: 40, left: 40,
top: 7, top: 7,
child: leading, child: searchbar,
); );
}); });
Overlay.of(context)!.insert(entry!); Overlay.of(context)!.insert(entry!);
} }
}); });
return () => entry?.remove(); return () => entry?.remove();
}, [color?.titleTextColor, leading]); }, [color?.titleTextColor]);
return SafeArea( return SafeArea(
child: PlatformScaffold( child: PlatformScaffold(
@ -185,7 +190,14 @@ class TrackCollectionView<T> extends HookConsumerWidget {
? PageWindowTitleBar( ? PageWindowTitleBar(
backgroundColor: color?.color, backgroundColor: color?.color,
foregroundColor: color?.titleTextColor, foregroundColor: color?.titleTextColor,
leading: leading, leading: Row(
mainAxisSize: MainAxisSize.min,
children: [
PlatformBackButton(color: color?.titleTextColor),
const SizedBox(width: 10),
searchbar,
],
),
) )
: null, : null,
body: CustomScrollView( body: CustomScrollView(
@ -197,7 +209,9 @@ class TrackCollectionView<T> extends HookConsumerWidget {
pinned: true, pinned: true,
expandedHeight: 400, expandedHeight: 400,
automaticallyImplyLeading: kIsMobile, automaticallyImplyLeading: kIsMobile,
leading: kIsMobile ? leading : null, leading: kIsMobile
? PlatformBackButton(color: color?.titleTextColor)
: null,
iconTheme: IconThemeData(color: color?.titleTextColor), iconTheme: IconThemeData(color: color?.titleTextColor),
primary: true, primary: true,
backgroundColor: color?.color, backgroundColor: color?.color,
@ -210,85 +224,84 @@ class TrackCollectionView<T> extends HookConsumerWidget {
), ),
) )
: null, : null,
flexibleSpace: LayoutBuilder(builder: (context, constrains) { flexibleSpace: FlexibleSpaceBar(
return FlexibleSpaceBar( background: DecoratedBox(
background: Container( decoration: BoxDecoration(
decoration: BoxDecoration( gradient: LinearGradient(
gradient: LinearGradient( colors: [
colors: [ color?.color ?? Colors.transparent,
color?.color ?? Colors.transparent, Theme.of(context).canvasColor,
Theme.of(context).canvasColor, ],
], begin: const FractionalOffset(0, 0),
begin: const FractionalOffset(0, 0), end: const FractionalOffset(0, 1),
end: const FractionalOffset(0, 1), tileMode: TileMode.clamp,
tileMode: TileMode.clamp,
),
), ),
child: Material( ),
textStyle: PlatformTheme.of(context).textTheme!.body!, child: Material(
type: MaterialType.transparency, textStyle: PlatformTheme.of(context).textTheme!.body!,
child: Padding( type: MaterialType.transparency,
padding: const EdgeInsets.symmetric( child: Padding(
horizontal: 20, padding: const EdgeInsets.symmetric(
vertical: 20, horizontal: 20,
), ),
child: Wrap( child: Wrap(
spacing: 20, spacing: 20,
runSpacing: 20, runSpacing: 20,
crossAxisAlignment: WrapCrossAlignment.center, crossAxisAlignment: WrapCrossAlignment.center,
alignment: WrapAlignment.center, alignment: WrapAlignment.center,
runAlignment: WrapAlignment.center, runAlignment: WrapAlignment.center,
children: [ children: [
Container( Container(
constraints: constraints: const BoxConstraints(maxHeight: 200),
const BoxConstraints(maxHeight: 200), child: ClipRRect(
child: ClipRRect( borderRadius: BorderRadius.circular(10),
borderRadius: BorderRadius.circular(10), child: UniversalImage(
child: UniversalImage( path: titleImage,
path: titleImage, placeholder: (context, url) {
placeholder: (context, url) { return const UniversalImage(
return const UniversalImage( path: "assets/album-placeholder.png",
path: "assets/album-placeholder.png", );
); },
},
),
), ),
), ),
Column( ),
crossAxisAlignment: CrossAxisAlignment.start, Column(
mainAxisAlignment: crossAxisAlignment: CrossAxisAlignment.start,
MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
PlatformText.headline( PlatformText.headline(
title, title,
style: TextStyle(
color: color?.titleTextColor,
fontWeight: FontWeight.w600,
),
),
if (description != null)
PlatformText(
description!,
style: TextStyle( style: TextStyle(
color: color?.titleTextColor, color: color?.bodyTextColor,
fontWeight: FontWeight.w600,
), ),
maxLines: 2,
overflow: TextOverflow.fade,
), ),
if (description != null) const SizedBox(height: 10),
PlatformText( Row(
description!, mainAxisSize: MainAxisSize.min,
style: TextStyle( children: buttons,
color: color?.bodyTextColor, ),
), if (kIsMobile) ...[
maxLines: 2,
overflow: TextOverflow.fade,
),
const SizedBox(height: 10), const SizedBox(height: 10),
Row( searchbar,
mainAxisSize: MainAxisSize.min, ]
children: buttons, ],
), )
], ],
)
],
),
), ),
), ),
), ),
); ),
}), ),
), ),
HookBuilder( HookBuilder(
builder: (context) { builder: (context) {

8
lib/themes/light_theme.dart
View File

@ -107,6 +107,7 @@ ThemeData lightTheme({
if (states.contains(MaterialState.selected)) { if (states.contains(MaterialState.selected)) {
return accentMaterialColor[500]; return accentMaterialColor[500];
} }
return null;
}), }),
), ),
tabBarTheme: TabBarTheme( tabBarTheme: TabBarTheme(
@ -162,7 +163,12 @@ final linuxTheme = AdwaitaThemeData.light().copyWith(
) )
], ],
switchTheme: SwitchThemeData( switchTheme: SwitchThemeData(
trackColor: MaterialStateProperty.all(const Color(0xFF3582e5)), trackColor: MaterialStateProperty.resolveWith((states) {
if (states.contains(MaterialState.selected)) {
return const Color(0xFF3582e5);
}
return Colors.grey[300];
}),
), ),
colorScheme: const ColorScheme.light( colorScheme: const ColorScheme.light(
primary: Color(0xFF3582e5), primary: Color(0xFF3582e5),