From d0aaa971fe358b9cb5dc7a35cc82eaf6520f7ab4 Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Fri, 6 Jan 2023 10:56:47 +0600 Subject: [PATCH] fix: mobile track collection search bar position and page_window_title_bar exception on mobile platforms --- lib/components/library/user_artists.dart | 11 +- .../shared/page_window_title_bar.dart | 2 +- .../track_table/track_collection_view.dart | 197 ++++++++++-------- lib/themes/light_theme.dart | 8 +- 4 files changed, 120 insertions(+), 98 deletions(-) diff --git a/lib/components/library/user_artists.dart b/lib/components/library/user_artists.dart index 2411c90ff..2ef70fe34 100644 --- a/lib/components/library/user_artists.dart +++ b/lib/components/library/user_artists.dart @@ -56,10 +56,13 @@ class UserArtists extends HookConsumerWidget { preferredSize: const Size.fromHeight(50), child: Padding( padding: const EdgeInsets.symmetric(horizontal: 8.0), - child: PlatformTextField( - onChanged: (value) => searchText.value = value, - prefixIcon: Icons.filter_alt_outlined, - placeholder: 'Filter artists...', + child: ColoredBox( + color: PlatformTheme.of(context).scaffoldBackgroundColor!, + child: PlatformTextField( + onChanged: (value) => searchText.value = value, + prefixIcon: Icons.filter_alt_outlined, + placeholder: 'Filter artists...', + ), ), ), ), diff --git a/lib/components/shared/page_window_title_bar.dart b/lib/components/shared/page_window_title_bar.dart index 434d99271..55a35f99a 100644 --- a/lib/components/shared/page_window_title_bar.dart +++ b/lib/components/shared/page_window_title_bar.dart @@ -54,7 +54,7 @@ class PageWindowTitleBar extends StatefulHookWidget with PreferredSizeWidget { class _PageWindowTitleBarState extends State { @override Widget build(BuildContext context) { - final isMaximized = useState(appWindow.isMaximized); + final isMaximized = useState(kIsDesktop ? appWindow.isMaximized : false); useEffect(() { if (platform == TargetPlatform.windows && diff --git a/lib/components/shared/track_table/track_collection_view.dart b/lib/components/shared/track_table/track_collection_view.dart index cbdaf0ed8..c5fcdc433 100644 --- a/lib/components/shared/track_table/track_collection_view.dart +++ b/lib/components/shared/track_table/track_collection_view.dart @@ -141,43 +141,48 @@ class TrackCollectionView extends HookConsumerWidget { return () => controller.removeListener(listener); }, [collapsed.value]); - final leading = Row( - mainAxisSize: MainAxisSize.min, - children: [ - if (platform != TargetPlatform.windows) - PlatformBackButton(color: color?.titleTextColor), - const SizedBox(width: 10), - ConstrainedBox( - constraints: const BoxConstraints( - maxWidth: 400, - maxHeight: 40, - ), - child: PlatformTextField( - onChanged: (value) => searchText.value = value, - placeholder: "Search tracks...", - backgroundColor: Colors.transparent, - prefixIcon: Icons.search_rounded, - ), + final searchbar = ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 400, + maxHeight: 50, + ), + child: PlatformTextField( + onChanged: (value) => searchText.value = value, + placeholder: "Search tracks...", + backgroundColor: Colors.transparent, + focusedBackgroundColor: Colors.transparent, + style: TextStyle( + color: color?.titleTextColor, + ), + placeholderStyle: TextStyle( + color: color?.titleTextColor, ), - ], + focusedStyle: TextStyle( + color: color?.titleTextColor, + ), + borderColor: color?.titleTextColor, + prefixIconColor: color?.titleTextColor, + cursorColor: color?.titleTextColor, + prefixIcon: Icons.search_rounded, + ), ); useEffect(() { OverlayEntry? entry; WidgetsBinding.instance.addPostFrameCallback((_) { - if (platform == TargetPlatform.windows) { + if (platform == TargetPlatform.windows && kIsDesktop) { entry = OverlayEntry(builder: (context) { return Positioned( left: 40, top: 7, - child: leading, + child: searchbar, ); }); Overlay.of(context)!.insert(entry!); } }); return () => entry?.remove(); - }, [color?.titleTextColor, leading]); + }, [color?.titleTextColor]); return SafeArea( child: PlatformScaffold( @@ -185,7 +190,14 @@ class TrackCollectionView extends HookConsumerWidget { ? PageWindowTitleBar( backgroundColor: color?.color, foregroundColor: color?.titleTextColor, - leading: leading, + leading: Row( + mainAxisSize: MainAxisSize.min, + children: [ + PlatformBackButton(color: color?.titleTextColor), + const SizedBox(width: 10), + searchbar, + ], + ), ) : null, body: CustomScrollView( @@ -197,7 +209,9 @@ class TrackCollectionView extends HookConsumerWidget { pinned: true, expandedHeight: 400, automaticallyImplyLeading: kIsMobile, - leading: kIsMobile ? leading : null, + leading: kIsMobile + ? PlatformBackButton(color: color?.titleTextColor) + : null, iconTheme: IconThemeData(color: color?.titleTextColor), primary: true, backgroundColor: color?.color, @@ -210,85 +224,84 @@ class TrackCollectionView extends HookConsumerWidget { ), ) : null, - flexibleSpace: LayoutBuilder(builder: (context, constrains) { - return FlexibleSpaceBar( - background: Container( - decoration: BoxDecoration( - gradient: LinearGradient( - colors: [ - color?.color ?? Colors.transparent, - Theme.of(context).canvasColor, - ], - begin: const FractionalOffset(0, 0), - end: const FractionalOffset(0, 1), - tileMode: TileMode.clamp, - ), + flexibleSpace: FlexibleSpaceBar( + background: DecoratedBox( + decoration: BoxDecoration( + gradient: LinearGradient( + colors: [ + color?.color ?? Colors.transparent, + Theme.of(context).canvasColor, + ], + begin: const FractionalOffset(0, 0), + end: const FractionalOffset(0, 1), + tileMode: TileMode.clamp, ), - child: Material( - textStyle: PlatformTheme.of(context).textTheme!.body!, - type: MaterialType.transparency, - child: Padding( - padding: const EdgeInsets.symmetric( - horizontal: 20, - vertical: 20, - ), - child: Wrap( - spacing: 20, - runSpacing: 20, - crossAxisAlignment: WrapCrossAlignment.center, - alignment: WrapAlignment.center, - runAlignment: WrapAlignment.center, - children: [ - Container( - constraints: - const BoxConstraints(maxHeight: 200), - child: ClipRRect( - borderRadius: BorderRadius.circular(10), - child: UniversalImage( - path: titleImage, - placeholder: (context, url) { - return const UniversalImage( - path: "assets/album-placeholder.png", - ); - }, - ), + ), + child: Material( + textStyle: PlatformTheme.of(context).textTheme!.body!, + type: MaterialType.transparency, + child: Padding( + padding: const EdgeInsets.symmetric( + horizontal: 20, + ), + child: Wrap( + spacing: 20, + runSpacing: 20, + crossAxisAlignment: WrapCrossAlignment.center, + alignment: WrapAlignment.center, + runAlignment: WrapAlignment.center, + children: [ + Container( + constraints: const BoxConstraints(maxHeight: 200), + child: ClipRRect( + borderRadius: BorderRadius.circular(10), + child: UniversalImage( + path: titleImage, + placeholder: (context, url) { + return const UniversalImage( + path: "assets/album-placeholder.png", + ); + }, ), ), - Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: - MainAxisAlignment.spaceBetween, - children: [ - PlatformText.headline( - title, + ), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + PlatformText.headline( + title, + style: TextStyle( + color: color?.titleTextColor, + fontWeight: FontWeight.w600, + ), + ), + if (description != null) + PlatformText( + description!, style: TextStyle( - color: color?.titleTextColor, - fontWeight: FontWeight.w600, + color: color?.bodyTextColor, ), + maxLines: 2, + overflow: TextOverflow.fade, ), - if (description != null) - PlatformText( - description!, - style: TextStyle( - color: color?.bodyTextColor, - ), - maxLines: 2, - overflow: TextOverflow.fade, - ), + const SizedBox(height: 10), + Row( + mainAxisSize: MainAxisSize.min, + children: buttons, + ), + if (kIsMobile) ...[ const SizedBox(height: 10), - Row( - mainAxisSize: MainAxisSize.min, - children: buttons, - ), - ], - ) - ], - ), + searchbar, + ] + ], + ) + ], ), ), ), - ); - }), + ), + ), ), HookBuilder( builder: (context) { diff --git a/lib/themes/light_theme.dart b/lib/themes/light_theme.dart index 188be16ea..8160e7732 100644 --- a/lib/themes/light_theme.dart +++ b/lib/themes/light_theme.dart @@ -107,6 +107,7 @@ ThemeData lightTheme({ if (states.contains(MaterialState.selected)) { return accentMaterialColor[500]; } + return null; }), ), tabBarTheme: TabBarTheme( @@ -162,7 +163,12 @@ final linuxTheme = AdwaitaThemeData.light().copyWith( ) ], 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( primary: Color(0xFF3582e5),