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

Merge pull request #144 from GetStream/feature/animations

Browse Source 
Feature/animations
This commit is contained in:
Salvatore Giordano
2020-11-23 12:20:07 +01:00
committed by GitHub
parent 0a9652f1ac 162971636e
commit a82f189af2
7 changed files with 447 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/src/message_actions_modal.dart
+29 -6
View File
@@ -95,7 +95,13 @@ class MessageActionsModal extends StatelessWidget {
messageTheme: messageTheme,
),
),
IgnorePointer(
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,
@@ -116,10 +122,22 @@ class MessageActionsModal extends StatelessWidget {
shape: messageShape,
),
),
);
}),
SizedBox(
height: 8,
),
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: Alignment.topRight,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 48.0,
),
@@ -129,7 +147,8 @@ class MessageActionsModal extends StatelessWidget {
borderRadius: BorderRadius.circular(16),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
crossAxisAlignment:
CrossAxisAlignment.stretch,
children: ListTile.divideTiles(
context: context,
tiles: [
@@ -139,15 +158,19 @@ class MessageActionsModal extends StatelessWidget {
message.status == null) &&
message.parentId == null)
_buildReplyButton(context),
if (showEditMessage) _buildEditMessage(context),
if (showEditMessage)
_buildEditMessage(context),
if (showDeleteMessage)
_buildDeleteButton(context),
if (showCopyMessage) _buildCopyButton(context),
if (showCopyMessage)
_buildCopyButton(context),
],
).toList(),
),
),
)
),
);
})
],
),
),
lib/src/message_input.dart
+38 -10
View File
@@ -540,6 +540,14 @@ class MessageInputState extends State<MessageInput> {
bottom: size.height + MediaQuery.of(context).viewInsets.bottom,
left: 0,
right: 0,
child: TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: Duration(milliseconds: 300),
curve: Curves.easeInOutExpo,
builder: (context, val, wid) {
return Transform.scale(
alignment: Alignment.center,
scale: val,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
@@ -560,15 +568,17 @@ class MessageInputState extends State<MessageInput> {
children: [
if (commands.isNotEmpty)
Padding(
padding: const EdgeInsets.only(left: 8.0, top: 8.0),
padding:
const EdgeInsets.only(left: 8.0, top: 8.0),
child: Row(
children: [
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 8.0),
padding: const EdgeInsets.symmetric(
horizontal: 8.0),
child: Icon(
StreamIcons.lightning,
color: StreamChatTheme.of(context).accentColor,
color: StreamChatTheme.of(context)
.accentColor,
),
),
Text(
@@ -583,11 +593,14 @@ class MessageInputState extends State<MessageInput> {
...commands
.map(
(c) => ListTile(
leading: c.name == 'giphy' ? _buildGiphyIcon() : null,
leading: c.name == 'giphy'
? _buildGiphyIcon()
: null,
title: Text.rich(
TextSpan(
text: '${c.name.capitalize()}',
style: TextStyle(fontWeight: FontWeight.bold),
style: TextStyle(
fontWeight: FontWeight.bold),
children: [
TextSpan(
text: ' /${c.name} ${c.args}',
@@ -621,6 +634,8 @@ class MessageInputState extends State<MessageInput> {
),
),
);
}),
);
});
}
@@ -929,6 +944,13 @@ class MessageInputState extends State<MessageInput> {
bottom: size.height + MediaQuery.of(context).viewInsets.bottom,
left: 0,
right: 0,
child: TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: Duration(milliseconds: 300),
curve: Curves.easeInOutExpo,
builder: (context, val, wid) {
return Transform.scale(
scale: val,
child: Card(
margin: EdgeInsets.all(8.0),
elevation: 2.0,
@@ -962,12 +984,14 @@ class MessageInputState extends State<MessageInput> {
),
title: Text(
'${m.user.name}',
style: TextStyle(fontWeight: FontWeight.bold),
style: TextStyle(
fontWeight: FontWeight.bold),
),
subtitle: Text('@${m.userId}'),
trailing: Icon(
StreamIcons.at_mention,
color: StreamChatTheme.of(context).accentColor,
color: StreamChatTheme.of(context)
.accentColor,
),
onTap: () {
_mentionedUsers.add(m.user);
@@ -975,9 +999,11 @@ class MessageInputState extends State<MessageInput> {
splits[splits.length - 1] = m.user.name;
final rejoin = splits.join('@');
textEditingController.value = TextEditingValue(
textEditingController.value =
TextEditingValue(
text: rejoin +
textEditingController.text.substring(
textEditingController.text
.substring(
textEditingController
.selection.start),
selection: TextSelection.collapsed(
@@ -995,6 +1021,8 @@ class MessageInputState extends State<MessageInput> {
),
),
);
}),
);
});
}
lib/src/message_reactions_modal.dart
+21 -3
View File
@@ -86,7 +86,13 @@ class MessageReactionsModal extends StatelessWidget {
messageTheme: messageTheme,
),
),
IgnorePointer(
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,
@@ -107,6 +113,8 @@ class MessageReactionsModal extends StatelessWidget {
showReactionPickerIndicator: true,
),
),
);
}),
SizedBox(
height: 16,
),
@@ -178,7 +186,14 @@ class MessageReactionsModal extends StatelessWidget {
BuildContext context,
) {
final isCurrentUser = reaction.user.id == currentUser.id;
return ConstrainedBox(
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(
constraints: BoxConstraints.loose(Size(
64,
98,
@@ -205,7 +220,8 @@ class MessageReactionsModal extends StatelessWidget {
child: ReactionBubble(
reactions: [reaction],
borderColor: messageTheme.reactionsBorderColor,
backgroundColor: messageTheme.reactionsBackgroundColor,
backgroundColor:
messageTheme.reactionsBackgroundColor,
highlightOwnReactions: false,
),
),
@@ -222,6 +238,8 @@ class MessageReactionsModal extends StatelessWidget {
),
],
),
),
);
});
}
}
lib/src/reaction_picker.dart
+91 -12
View File
@@ -1,4 +1,6 @@
import 'package:ezanimation/ezanimation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/physics.dart';
import '../stream_chat_flutter.dart';
@@ -8,7 +10,8 @@ import '../stream_chat_flutter.dart';
/// It shows a reaction picker
///
/// Usually you don't use this widget as it's one of the default widgets used by [MessageWidget.onMessageActions].
class ReactionPicker extends StatelessWidget {
class ReactionPicker extends StatefulWidget {
const ReactionPicker({
Key key,
@required this.message,
@@ -18,11 +21,44 @@ class ReactionPicker extends StatelessWidget {
final Message message;
final MessageTheme messageTheme;
@override
_ReactionPickerState createState() => _ReactionPickerState();
}
class _ReactionPickerState extends State<ReactionPicker>
with TickerProviderStateMixin {
List<EzAnimation> animations = [];
@override
Widget build(BuildContext context) {
final reactionIcons = StreamChatTheme.of(context).reactionIcons;
return Material(
color: messageTheme.reactionsBackgroundColor,
if (animations.isEmpty && reactionIcons.isNotEmpty) {
reactionIcons.forEach((element) {
animations.add(
EzAnimation.sequence(
[
SequenceItem(0.0, 1.4),
SequenceItem(1.4, 1.0),
],
Duration(milliseconds: 500),
vsync: this,
),
);
});
triggerAnimations();
}
return TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
curve: Curves.easeInOutExpo,
duration: Duration(milliseconds: 500),
builder: (context, val, wid) {
return Transform.scale(
scale: val,
child: Material(
color: widget.messageTheme.reactionsBackgroundColor,
clipBehavior: Clip.hardEdge,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
@@ -32,22 +68,39 @@ class ReactionPicker extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: reactionIcons.map((reactionIcon) {
final ownReactionIndex = message.ownReactions?.indexWhere(
(reaction) => reaction.type == reactionIcon.type) ??
final ownReactionIndex = widget.message.ownReactions
?.indexWhere((reaction) =>
reaction.type == reactionIcon.type) ??
-1;
var index = reactionIcons.indexOf(reactionIcon);
return IconButton(
iconSize: 24,
icon: Icon(
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),
child: Icon(
reactionIcon.iconData,
size: animations[index].value * 24.0,
color: ownReactionIndex != -1
? StreamChatTheme.of(context).accentColor
: Theme.of(context).iconTheme.color.withOpacity(.5),
: Theme.of(context)
.iconTheme
.color
.withOpacity(.5),
),
);
}),
onPressed: () {
if (ownReactionIndex != -1) {
removeReaction(
context,
message.ownReactions[ownReactionIndex],
widget.message.ownReactions[ownReactionIndex],
);
} else {
sendReaction(
@@ -59,18 +112,44 @@ class ReactionPicker extends StatelessWidget {
);
}).toList(),
),
),
);
});
}
void triggerAnimations() async {
for (var a in animations) {
a.start();
await Future.delayed(Duration(milliseconds: 100));
}
}
void pop() async {
for (var a in animations) {
a.stop();
}
Navigator.of(context).pop();
}
/// Add a reaction to the message
void sendReaction(BuildContext context, String reactionType) {
StreamChannel.of(context).channel.sendReaction(message, reactionType);
Navigator.of(context).pop();
StreamChannel.of(context)
.channel
.sendReaction(widget.message, reactionType);
pop();
}
/// Remove a reaction from the message
void removeReaction(BuildContext context, Reaction reaction) {
StreamChannel.of(context).channel.deleteReaction(message, reaction);
Navigator.of(context).pop();
StreamChannel.of(context).channel.deleteReaction(widget.message, reaction);
pop();
}
@override
void dispose() {
for (var a in animations) {
a?.dispose();
}
super.dispose();
}
}
pubspec.yaml
+1
View File
@@ -40,6 +40,7 @@ dependencies:
git: https://github.com/imtoori/media_gallery.git
permission_handler: ^5.0.1+1
transparent_image: ^1.0.0
ezanimation: ^0.4.1
flutter:
assets:
test/src/message_action_modal_test.dart
+2
View File
@@ -40,6 +40,7 @@ void main() {
);
await tester.pump();
await tester.pump(Duration(milliseconds: 1000));
expect(find.byKey(Key('MessageWidget')), findsOneWidget);
expect(find.byIcon(StreamIcons.sorting_up), findsOneWidget);
expect(find.byIcon(StreamIcons.edit), findsOneWidget);
@@ -84,6 +85,7 @@ void main() {
);
await tester.pump();
await tester.pump(Duration(milliseconds: 1000));
expect(find.byKey(Key('MessageWidget')), findsOneWidget);
expect(find.byIcon(StreamIcons.sorting_up), findsNothing);
expect(find.byIcon(StreamIcons.edit), findsNothing);
test/src/message_reaction_modal_test.dart
+3
View File
@@ -39,6 +39,8 @@ void main() {
),
);
await tester.pump(Duration(milliseconds: 1000));
expect(find.byKey(Key('MessageWidget')), findsOneWidget);
expect(find.byIcon(StreamIcons.thumbs_up_reaction), findsOneWidget);
},
@@ -87,6 +89,7 @@ void main() {
);
await tester.pump();
await tester.pump(Duration(milliseconds: 1000));
expect(find.byKey(Key('MessageWidget')), findsOneWidget);
expect(find.byIcon(StreamIcons.thumbs_up_reaction), findsNWidgets(2));
expect(find.byIcon(StreamIcons.love_reaction), findsNWidgets(2));