fix: lyrics modal sheet out of safe area so use 80% of screen height instead of full

This commit is contained in:
Kingkor Roy Tirtho 2023-01-08 14:18:29 +06:00
parent b5415f442a
commit 3db28f43b4
4 changed files with 128 additions and 122 deletions

View File

@ -1,6 +1,5 @@
import 'package:fl_query_hooks/fl_query_hooks.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:palette_generator/palette_generator.dart';
import 'package:spotify/spotify.dart';
@ -15,8 +14,10 @@ import 'package:tuple/tuple.dart';
class GeniusLyrics extends HookConsumerWidget {
final PaletteColor palette;
final bool? isModal;
const GeniusLyrics({
required this.palette,
this.isModal,
Key? key,
}) : super(key: key);
@ -36,6 +37,7 @@ class GeniusLyrics extends HookConsumerWidget {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
if (isModal != true) ...[
Center(
child: Text(
playback.track?.name ?? "",
@ -56,7 +58,8 @@ class GeniusLyrics extends HookConsumerWidget {
: textTheme.headline6)
?.copyWith(color: palette.bodyTextColor),
),
),
)
],
Expanded(
child: SingleChildScrollView(
child: Center(

View File

@ -40,8 +40,8 @@ class LyricsPage extends HookConsumerWidget {
);
Widget body = [
SyncedLyrics(palette: palette),
GeniusLyrics(palette: palette),
SyncedLyrics(palette: palette, isModal: isModal),
GeniusLyrics(palette: palette, isModal: isModal),
][index.value];
final tabbar = PreferredSize(
@ -70,11 +70,12 @@ class LyricsPage extends HookConsumerWidget {
return SafeArea(
child: Container(
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: Colors.black45,
borderRadius: BorderRadius.circular(8),
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
),
),
margin: const EdgeInsets.all(16),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 50, sigmaY: 50),
child: Column(

View File

@ -26,8 +26,11 @@ final lyricDelayState = StateProvider<Duration>(
class SyncedLyrics extends HookConsumerWidget {
final PaletteColor palette;
final bool? isModal;
const SyncedLyrics({
required this.palette,
this.isModal,
Key? key,
}) : super(key: key);
@ -70,15 +73,11 @@ class SyncedLyrics extends HookConsumerWidget {
: textTheme.headline4?.copyWith(fontSize: 25))
?.copyWith(color: palette.titleTextColor);
return Column(
return Stack(
children: [
SizedBox(
height: breakpoint >= Breakpoints.md ? 50 : 40,
child: Material(
type: MaterialType.transparency,
textStyle: PlatformTheme.of(context).textTheme!.body!,
child: Stack(
Column(
children: [
if (isModal != true)
Center(
child: SpotubeMarqueeText(
text: playback.track?.name ?? "Not Playing",
@ -86,32 +85,7 @@ class SyncedLyrics extends HookConsumerWidget {
isHovering: true,
),
),
Positioned(
top: 10,
right: 10,
child: Align(
alignment: Alignment.centerRight,
child: PlatformFilledButton(
child: const Icon(
SpotubeIcons.clock,
size: 16,
),
onPressed: () async {
final delay = await showPlatformAlertDialog(
context,
builder: (context) => const LyricDelayAdjustDialog(),
);
if (delay != null) {
ref.read(lyricDelayState.notifier).state = delay;
}
},
),
),
),
],
),
),
),
if (isModal != true)
Center(
child: Text(
TypeConversionUtils.artists_X_String<Artist>(
@ -172,6 +146,30 @@ class SyncedLyrics extends HookConsumerWidget {
(lyricValue == null || lyricValue.lyrics.isEmpty == true))
const Expanded(child: ShimmerLyrics()),
],
),
Positioned(
top: 10,
right: 10,
child: Align(
alignment: Alignment.centerRight,
child: PlatformFilledButton(
child: const Icon(
SpotubeIcons.clock,
size: 16,
),
onPressed: () async {
final delay = await showPlatformAlertDialog(
context,
builder: (context) => const LyricDelayAdjustDialog(),
);
if (delay != null) {
ref.read(lyricDelayState.notifier).state = delay;
}
},
),
),
),
],
);
}
}

View File

@ -201,13 +201,17 @@ class PlayerView extends HookConsumerWidget {
isDismissible: true,
enableDrag: true,
isScrollControlled: true,
backgroundColor: Colors.transparent,
backgroundColor: Colors.black38,
barrierColor: Colors.black12,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height,
maxHeight:
MediaQuery.of(context).size.height * 0.8,
),
builder: (context) =>
const LyricsPage(isModal: true),