feat: Added animations for giphy and mentions

This commit is contained in:
Deven Joshi
2020-11-20 15:07:42 +05:30
parent f9231e93b3
commit c70c49d54d
+38 -10
View File
@@ -536,6 +536,14 @@ class MessageInputState extends State<MessageInput> {
bottom: size.height + MediaQuery.of(context).viewInsets.bottom, bottom: size.height + MediaQuery.of(context).viewInsets.bottom,
left: 0, left: 0,
right: 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( child: Padding(
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
child: Card( child: Card(
@@ -556,15 +564,17 @@ class MessageInputState extends State<MessageInput> {
children: [ children: [
if (commands.isNotEmpty) if (commands.isNotEmpty)
Padding( Padding(
padding: const EdgeInsets.only(left: 8.0, top: 8.0), padding:
const EdgeInsets.only(left: 8.0, top: 8.0),
child: Row( child: Row(
children: [ children: [
Padding( Padding(
padding: padding: const EdgeInsets.symmetric(
const EdgeInsets.symmetric(horizontal: 8.0), horizontal: 8.0),
child: Icon( child: Icon(
StreamIcons.lightning, StreamIcons.lightning,
color: StreamChatTheme.of(context).accentColor, color: StreamChatTheme.of(context)
.accentColor,
), ),
), ),
Text( Text(
@@ -579,11 +589,14 @@ class MessageInputState extends State<MessageInput> {
...commands ...commands
.map( .map(
(c) => ListTile( (c) => ListTile(
leading: c.name == 'giphy' ? _buildGiphyIcon() : null, leading: c.name == 'giphy'
? _buildGiphyIcon()
: null,
title: Text.rich( title: Text.rich(
TextSpan( TextSpan(
text: '${c.name.capitalize()}', text: '${c.name.capitalize()}',
style: TextStyle(fontWeight: FontWeight.bold), style: TextStyle(
fontWeight: FontWeight.bold),
children: [ children: [
TextSpan( TextSpan(
text: ' /${c.name} ${c.args}', text: ' /${c.name} ${c.args}',
@@ -617,6 +630,8 @@ class MessageInputState extends State<MessageInput> {
), ),
), ),
); );
}),
);
}); });
} }
@@ -925,6 +940,13 @@ class MessageInputState extends State<MessageInput> {
bottom: size.height + MediaQuery.of(context).viewInsets.bottom, bottom: size.height + MediaQuery.of(context).viewInsets.bottom,
left: 0, left: 0,
right: 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( child: Card(
margin: EdgeInsets.all(8.0), margin: EdgeInsets.all(8.0),
elevation: 2.0, elevation: 2.0,
@@ -958,12 +980,14 @@ class MessageInputState extends State<MessageInput> {
), ),
title: Text( title: Text(
'${m.user.name}', '${m.user.name}',
style: TextStyle(fontWeight: FontWeight.bold), style: TextStyle(
fontWeight: FontWeight.bold),
), ),
subtitle: Text('@${m.userId}'), subtitle: Text('@${m.userId}'),
trailing: Icon( trailing: Icon(
StreamIcons.at_mention, StreamIcons.at_mention,
color: StreamChatTheme.of(context).accentColor, color: StreamChatTheme.of(context)
.accentColor,
), ),
onTap: () { onTap: () {
_mentionedUsers.add(m.user); _mentionedUsers.add(m.user);
@@ -971,9 +995,11 @@ class MessageInputState extends State<MessageInput> {
splits[splits.length - 1] = m.user.name; splits[splits.length - 1] = m.user.name;
final rejoin = splits.join('@'); final rejoin = splits.join('@');
textEditingController.value = TextEditingValue( textEditingController.value =
TextEditingValue(
text: rejoin + text: rejoin +
textEditingController.text.substring( textEditingController.text
.substring(
textEditingController textEditingController
.selection.start), .selection.start),
selection: TextSelection.collapsed( selection: TextSelection.collapsed(
@@ -991,6 +1017,8 @@ class MessageInputState extends State<MessageInput> {
), ),
), ),
); );
}),
);
}); });
} }