talksik/stream-chat-flutter
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix animations

Browse Source
This commit is contained in:
Salvatore Giordano
2021-01-12 12:05:01 +01:00
parent bf28b82cc7
commit d9a50ae42e
4 changed files with 284 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/pubspec.yaml
+1 -1
View File
@@ -1,6 +1,6 @@
name: example
description: A new Flutter project.
version: 1.1.0+1
version: 1.1.0+2
environment:
sdk: ">=2.2.2 <3.0.0"
lib/src/message_actions_modal.dart
+29 -38
View File
@@ -84,6 +84,11 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
? 1
: (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize));
return TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: Duration(milliseconds: 300),
curve: Curves.easeInOutBack,
builder: (context, val, snapshot) {
return GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () => Navigator.maybePop(context),
@@ -100,7 +105,9 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
),
),
),
Center(
Transform.scale(
scale: val,
child: Center(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
@@ -110,26 +117,25 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
: CrossAxisAlignment.start,
children: <Widget>[
if (widget.showReactions &&
(widget.message.status == MessageSendingStatus.SENT ||
(widget.message.status ==
MessageSendingStatus.SENT ||
widget.message.status == null))
Align(
alignment: Alignment(
user.id == widget.message.user.id
? (divFactor > 1.0 ? 0.0 : (1.0 - divFactor))
: (divFactor > 1.0 ? 0.0 : -(1.0 - divFactor)),
? (divFactor > 1.0
? 0.0
: (1.0 - divFactor))
: (divFactor > 1.0
? 0.0
: -(1.0 - divFactor)),
0.0),
child: ReactionPicker(
message: widget.message,
messageTheme: widget.messageTheme,
),
),
TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: Duration(milliseconds: 300),
builder: (context, val, snapshot) {
return Transform.scale(
scale: val,
child: IgnorePointer(
IgnorePointer(
child: MessageWidget(
key: Key('MessageWidget'),
reverse: widget.reverse,
@@ -156,21 +162,7 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
shape: widget.messageShape,
),
),
);
}),
TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: Duration(milliseconds: 300),
curve: Curves.easeInOut,
builder: (context, val, wid) {
return Transform(
transform: Matrix4.identity()
..scale(val)
..rotateZ(-1.0 + val),
alignment: widget.reverse
? Alignment.topRight
: Alignment.topLeft,
child: Padding(
Padding(
padding: EdgeInsets.only(
right: widget.reverse ? 16 : 0,
left: widget.reverse ? 0 : 48,
@@ -197,15 +189,13 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
if (widget.showReplyMessage &&
(widget.message.status ==
MessageSendingStatus.SENT ||
widget.message.status ==
null) &&
widget.message.status == null) &&
widget.message.parentId == null)
_buildReplyButton(context),
if (widget.showThreadReplyMessage &&
(widget.message.status ==
MessageSendingStatus.SENT ||
widget.message.status ==
null) &&
widget.message.status == null) &&
widget.message.parentId == null)
_buildThreadReplyButton(context),
if (widget.showResendMessage)
@@ -224,15 +214,16 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
),
),
),
],
),
),
),
),
),
],
),
);
})
],
),
),
),
),
],
),
},
);
}
lib/src/message_reactions_modal.dart
+22 -27
View File
@@ -56,6 +56,11 @@ class MessageReactionsModal extends StatelessWidget {
? 1
: (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize));
return TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: Duration(milliseconds: 300),
curve: Curves.easeInOutBack,
builder: (context, val, snapshot) {
return GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () => Navigator.maybePop(context),
@@ -72,7 +77,9 @@ class MessageReactionsModal extends StatelessWidget {
),
),
),
Center(
Transform.scale(
scale: val,
child: Center(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
@@ -86,21 +93,19 @@ class MessageReactionsModal extends StatelessWidget {
Align(
alignment: Alignment(
user.id == message.user.id
? (divFactor > 1.0 ? 0.0 : (1.0 - divFactor))
: (divFactor > 1.0 ? 0.0 : -(1.0 - divFactor)),
? (divFactor > 1.0
? 0.0
: (1.0 - divFactor))
: (divFactor > 1.0
? 0.0
: -(1.0 - divFactor)),
0.0),
child: ReactionPicker(
message: message,
messageTheme: messageTheme,
),
),
TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: Duration(milliseconds: 300),
builder: (context, val, snapshot) {
return Transform.scale(
scale: val,
child: IgnorePointer(
IgnorePointer(
child: MessageWidget(
key: Key('MessageWidget'),
reverse: reverse,
@@ -125,8 +130,6 @@ class MessageReactionsModal extends StatelessWidget {
message.status == null),
),
),
);
}),
if (message.latestReactions?.isNotEmpty == true)
_buildReactionCard(context),
],
@@ -134,9 +137,12 @@ class MessageReactionsModal extends StatelessWidget {
),
),
),
),
],
),
);
},
);
}
Padding _buildReactionCard(BuildContext context) {
@@ -191,14 +197,7 @@ class MessageReactionsModal extends StatelessWidget {
BuildContext context,
) {
final isCurrentUser = reaction.user.id == currentUser.id;
return TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: Duration(milliseconds: 300),
curve: Curves.easeInOut,
builder: (context, val, snapshot) {
return Transform.scale(
scale: val,
child: ConstrainedBox(
return ConstrainedBox(
constraints: BoxConstraints.loose(Size(
64,
98,
@@ -221,15 +220,13 @@ class MessageReactionsModal extends StatelessWidget {
),
Positioned(
child: Align(
alignment: reverse
? Alignment.centerRight
: Alignment.centerLeft,
alignment:
reverse ? Alignment.centerRight : Alignment.centerLeft,
child: ReactionBubble(
reactions: [reaction],
flipTail: !reverse,
borderColor: messageTheme.reactionsBorderColor,
backgroundColor:
messageTheme.reactionsBackgroundColor,
backgroundColor: messageTheme.reactionsBackgroundColor,
highlightOwnReactions: false,
),
),
@@ -247,8 +244,6 @@ class MessageReactionsModal extends StatelessWidget {
),
],
),
),
);
});
}
}
lib/src/reaction_picker.dart
+16 -14
View File
@@ -1,3 +1,5 @@
import 'dart:math';
import 'package:ezanimation/ezanimation.dart';
import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
@@ -36,13 +38,10 @@ class _ReactionPickerState extends State<ReactionPicker>
if (animations.isEmpty && reactionIcons.isNotEmpty) {
reactionIcons.forEach((element) {
animations.add(
EzAnimation.sequence(
[
SequenceItem(0.0, 1.4),
SequenceItem(1.4, 1.0),
],
EzAnimation.tween(
Tween(begin: 0.0, end: 1.0),
Duration(milliseconds: 500),
vsync: this,
curve: Curves.easeInOutBack,
),
);
});
@@ -52,7 +51,7 @@ class _ReactionPickerState extends State<ReactionPicker>
return TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
curve: Curves.easeInOutExpo,
curve: Curves.easeInOutBack,
duration: Duration(milliseconds: 500),
builder: (context, val, wid) {
return Transform.scale(
@@ -81,15 +80,18 @@ class _ReactionPickerState extends State<ReactionPicker>
icon: AnimatedBuilder(
animation: animations[index],
builder: (context, val) {
return Transform(
transform: Matrix4.identity()
..scale(animations[index].value,
animations[index].value)
..rotateZ(1.0 - animations[index].value),
return Transform.scale(
scale: animations[index].value,
child: StreamSvgIcon(
assetName: reactionIcon.assetName,
height: animations[index].value * 24.0,
width: animations[index].value * 24.0,
height: max(
0,
animations[index].value * 24.0,
),
width: max(
0,
animations[index].value * 24.0,
),
color: ownReactionIndex != -1
? StreamChatTheme.of(context)
.colorTheme