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
+137 -146
View File
@@ -84,155 +84,146 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
? 1 ? 1
: (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize)); : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize));
return GestureDetector( return TweenAnimationBuilder<double>(
behavior: HitTestBehavior.translucent, tween: Tween(begin: 0.0, end: 1.0),
onTap: () => Navigator.maybePop(context), duration: Duration(milliseconds: 300),
child: Stack( curve: Curves.easeInOutBack,
children: [ builder: (context, val, snapshot) {
Positioned.fill( return GestureDetector(
child: BackdropFilter( behavior: HitTestBehavior.translucent,
filter: ImageFilter.blur( onTap: () => Navigator.maybePop(context),
sigmaX: 10, child: Stack(
sigmaY: 10, children: [
), Positioned.fill(
child: Container( child: BackdropFilter(
color: StreamChatTheme.of(context).colorTheme.overlay, filter: ImageFilter.blur(
), sigmaX: 10,
), sigmaY: 10,
), ),
Center( child: Container(
child: SingleChildScrollView( color: StreamChatTheme.of(context).colorTheme.overlay,
child: Padding( ),
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Column(
crossAxisAlignment: widget.reverse
? CrossAxisAlignment.end
: CrossAxisAlignment.start,
children: <Widget>[
if (widget.showReactions &&
(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)),
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(
child: MessageWidget(
key: Key('MessageWidget'),
reverse: widget.reverse,
message: widget.message.copyWith(
text: widget.message.text.length > 200
? '${widget.message.text.substring(0, 200)}...'
: widget.message.text,
),
messageTheme: widget.messageTheme,
showReactions: false,
showUsername: false,
showThreadReplyIndicator: false,
showReplyMessage: false,
showUserAvatar: widget.showUserAvatar,
showTimestamp: false,
translateUserAvatar: false,
showReactionPickerIndicator:
widget.showReactions &&
(widget.message.status ==
MessageSendingStatus.SENT ||
widget.message.status == null),
showInChannelIndicator: false,
showSendingIndicator: false,
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: EdgeInsets.only(
right: widget.reverse ? 16 : 0,
left: widget.reverse ? 0 : 48,
),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.75,
child: Material(
color: StreamChatTheme.of(context)
.colorTheme
.whiteSnow,
clipBehavior: Clip.hardEdge,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.stretch,
children: ListTile.divideTiles(
color: StreamChatTheme.of(context)
.colorTheme
.greyWhisper,
context: context,
tiles: [
if (widget.showReplyMessage &&
(widget.message.status ==
MessageSendingStatus.SENT ||
widget.message.status ==
null) &&
widget.message.parentId == null)
_buildReplyButton(context),
if (widget.showThreadReplyMessage &&
(widget.message.status ==
MessageSendingStatus.SENT ||
widget.message.status ==
null) &&
widget.message.parentId == null)
_buildThreadReplyButton(context),
if (widget.showResendMessage)
_buildResendMessage(context),
if (widget.showEditMessage)
_buildEditMessage(context),
if (widget.showCopyMessage)
_buildCopyButton(context),
if (widget.showFlagButton)
_buildFlagButton(context),
if (widget.showDeleteMessage)
_buildDeleteButton(context),
],
).toList(),
),
),
),
),
);
})
],
), ),
), ),
), Transform.scale(
scale: val,
child: Center(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Column(
crossAxisAlignment: widget.reverse
? CrossAxisAlignment.end
: CrossAxisAlignment.start,
children: <Widget>[
if (widget.showReactions &&
(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)),
0.0),
child: ReactionPicker(
message: widget.message,
messageTheme: widget.messageTheme,
),
),
IgnorePointer(
child: MessageWidget(
key: Key('MessageWidget'),
reverse: widget.reverse,
message: widget.message.copyWith(
text: widget.message.text.length > 200
? '${widget.message.text.substring(0, 200)}...'
: widget.message.text,
),
messageTheme: widget.messageTheme,
showReactions: false,
showUsername: false,
showThreadReplyIndicator: false,
showReplyMessage: false,
showUserAvatar: widget.showUserAvatar,
showTimestamp: false,
translateUserAvatar: false,
showReactionPickerIndicator:
widget.showReactions &&
(widget.message.status ==
MessageSendingStatus.SENT ||
widget.message.status == null),
showInChannelIndicator: false,
showSendingIndicator: false,
shape: widget.messageShape,
),
),
Padding(
padding: EdgeInsets.only(
right: widget.reverse ? 16 : 0,
left: widget.reverse ? 0 : 48,
),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.75,
child: Material(
color: StreamChatTheme.of(context)
.colorTheme
.whiteSnow,
clipBehavior: Clip.hardEdge,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.stretch,
children: ListTile.divideTiles(
color: StreamChatTheme.of(context)
.colorTheme
.greyWhisper,
context: context,
tiles: [
if (widget.showReplyMessage &&
(widget.message.status ==
MessageSendingStatus.SENT ||
widget.message.status == null) &&
widget.message.parentId == null)
_buildReplyButton(context),
if (widget.showThreadReplyMessage &&
(widget.message.status ==
MessageSendingStatus.SENT ||
widget.message.status == null) &&
widget.message.parentId == null)
_buildThreadReplyButton(context),
if (widget.showResendMessage)
_buildResendMessage(context),
if (widget.showEditMessage)
_buildEditMessage(context),
if (widget.showCopyMessage)
_buildCopyButton(context),
if (widget.showFlagButton)
_buildFlagButton(context),
if (widget.showDeleteMessage)
_buildDeleteButton(context),
],
).toList(),
),
),
),
),
],
),
),
),
),
),
],
), ),
], );
), },
); );
} }
lib/src/message_reactions_modal.dart
+130 -135
View File
@@ -56,86 +56,92 @@ class MessageReactionsModal extends StatelessWidget {
? 1 ? 1
: (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize)); : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize));
return GestureDetector( return TweenAnimationBuilder<double>(
behavior: HitTestBehavior.translucent, tween: Tween(begin: 0.0, end: 1.0),
onTap: () => Navigator.maybePop(context), duration: Duration(milliseconds: 300),
child: Stack( curve: Curves.easeInOutBack,
children: [ builder: (context, val, snapshot) {
Positioned.fill( return GestureDetector(
child: BackdropFilter( behavior: HitTestBehavior.translucent,
filter: ImageFilter.blur( onTap: () => Navigator.maybePop(context),
sigmaX: 10, child: Stack(
sigmaY: 10, children: [
), Positioned.fill(
child: Container( child: BackdropFilter(
color: StreamChatTheme.of(context).colorTheme.overlay, filter: ImageFilter.blur(
), sigmaX: 10,
), sigmaY: 10,
), ),
Center( child: Container(
child: SingleChildScrollView( color: StreamChatTheme.of(context).colorTheme.overlay,
child: Padding( ),
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
if (showReactions &&
(message.status == MessageSendingStatus.SENT ||
message.status == null))
Align(
alignment: Alignment(
user.id == message.user.id
? (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(
child: MessageWidget(
key: Key('MessageWidget'),
reverse: reverse,
message: message.copyWith(
text: message.text.length > 200
? '${message.text.substring(0, 200)}...'
: message.text,
),
messageTheme: messageTheme,
showReactions: false,
showUsername: false,
showUserAvatar: showUserAvatar,
showThreadReplyIndicator: false,
showTimestamp: false,
translateUserAvatar: false,
showSendingIndicator: false,
shape: messageShape,
showInChannelIndicator: false,
showReactionPickerIndicator: showReactions &&
(message.status ==
MessageSendingStatus.SENT ||
message.status == null),
),
),
);
}),
if (message.latestReactions?.isNotEmpty == true)
_buildReactionCard(context),
],
), ),
), ),
), Transform.scale(
scale: val,
child: Center(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
if (showReactions &&
(message.status == MessageSendingStatus.SENT ||
message.status == null))
Align(
alignment: Alignment(
user.id == message.user.id
? (divFactor > 1.0
? 0.0
: (1.0 - divFactor))
: (divFactor > 1.0
? 0.0
: -(1.0 - divFactor)),
0.0),
child: ReactionPicker(
message: message,
messageTheme: messageTheme,
),
),
IgnorePointer(
child: MessageWidget(
key: Key('MessageWidget'),
reverse: reverse,
message: message.copyWith(
text: message.text.length > 200
? '${message.text.substring(0, 200)}...'
: message.text,
),
messageTheme: messageTheme,
showReactions: false,
showUsername: false,
showUserAvatar: showUserAvatar,
showThreadReplyIndicator: false,
showTimestamp: false,
translateUserAvatar: false,
showSendingIndicator: false,
shape: messageShape,
showInChannelIndicator: false,
showReactionPickerIndicator: showReactions &&
(message.status ==
MessageSendingStatus.SENT ||
message.status == null),
),
),
if (message.latestReactions?.isNotEmpty == true)
_buildReactionCard(context),
],
),
),
),
),
),
],
), ),
], );
), },
); );
} }
@@ -191,64 +197,53 @@ 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), constraints: BoxConstraints.loose(Size(
duration: Duration(milliseconds: 300), 64,
curve: Curves.easeInOut, 98,
builder: (context, val, snapshot) { )),
return Transform.scale( child: Column(
scale: val, mainAxisSize: MainAxisSize.min,
child: ConstrainedBox( mainAxisAlignment: MainAxisAlignment.start,
constraints: BoxConstraints.loose(Size( crossAxisAlignment: CrossAxisAlignment.center,
64, children: [
98, Stack(
)), children: [
child: Column( UserAvatar(
mainAxisSize: MainAxisSize.min, onTap: onUserAvatarTap,
mainAxisAlignment: MainAxisAlignment.start, user: reaction.user,
crossAxisAlignment: CrossAxisAlignment.center, constraints: BoxConstraints.tightFor(
children: [ height: 64,
Stack( width: 64,
children: [ ),
UserAvatar( borderRadius: BorderRadius.circular(32),
onTap: onUserAvatarTap,
user: reaction.user,
constraints: BoxConstraints.tightFor(
height: 64,
width: 64,
),
borderRadius: BorderRadius.circular(32),
),
Positioned(
child: Align(
alignment: reverse
? Alignment.centerRight
: Alignment.centerLeft,
child: ReactionBubble(
reactions: [reaction],
flipTail: !reverse,
borderColor: messageTheme.reactionsBorderColor,
backgroundColor:
messageTheme.reactionsBackgroundColor,
highlightOwnReactions: false,
),
),
bottom: 6,
left: isCurrentUser ? 0 : null,
right: isCurrentUser ? 0 : null,
),
],
),
const SizedBox(height: 8),
Text(
reaction.user.name,
style: StreamChatTheme.of(context).textTheme.footnoteBold,
textAlign: TextAlign.center,
),
],
), ),
), Positioned(
); child: Align(
}); alignment:
reverse ? Alignment.centerRight : Alignment.centerLeft,
child: ReactionBubble(
reactions: [reaction],
flipTail: !reverse,
borderColor: messageTheme.reactionsBorderColor,
backgroundColor: messageTheme.reactionsBackgroundColor,
highlightOwnReactions: false,
),
),
bottom: 6,
left: isCurrentUser ? 0 : null,
right: isCurrentUser ? 0 : null,
),
],
),
const SizedBox(height: 8),
Text(
reaction.user.name,
style: StreamChatTheme.of(context).textTheme.footnoteBold,
textAlign: TextAlign.center,
),
],
),
);
} }
} }
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