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

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

View File

@ -56,6 +56,8 @@ class UserArtists extends HookConsumerWidget {
preferredSize: const Size.fromHeight(50),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: ColoredBox(
color: PlatformTheme.of(context).scaffoldBackgroundColor!,
child: PlatformTextField(
onChanged: (value) => searchText.value = value,
prefixIcon: Icons.filter_alt_outlined,
@ -63,6 +65,7 @@ class UserArtists extends HookConsumerWidget {
),
),
),
),
backgroundColor: PlatformTheme.of(context).scaffoldBackgroundColor,
body: artistQuery.pages.isEmpty
? Padding(

View File

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

View File

@ -141,43 +141,48 @@ class TrackCollectionView<T> 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(
final searchbar = ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 400,
maxHeight: 40,
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<T> 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<T> 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,9 +224,8 @@ class TrackCollectionView<T> extends HookConsumerWidget {
),
)
: null,
flexibleSpace: LayoutBuilder(builder: (context, constrains) {
return FlexibleSpaceBar(
background: Container(
flexibleSpace: FlexibleSpaceBar(
background: DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
@ -230,7 +243,6 @@ class TrackCollectionView<T> extends HookConsumerWidget {
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 20,
),
child: Wrap(
spacing: 20,
@ -240,8 +252,7 @@ class TrackCollectionView<T> extends HookConsumerWidget {
runAlignment: WrapAlignment.center,
children: [
Container(
constraints:
const BoxConstraints(maxHeight: 200),
constraints: const BoxConstraints(maxHeight: 200),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: UniversalImage(
@ -256,8 +267,7 @@ class TrackCollectionView<T> extends HookConsumerWidget {
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
PlatformText.headline(
title,
@ -280,6 +290,10 @@ class TrackCollectionView<T> extends HookConsumerWidget {
mainAxisSize: MainAxisSize.min,
children: buttons,
),
if (kIsMobile) ...[
const SizedBox(height: 10),
searchbar,
]
],
)
],
@ -287,8 +301,7 @@ class TrackCollectionView<T> extends HookConsumerWidget {
),
),
),
);
}),
),
),
HookBuilder(
builder: (context) {

View File

@ -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),