Skip to content

Commit

Permalink
fixed animation for comment collapse/expand
Browse files Browse the repository at this point in the history
  • Loading branch information
@hjiangsu
hjiangsu committed Jun 26, 2023
1 parent f96cbcd commit aed3741
Showing 1 changed file with 93 additions and 71 deletions.
164 changes: 93 additions & 71 deletions lib/post/widgets/comment_card.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ class CommentCard extends StatefulWidget {
State<CommentCard> createState() => _CommentCardState();
}

class _CommentCardState extends State<CommentCard> {
class _CommentCardState extends State<CommentCard> with SingleTickerProviderStateMixin {
List<Color> colors = [
Colors.red.shade300,
Colors.orange.shade300,
Expand All @@ -51,12 +51,32 @@ class _CommentCardState extends State<CommentCard> {
DismissDirection? dismissDirection;
SwipeAction? swipeAction;

late final AnimationController _controller = AnimationController(
duration: const Duration(milliseconds: 100),
vsync: this,
);

// Animation for comment collapse
late final Animation<Offset> _offsetAnimation = Tween<Offset>(
begin: Offset.zero,
end: const Offset(1.5, 0.0),
).animate(CurvedAnimation(
parent: _controller,
curve: Curves.fastOutSlowIn,
));

@override
void initState() {
isHidden = widget.collapsed;
super.initState();
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
Expand Down Expand Up @@ -213,88 +233,90 @@ class _CommentCardState extends State<CommentCard> {
child: Row(
children: [
Expanded(
child: Row(
children: [
Text(
widget.commentViewTree.creator.name,
style: theme.textTheme.bodyMedium?.copyWith(
color: widget.commentViewTree.creator.admin
? theme.colorScheme.tertiary
: widget.commentViewTree.post.creatorId == widget.commentViewTree.comment.creatorId
? Colors.amber
: theme.colorScheme.onBackground,
fontWeight: FontWeight.w500,
),
),
const SizedBox(width: 8.0),
Icon(
myVote == -1 ? Icons.south_rounded : Icons.north_rounded,
size: 12.0,
color: myVote == 1 ? Colors.orange : (myVote == -1 ? Colors.blue : theme.colorScheme.onBackground),
),
const SizedBox(width: 2.0),
Text(
formatNumberToK(score),
style: theme.textTheme.bodyMedium?.copyWith(
color: myVote == 1 ? Colors.orange : (myVote == -1 ? Colors.blue : theme.colorScheme.onBackground),
),
),
],
),
),
child: Row(
children: [
Text(
widget.commentViewTree.creator.name,
style: theme.textTheme.bodyMedium?.copyWith(
color: widget.commentViewTree.creator.admin
? theme.colorScheme.tertiary
: widget.commentViewTree.post.creatorId == widget.commentViewTree.comment.creatorId
? Colors.amber
: theme.colorScheme.onBackground,
fontWeight: FontWeight.w500,
),
),
const SizedBox(width: 8.0),
Icon(
myVote == -1 ? Icons.south_rounded : Icons.north_rounded,
size: 12.0,
color: myVote == 1 ? Colors.orange : (myVote == -1 ? Colors.blue : theme.colorScheme.onBackground),
),
const SizedBox(width: 2.0),
Text(
formatNumberToK(score),
style: theme.textTheme.bodyMedium?.copyWith(
color: myVote == 1 ? Colors.orange : (myVote == -1 ? Colors.blue : theme.colorScheme.onBackground),
),
),
],
),
),
Row(
children: [
Icon(
saved ? Icons.star_rounded : null,
color: saved ? Colors.purple : null,
size: 18.0,
),
const SizedBox(width: 8.0),
Text(
formatTimeToString(dateTime: widget.commentViewTree.comment.published),
style: theme.textTheme.bodyMedium?.copyWith(
color: theme.colorScheme.onBackground,
),
),
],
)
children: [
Icon(
saved ? Icons.star_rounded : null,
color: saved ? Colors.purple : null,
size: 18.0,
),
const SizedBox(width: 8.0),
Text(
formatTimeToString(dateTime: widget.commentViewTree.comment.published),
style: theme.textTheme.bodyMedium?.copyWith(
color: theme.colorScheme.onBackground,
),
),
],
)
],
),
),
AnimatedSize(
duration: const Duration(milliseconds: 200),
curve: Curves.fastOutSlowIn,
child: Padding(
padding: const EdgeInsets.only(top: 0, right: 8.0, left: 8.0, bottom: 8.0),
child: CommonMarkdownBody(body: widget.commentViewTree.comment.content),
),
Padding(
padding: const EdgeInsets.only(top: 0, right: 8.0, left: 8.0, bottom: 8.0),
child: CommonMarkdownBody(body: widget.commentViewTree.comment.content),
),
],
)
),
),
],
),
),
),
AnimatedContainer(
key: childKey,
duration: const Duration(milliseconds: 200),
curve: Curves.fastOutSlowIn,
child: AnimatedOpacity(
opacity: isHidden ? 0.0 : 1.0,
curve: Curves.fastOutSlowIn,
duration: const Duration(milliseconds: 200),
child: ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) => CommentCard(
commentViewTree: widget.commentViewTree.replies[index],
level: widget.level + 1,
collapsed: widget.level > 2,
AnimatedSwitcher(
duration: const Duration(milliseconds: 130),
switchInCurve: Curves.easeInOut,
switchOutCurve: Curves.easeInOut,
transitionBuilder: (Widget child, Animation<double> animation) {
return SizeTransition(
sizeFactor: animation,
child: SlideTransition(
position: _offsetAnimation,
child: child,
),
itemCount: isHidden ? 0 : widget.commentViewTree.replies.length,
),
),
);
},
child: isHidden
? Container()
: ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) => CommentCard(
commentViewTree: widget.commentViewTree.replies[index],
level: widget.level + 1,
collapsed: widget.level > 2,
),
itemCount: isHidden ? 0 : widget.commentViewTree.replies.length,
),
),
],
),
Expand Down

0 comments on commit aed3741

Please sign in to comment.