Xeewy/TravelMate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add sender avatar display and member list enhancements in chat group

Browse Source
This commit is contained in:
Van Leemput Dayron
2025-11-13 18:35:00 +01:00
parent 41402e1b2c
commit 9101a94691
1 changed files with 117 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
lib/components/group/chat_group_content.dart
View File

@@ -381,76 +381,117 @@ class _ChatGroupContentState extends State<ChatGroupContent> {
textColor = isDark ? Colors.white : Colors.black87;
}
// Trouver le membre qui a envoyé le message pour récupérer sa photo
final senderMember = widget.group.members.firstWhere(
(m) => m.userId == message.senderId,
orElse: () => null as dynamic,
) as dynamic;
return Align(
alignment: isMe ? Alignment.centerRight : Alignment.centerLeft,
child: GestureDetector(
onLongPress: () => _showMessageOptions(context, message, isMe, currentUserId),
child: Container(
margin: const EdgeInsets.symmetric(vertical: 4),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.7,
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: 8,
vertical: 4,
),
decoration: BoxDecoration(
color: bubbleColor,
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(16),
topRight: const Radius.circular(16),
bottomLeft: Radius.circular(isMe ? 16 : 4),
bottomRight: Radius.circular(isMe ? 4 : 16),
),
),
child: Column(
crossAxisAlignment: isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
child: Row(
mainAxisAlignment: isMe ? MainAxisAlignment.end : MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
// Avatar du sender (seulement pour les autres messages)
if (!isMe) ...[
Text(
message.senderName,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: isDark ? Colors.grey[400] : Colors.grey[700],
),
CircleAvatar(
radius: 16,
backgroundImage: (senderMember != null &&
senderMember.profilePictureUrl != null &&
senderMember.profilePictureUrl!.isNotEmpty)
? NetworkImage(senderMember.profilePictureUrl!)
: null,
child: (senderMember == null ||
senderMember.profilePictureUrl == null ||
senderMember.profilePictureUrl!.isEmpty)
? Text(
message.senderName.isNotEmpty
? message.senderName[0].toUpperCase()
: '?',
style: const TextStyle(fontSize: 12),
)
: null,
),
const SizedBox(height: 4),
const SizedBox(width: 8),
],
Text(
message.text,
style: TextStyle(fontSize: 15, color: textColor),
),
const SizedBox(height: 4),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
_formatTime(message.timestamp),
style: TextStyle(
fontSize: 11,
color: textColor.withValues(alpha: 0.7),
),
),
if (message.isEdited) ...[
const SizedBox(width: 4),
Text(
'(modifié)',
style: TextStyle(
fontSize: 10,
fontStyle: FontStyle.italic,
color: textColor.withValues(alpha: 0.6),
),
),
],
],
),
// Afficher les réactions
if (message.reactions.isNotEmpty)
Padding(
padding: const EdgeInsets.only(top: 4),
child: Wrap(
spacing: 4,
children: _buildReactionChips(message, currentUserId),
Container(
margin: const EdgeInsets.symmetric(vertical: 4),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.65,
),
decoration: BoxDecoration(
color: bubbleColor,
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(16),
topRight: const Radius.circular(16),
bottomLeft: Radius.circular(isMe ? 16 : 4),
bottomRight: Radius.circular(isMe ? 4 : 16),
),
),
child: Column(
crossAxisAlignment: isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
children: [
if (!isMe) ...[
Text(
message.senderName,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: isDark ? Colors.grey[400] : Colors.grey[700],
),
),
const SizedBox(height: 4),
],
Text(
message.text,
style: TextStyle(fontSize: 15, color: textColor),
),
const SizedBox(height: 4),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
_formatTime(message.timestamp),
style: TextStyle(
fontSize: 11,
color: textColor.withValues(alpha: 0.7),
),
),
if (message.isEdited) ...[
const SizedBox(width: 4),
Text(
'(modifié)',
style: TextStyle(
fontSize: 10,
fontStyle: FontStyle.italic,
color: textColor.withValues(alpha: 0.6),
),
),
],
],
),
// Afficher les réactions
if (message.reactions.isNotEmpty)
Padding(
padding: const EdgeInsets.only(top: 4),
child: Wrap(
spacing: 4,
children: _buildReactionChips(message, currentUserId),
),
),
],
),
),
],
),
),
@@ -642,11 +683,26 @@ class _ChatGroupContentState extends State<ChatGroupContent> {
itemCount: widget.group.members.length,
itemBuilder: (context, index) {
final member = widget.group.members[index];
final initials = member.pseudo.isNotEmpty
? member.pseudo[0].toUpperCase()
: (member.firstName.isNotEmpty
? member.firstName[0].toUpperCase()
: '?');
return ListTile(
leading: CircleAvatar(
child: Text(member.pseudo.substring(0, 1).toUpperCase()),
backgroundImage: (member.profilePictureUrl != null &&
member.profilePictureUrl!.isNotEmpty)
? NetworkImage(member.profilePictureUrl!)
: null,
child: (member.profilePictureUrl == null || member.profilePictureUrl!.isEmpty)
? Text(initials)
: null,
),
title: Text(member.pseudo),
subtitle: member.role == 'admin'
? const Text('Administrateur', style: TextStyle(fontSize: 12))
: null,
);
},
),