chore: Nicer message animation
This commit is contained in:
parent
b954362104
commit
3d7dbf7ddf
1 changed files with 238 additions and 223 deletions
|
|
@ -144,11 +144,12 @@ class Message extends StatelessWidget {
|
||||||
setState(resetAnimateIn);
|
setState(resetAnimateIn);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
return AnimatedSlide(
|
return AnimatedSize(
|
||||||
offset: Offset(0, animateIn ? 1 : 0),
|
|
||||||
duration: FluffyThemes.animationDuration,
|
duration: FluffyThemes.animationDuration,
|
||||||
curve: FluffyThemes.animationCurve,
|
curve: FluffyThemes.animationCurve,
|
||||||
child: Stack(
|
child: animateIn
|
||||||
|
? const SizedBox.shrink()
|
||||||
|
: Stack(
|
||||||
children: [
|
children: [
|
||||||
Positioned(
|
Positioned(
|
||||||
top: 0,
|
top: 0,
|
||||||
|
|
@ -201,7 +202,8 @@ class Message extends StatelessWidget {
|
||||||
child: event.status == EventStatus.error
|
child: event.status == EventStatus.error
|
||||||
? const Icon(Icons.error, color: Colors.red)
|
? const Icon(Icons.error, color: Colors.red)
|
||||||
: event.fileSendingStatus != null
|
: event.fileSendingStatus != null
|
||||||
? const CircularProgressIndicator.adaptive(
|
? const CircularProgressIndicator
|
||||||
|
.adaptive(
|
||||||
strokeWidth: 1,
|
strokeWidth: 1,
|
||||||
)
|
)
|
||||||
: null,
|
: null,
|
||||||
|
|
@ -212,8 +214,8 @@ class Message extends StatelessWidget {
|
||||||
FutureBuilder<User?>(
|
FutureBuilder<User?>(
|
||||||
future: event.fetchSenderUser(),
|
future: event.fetchSenderUser(),
|
||||||
builder: (context, snapshot) {
|
builder: (context, snapshot) {
|
||||||
final user =
|
final user = snapshot.data ??
|
||||||
snapshot.data ?? event.senderFromMemoryOrFallback;
|
event.senderFromMemoryOrFallback;
|
||||||
return Avatar(
|
return Avatar(
|
||||||
mxContent: user.avatarUrl,
|
mxContent: user.avatarUrl,
|
||||||
name: user.calcDisplayname(),
|
name: user.calcDisplayname(),
|
||||||
|
|
@ -231,26 +233,27 @@ class Message extends StatelessWidget {
|
||||||
children: [
|
children: [
|
||||||
if (!nextEventSameSender)
|
if (!nextEventSameSender)
|
||||||
Padding(
|
Padding(
|
||||||
padding:
|
padding: const EdgeInsets.only(
|
||||||
const EdgeInsets.only(left: 8.0, bottom: 4),
|
left: 8.0, bottom: 4),
|
||||||
child: ownMessage || event.room.isDirectChat
|
child: ownMessage || event.room.isDirectChat
|
||||||
? const SizedBox(height: 12)
|
? const SizedBox(height: 12)
|
||||||
: FutureBuilder<User?>(
|
: FutureBuilder<User?>(
|
||||||
future: event.fetchSenderUser(),
|
future: event.fetchSenderUser(),
|
||||||
builder: (context, snapshot) {
|
builder: (context, snapshot) {
|
||||||
final displayname =
|
final displayname = snapshot.data
|
||||||
snapshot.data?.calcDisplayname() ??
|
?.calcDisplayname() ??
|
||||||
event.senderFromMemoryOrFallback
|
event.senderFromMemoryOrFallback
|
||||||
.calcDisplayname();
|
.calcDisplayname();
|
||||||
return Text(
|
return Text(
|
||||||
displayname,
|
displayname,
|
||||||
style: TextStyle(
|
style: TextStyle(
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
color:
|
color: (Theme.of(context)
|
||||||
(Theme.of(context).brightness ==
|
.brightness ==
|
||||||
Brightness.light
|
Brightness.light
|
||||||
? displayname.color
|
? displayname.color
|
||||||
: displayname.lightColorText),
|
: displayname
|
||||||
|
.lightColorText),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
@ -278,7 +281,8 @@ class Message extends StatelessWidget {
|
||||||
duration: FluffyThemes.animationDuration,
|
duration: FluffyThemes.animationDuration,
|
||||||
curve: FluffyThemes.animationCurve,
|
curve: FluffyThemes.animationCurve,
|
||||||
child: Material(
|
child: Material(
|
||||||
color: noBubble ? Colors.transparent : color,
|
color:
|
||||||
|
noBubble ? Colors.transparent : color,
|
||||||
clipBehavior: Clip.antiAlias,
|
clipBehavior: Clip.antiAlias,
|
||||||
shape: RoundedRectangleBorder(
|
shape: RoundedRectangleBorder(
|
||||||
borderRadius: borderRadius,
|
borderRadius: borderRadius,
|
||||||
|
|
@ -296,7 +300,8 @@ class Message extends StatelessWidget {
|
||||||
vertical: 8,
|
vertical: 8,
|
||||||
),
|
),
|
||||||
constraints: const BoxConstraints(
|
constraints: const BoxConstraints(
|
||||||
maxWidth: FluffyThemes.columnWidth * 1.5,
|
maxWidth:
|
||||||
|
FluffyThemes.columnWidth * 1.5,
|
||||||
),
|
),
|
||||||
child: Column(
|
child: Column(
|
||||||
mainAxisSize: MainAxisSize.min,
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
|
@ -306,10 +311,12 @@ class Message extends StatelessWidget {
|
||||||
if (event.relationshipType ==
|
if (event.relationshipType ==
|
||||||
RelationshipTypes.reply)
|
RelationshipTypes.reply)
|
||||||
FutureBuilder<Event?>(
|
FutureBuilder<Event?>(
|
||||||
future: event.getReplyEvent(timeline),
|
future: event
|
||||||
builder:
|
.getReplyEvent(timeline),
|
||||||
(BuildContext context, snapshot) {
|
builder: (BuildContext context,
|
||||||
final replyEvent = snapshot.hasData
|
snapshot) {
|
||||||
|
final replyEvent = snapshot
|
||||||
|
.hasData
|
||||||
? snapshot.data!
|
? snapshot.data!
|
||||||
: Event(
|
: Event(
|
||||||
eventId: event
|
eventId: event
|
||||||
|
|
@ -318,27 +325,33 @@ class Message extends StatelessWidget {
|
||||||
'msgtype': 'm.text',
|
'msgtype': 'm.text',
|
||||||
'body': '...',
|
'body': '...',
|
||||||
},
|
},
|
||||||
senderId: event.senderId,
|
senderId:
|
||||||
type: 'm.room.message',
|
event.senderId,
|
||||||
|
type:
|
||||||
|
'm.room.message',
|
||||||
room: event.room,
|
room: event.room,
|
||||||
status: EventStatus.sent,
|
status:
|
||||||
|
EventStatus.sent,
|
||||||
originServerTs:
|
originServerTs:
|
||||||
DateTime.now(),
|
DateTime.now(),
|
||||||
);
|
);
|
||||||
return Padding(
|
return Padding(
|
||||||
padding: const EdgeInsets.only(
|
padding:
|
||||||
|
const EdgeInsets.only(
|
||||||
bottom: 4.0,
|
bottom: 4.0,
|
||||||
),
|
),
|
||||||
child: InkWell(
|
child: InkWell(
|
||||||
borderRadius:
|
borderRadius: ReplyContent
|
||||||
ReplyContent.borderRadius,
|
.borderRadius,
|
||||||
onTap: () => scrollToEventId(
|
onTap: () =>
|
||||||
|
scrollToEventId(
|
||||||
replyEvent.eventId,
|
replyEvent.eventId,
|
||||||
),
|
),
|
||||||
child: AbsorbPointer(
|
child: AbsorbPointer(
|
||||||
child: ReplyContent(
|
child: ReplyContent(
|
||||||
replyEvent,
|
replyEvent,
|
||||||
ownMessage: ownMessage,
|
ownMessage:
|
||||||
|
ownMessage,
|
||||||
timeline: timeline,
|
timeline: timeline,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|
@ -361,18 +374,20 @@ class Message extends StatelessWidget {
|
||||||
top: 4.0,
|
top: 4.0,
|
||||||
),
|
),
|
||||||
child: Row(
|
child: Row(
|
||||||
mainAxisSize: MainAxisSize.min,
|
mainAxisSize:
|
||||||
|
MainAxisSize.min,
|
||||||
children: [
|
children: [
|
||||||
Icon(
|
Icon(
|
||||||
Icons.edit_outlined,
|
Icons.edit_outlined,
|
||||||
color: textColor.withAlpha(164),
|
color: textColor
|
||||||
|
.withAlpha(164),
|
||||||
size: 14,
|
size: 14,
|
||||||
),
|
),
|
||||||
Text(
|
Text(
|
||||||
' - ${displayEvent.originServerTs.localizedTimeShort(context)}',
|
' - ${displayEvent.originServerTs.localizedTimeShort(context)}',
|
||||||
style: TextStyle(
|
style: TextStyle(
|
||||||
color:
|
color: textColor
|
||||||
textColor.withAlpha(164),
|
.withAlpha(164),
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue