feat: Cute animations for unread badge and typing icon

This commit is contained in:
Christian Pauly 2021-05-31 17:34:18 +02:00
parent 1bba8164f0
commit b2d250c5ef

View File

@ -202,18 +202,26 @@ class ChatListItem extends StatelessWidget {
), ),
SizedBox(width: 4), SizedBox(width: 4),
}, },
if (typingText.isNotEmpty) ...{ AnimatedContainer(
Icon( width: typingText.isEmpty ? 0 : 18,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(),
duration: Duration(milliseconds: 300),
curve: Curves.bounceInOut,
padding: EdgeInsets.only(right: 4),
child: Icon(
Icons.edit_outlined, Icons.edit_outlined,
color: Theme.of(context).colorScheme.secondary, color: Theme.of(context).colorScheme.secondary,
size: 14, size: 14,
), ),
SizedBox(width: 4), ),
},
if (typingText.isEmpty && if (typingText.isEmpty &&
!ownMessage && !ownMessage &&
!room.isDirectChat && !room.isDirectChat &&
room.lastEvent != null) room.lastEvent != null &&
room.lastEvent.type == EventTypes.Message &&
{MessageTypes.Text, MessageTypes.Notice}
.contains(room.lastEvent.messageType))
Text( Text(
'${room.lastEvent.sender.calcDisplayname()}: ', '${room.lastEvent.sender.calcDisplayname()}: ',
style: TextStyle( style: TextStyle(
@ -267,27 +275,32 @@ class ChatListItem extends StatelessWidget {
color: Theme.of(context).colorScheme.secondary, color: Theme.of(context).colorScheme.secondary,
), ),
), ),
if (room.isUnread) AnimatedContainer(
Container( duration: Duration(milliseconds: 300),
padding: EdgeInsets.symmetric(horizontal: 7), curve: Curves.bounceInOut,
height: room.notificationCount > 0 ? 20 : 14, padding: EdgeInsets.symmetric(horizontal: 7),
decoration: BoxDecoration( height: room.isUnread
color: room.highlightCount > 0 || room.markedUnread ? room.notificationCount > 0
? Colors.red ? 20
: Theme.of(context).primaryColor, : 14
borderRadius: BorderRadius.circular(20), : 0,
), decoration: BoxDecoration(
child: Center( color: room.highlightCount > 0 || room.markedUnread
child: room.notificationCount > 0 ? Colors.red
? Text( : Theme.of(context).primaryColor,
room.notificationCount.toString(), borderRadius: BorderRadius.circular(20),
style: TextStyle(
color: Colors.white,
),
)
: Container(),
),
), ),
child: Center(
child: room.notificationCount > 0
? Text(
room.notificationCount.toString(),
style: TextStyle(
color: Colors.white,
),
)
: Container(),
),
),
], ],
), ),
onTap: () => clickAction(context), onTap: () => clickAction(context),