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 name: example
description: A new Flutter project. description: A new Flutter project.
version: 1.1.0+1 version: 1.1.0+2
environment: environment:
sdk: ">=2.2.2 <3.0.0" 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 ? 1
: (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize)); : (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( return GestureDetector(
behavior: HitTestBehavior.translucent, behavior: HitTestBehavior.translucent,
onTap: () => Navigator.maybePop(context), onTap: () => Navigator.maybePop(context),
@@ -100,7 +105,9 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
), ),
), ),
), ),
Center( Transform.scale(
scale: val,
child: Center(
child: SingleChildScrollView( child: SingleChildScrollView(
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0), padding: const EdgeInsets.symmetric(vertical: 8.0),
@@ -110,26 +117,25 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
: CrossAxisAlignment.start, : CrossAxisAlignment.start,
children: <Widget>[ children: <Widget>[
if (widget.showReactions && if (widget.showReactions &&
(widget.message.status == MessageSendingStatus.SENT || (widget.message.status ==
MessageSendingStatus.SENT ||
widget.message.status == null)) widget.message.status == null))
Align( Align(
alignment: Alignment( alignment: Alignment(
user.id == widget.message.user.id user.id == widget.message.user.id
? (divFactor > 1.0 ? 0.0 : (1.0 - divFactor)) ? (divFactor > 1.0
: (divFactor > 1.0 ? 0.0 : -(1.0 - divFactor)), ? 0.0
: (1.0 - divFactor))
: (divFactor > 1.0
? 0.0
: -(1.0 - divFactor)),
0.0), 0.0),
child: ReactionPicker( child: ReactionPicker(
message: widget.message, message: widget.message,
messageTheme: widget.messageTheme, messageTheme: widget.messageTheme,
), ),
), ),
TweenAnimationBuilder<double>( IgnorePointer(
tween: Tween(begin: 0.0, end: 1.0),
duration: Duration(milliseconds: 300),
builder: (context, val, snapshot) {
return Transform.scale(
scale: val,
child: IgnorePointer(
child: MessageWidget( child: MessageWidget(
key: Key('MessageWidget'), key: Key('MessageWidget'),
reverse: widget.reverse, reverse: widget.reverse,
@@ -156,21 +162,7 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
shape: widget.messageShape, shape: widget.messageShape,
), ),
), ),
); Padding(
}),
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: EdgeInsets.only( padding: EdgeInsets.only(
right: widget.reverse ? 16 : 0, right: widget.reverse ? 16 : 0,
left: widget.reverse ? 0 : 48, left: widget.reverse ? 0 : 48,
@@ -197,15 +189,13 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
if (widget.showReplyMessage && if (widget.showReplyMessage &&
(widget.message.status == (widget.message.status ==
MessageSendingStatus.SENT || MessageSendingStatus.SENT ||
widget.message.status == widget.message.status == null) &&
null) &&
widget.message.parentId == null) widget.message.parentId == null)
_buildReplyButton(context), _buildReplyButton(context),
if (widget.showThreadReplyMessage && if (widget.showThreadReplyMessage &&
(widget.message.status == (widget.message.status ==
MessageSendingStatus.SENT || MessageSendingStatus.SENT ||
widget.message.status == widget.message.status == null) &&
null) &&
widget.message.parentId == null) widget.message.parentId == null)
_buildThreadReplyButton(context), _buildThreadReplyButton(context),
if (widget.showResendMessage) 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 ? 1
: (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize)); : (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( return GestureDetector(
behavior: HitTestBehavior.translucent, behavior: HitTestBehavior.translucent,
onTap: () => Navigator.maybePop(context), onTap: () => Navigator.maybePop(context),
@@ -72,7 +77,9 @@ class MessageReactionsModal extends StatelessWidget {
), ),
), ),
), ),
Center( Transform.scale(
scale: val,
child: Center(
child: SingleChildScrollView( child: SingleChildScrollView(
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0), padding: const EdgeInsets.symmetric(vertical: 8.0),
@@ -86,21 +93,19 @@ class MessageReactionsModal extends StatelessWidget {
Align( Align(
alignment: Alignment( alignment: Alignment(
user.id == message.user.id user.id == message.user.id
? (divFactor > 1.0 ? 0.0 : (1.0 - divFactor)) ? (divFactor > 1.0
: (divFactor > 1.0 ? 0.0 : -(1.0 - divFactor)), ? 0.0
: (1.0 - divFactor))
: (divFactor > 1.0
? 0.0
: -(1.0 - divFactor)),
0.0), 0.0),
child: ReactionPicker( child: ReactionPicker(
message: message, message: message,
messageTheme: messageTheme, messageTheme: messageTheme,
), ),
), ),
TweenAnimationBuilder<double>( IgnorePointer(
tween: Tween(begin: 0.0, end: 1.0),
duration: Duration(milliseconds: 300),
builder: (context, val, snapshot) {
return Transform.scale(
scale: val,
child: IgnorePointer(
child: MessageWidget( child: MessageWidget(
key: Key('MessageWidget'), key: Key('MessageWidget'),
reverse: reverse, reverse: reverse,
@@ -125,8 +130,6 @@ class MessageReactionsModal extends StatelessWidget {
message.status == null), message.status == null),
), ),
), ),
);
}),
if (message.latestReactions?.isNotEmpty == true) if (message.latestReactions?.isNotEmpty == true)
_buildReactionCard(context), _buildReactionCard(context),
], ],
@@ -134,9 +137,12 @@ class MessageReactionsModal extends StatelessWidget {
), ),
), ),
), ),
),
], ],
), ),
); );
},
);
} }
Padding _buildReactionCard(BuildContext context) { Padding _buildReactionCard(BuildContext context) {
@@ -191,14 +197,7 @@ class MessageReactionsModal extends StatelessWidget {
BuildContext context, BuildContext context,
) { ) {
final isCurrentUser = reaction.user.id == currentUser.id; final isCurrentUser = reaction.user.id == currentUser.id;
return TweenAnimationBuilder<double>( return ConstrainedBox(
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(
constraints: BoxConstraints.loose(Size( constraints: BoxConstraints.loose(Size(
64, 64,
98, 98,
@@ -221,15 +220,13 @@ class MessageReactionsModal extends StatelessWidget {
), ),
Positioned( Positioned(
child: Align( child: Align(
alignment: reverse alignment:
? Alignment.centerRight reverse ? Alignment.centerRight : Alignment.centerLeft,
: Alignment.centerLeft,
child: ReactionBubble( child: ReactionBubble(
reactions: [reaction], reactions: [reaction],
flipTail: !reverse, flipTail: !reverse,
borderColor: messageTheme.reactionsBorderColor, borderColor: messageTheme.reactionsBorderColor,
backgroundColor: backgroundColor: messageTheme.reactionsBackgroundColor,
messageTheme.reactionsBackgroundColor,
highlightOwnReactions: false, 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:ezanimation/ezanimation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/src/stream_svg_icon.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) { if (animations.isEmpty && reactionIcons.isNotEmpty) {
reactionIcons.forEach((element) { reactionIcons.forEach((element) {
animations.add( animations.add(
EzAnimation.sequence( EzAnimation.tween(
[ Tween(begin: 0.0, end: 1.0),
SequenceItem(0.0, 1.4),
SequenceItem(1.4, 1.0),
],
Duration(milliseconds: 500), Duration(milliseconds: 500),
vsync: this, curve: Curves.easeInOutBack,
), ),
); );
}); });
@@ -52,7 +51,7 @@ class _ReactionPickerState extends State<ReactionPicker>
return TweenAnimationBuilder<double>( return TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0), tween: Tween(begin: 0.0, end: 1.0),
curve: Curves.easeInOutExpo, curve: Curves.easeInOutBack,
duration: Duration(milliseconds: 500), duration: Duration(milliseconds: 500),
builder: (context, val, wid) { builder: (context, val, wid) {
return Transform.scale( return Transform.scale(
@@ -81,15 +80,18 @@ class _ReactionPickerState extends State<ReactionPicker>
icon: AnimatedBuilder( icon: AnimatedBuilder(
animation: animations[index], animation: animations[index],
builder: (context, val) { builder: (context, val) {
return Transform( return Transform.scale(
transform: Matrix4.identity() scale: animations[index].value,
..scale(animations[index].value,
animations[index].value)
..rotateZ(1.0 - animations[index].value),
child: StreamSvgIcon( child: StreamSvgIcon(
assetName: reactionIcon.assetName, assetName: reactionIcon.assetName,
height: animations[index].value * 24.0, height: max(
width: animations[index].value * 24.0, 0,
animations[index].value * 24.0,
),
width: max(
0,
animations[index].value * 24.0,
),
color: ownReactionIndex != -1 color: ownReactionIndex != -1
? StreamChatTheme.of(context) ? StreamChatTheme.of(context)
.colorTheme .colorTheme