fix(playbutton_card): annoying animation

This commit is contained in:
Kingkor Roy Tirtho 2023-11-08 12:11:06 +06:00
parent ac0e2e74d8
commit 574406dd5f
2 changed files with 122 additions and 124 deletions

View File

@ -8,7 +8,6 @@ import 'package:spotube/components/shared/hover_builder.dart';
import 'package:spotube/components/shared/image/universal_image.dart'; import 'package:spotube/components/shared/image/universal_image.dart';
import 'package:spotube/hooks/use_breakpoint_value.dart'; import 'package:spotube/hooks/use_breakpoint_value.dart';
import 'package:spotube/hooks/use_brightness_value.dart'; import 'package:spotube/hooks/use_brightness_value.dart';
import 'package:spotube/utils/platform.dart';
final htmlTagRegexp = RegExp(r"<[^>]*>", caseSensitive: true); final htmlTagRegexp = RegExp(r"<[^>]*>", caseSensitive: true);
@ -59,9 +58,9 @@ class PlaybuttonCard extends HookWidget {
); );
final end = useBreakpointValue<double>( final end = useBreakpointValue<double>(
xs: 15, xs: 10,
sm: 15, sm: 10,
others: 20, others: 15,
); );
final textsHeight = useState( final textsHeight = useState(
@ -84,9 +83,7 @@ class PlaybuttonCard extends HookWidget {
return null; return null;
}, [textsKey]); }, [textsKey]);
return Stack( return Container(
children: [
Container(
constraints: BoxConstraints(maxWidth: size), constraints: BoxConstraints(maxWidth: size),
margin: margin, margin: margin,
child: Material( child: Material(
@ -106,6 +103,9 @@ class PlaybuttonCard extends HookWidget {
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(
clipBehavior: Clip.none,
children: [ children: [
Padding( Padding(
padding: const EdgeInsets.only( padding: const EdgeInsets.only(
@ -121,45 +121,10 @@ class PlaybuttonCard extends HookWidget {
), ),
), ),
), ),
Column(
key: textsKey,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 15),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: AutoSizeText(
title,
maxLines: 1,
minFontSize: theme.textTheme.bodyMedium!.fontSize!,
overflow: TextOverflow.ellipsis,
),
),
if (cleanDescription != null)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: AutoSizeText(
cleanDescription,
maxLines: 2,
style: theme.textTheme.bodySmall?.copyWith(
color:
theme.colorScheme.onSurface.withOpacity(.5),
),
overflow: TextOverflow.ellipsis,
),
),
const SizedBox(height: 10),
],
),
],
),
),
),
),
if (isOwner) if (isOwner)
Positioned( Positioned(
top: 15, top: 15,
left: 25, left: 15,
child: AnimatedSize( child: AnimatedSize(
duration: const Duration(milliseconds: 150), duration: const Duration(milliseconds: 150),
alignment: Alignment.centerLeft, alignment: Alignment.centerLeft,
@ -192,10 +157,9 @@ class PlaybuttonCard extends HookWidget {
}), }),
), ),
), ),
AnimatedPositioned( Positioned(
duration: const Duration(milliseconds: 300),
right: end, right: end,
bottom: textsHeight.value - (kIsMobile ? 5 : 10), bottom: -15,
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
@ -219,7 +183,8 @@ class PlaybuttonCard extends HookWidget {
icon: isLoading icon: isLoading
? SizedBox.fromSize( ? SizedBox.fromSize(
size: const Size.square(15), size: const Size.square(15),
child: const CircularProgressIndicator(strokeWidth: 2), child: const CircularProgressIndicator(
strokeWidth: 2),
) )
: isPlaying : isPlaying
? const Icon(SpotubeIcons.pause) ? const Icon(SpotubeIcons.pause)
@ -230,6 +195,40 @@ class PlaybuttonCard extends HookWidget {
), ),
), ),
], ],
),
Column(
key: textsKey,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 15),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: AutoSizeText(
title,
maxLines: 1,
minFontSize: theme.textTheme.bodyMedium!.fontSize!,
overflow: TextOverflow.ellipsis,
),
),
if (cleanDescription != null)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: AutoSizeText(
cleanDescription,
maxLines: 2,
style: theme.textTheme.bodySmall?.copyWith(
color: theme.colorScheme.onSurface.withOpacity(.5),
),
overflow: TextOverflow.ellipsis,
),
),
const SizedBox(height: 10),
],
),
],
),
),
),
); );
} }
} }

View File

@ -1,5 +1,4 @@
import 'package:collection/collection.dart'; import 'package:collection/collection.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:spotify/spotify.dart'; import 'package:spotify/spotify.dart';
import 'package:spotube/models/local_track.dart'; import 'package:spotube/models/local_track.dart';