[ad_1]
I’m engaged on a chat web page and I wish to assign completely different spacing between messages relying on the kind of message (receiver or sender), I managed to get nearer to what I had in thoughts however the code will not be clear in any respect, do you’ve got any concepts?
My message record
Column(
kids: [
Expanded(
child: GestureDetector(
onTap: () {
context.read<ChatController>().focusNode.unfocus();
},
child: Align(
alignment: Alignment.topCenter,
child: Selector<ChatController, List<ChatMessage>>(
selector: (context, controller) =>
controller.chatList.reversed.toList(),
builder: (context, chatList, child) {
return ListView.builder(
shrinkWrap: true,
reverse: true,
padding: const EdgeInsets.only(
right: 15,
left: 15,
bottom: 15,
top: kToolbarHeight * 2.5),
physics: const BouncingScrollPhysics(),
controller:
context.read<ChatController>().scrollController,
itemCount: chatList.length,
itemBuilder: (context, index) {
// Spacing
final previousMessage =
index > 0 ? chatList[index - 1] : null;
closing currentMessage = chatList[index];
closing nextMessage = index < chatList.size - 1
? chatList[index + 1]
: null;
EdgeInsets padding =
const EdgeInsets.solely(high: 0, backside: 0);
if (currentMessage.messageType ==
ChatMessageType.receiver) {
if (previousMessage != null &&
previousMessage.messageType ==
ChatMessageType.receiver &&
nextMessage != null &&
nextMessage.messageType ==
ChatMessageType.receiver) {
padding = const EdgeInsets.solely(high: 5, backside: 0);
}
if (previousMessage != null &&
previousMessage.messageType ==
ChatMessageType.receiver &&
nextMessage != null &&
nextMessage.messageType == ChatMessageType.despatched) {
padding = const EdgeInsets.solely(high: 10, backside: 5);
}
if (previousMessage != null &&
previousMessage.messageType ==
ChatMessageType.despatched &&
nextMessage != null &&
nextMessage.messageType ==
ChatMessageType.receiver) {
padding = const EdgeInsets.solely(high: 0, backside: 10);
}
if (previousMessage != null &&
previousMessage.messageType ==
ChatMessageType.despatched &&
nextMessage != null &&
nextMessage.messageType == ChatMessageType.despatched) {
padding =
const EdgeInsets.solely(high: 10, backside: 10);
}
} else if (currentMessage.messageType ==
ChatMessageType.despatched) {
if (previousMessage != null &&
previousMessage.messageType ==
ChatMessageType.despatched &&
nextMessage != null &&
nextMessage.messageType == ChatMessageType.despatched) {
padding = const EdgeInsets.solely(high: 0, backside: 0);
}
if (previousMessage != null &&
previousMessage.messageType ==
ChatMessageType.despatched &&
nextMessage != null &&
nextMessage.messageType ==
ChatMessageType.receiver) {
padding = const EdgeInsets.solely(high: 10, backside: 5);
}
if (previousMessage != null &&
previousMessage.messageType ==
ChatMessageType.receiver &&
nextMessage != null &&
nextMessage.messageType == ChatMessageType.despatched) {
padding = const EdgeInsets.solely(high: 0, backside: 10);
}
if (previousMessage != null &&
previousMessage.messageType ==
ChatMessageType.receiver &&
nextMessage != null &&
nextMessage.messageType ==
ChatMessageType.receiver) {
padding =
const EdgeInsets.solely(high: 10, backside: 10);
}
}
return Padding(
padding: padding,
baby: ChatBubble(
chat: currentMessage,
chatUsers: widget.chatUsers,
),
);
},
);
},
),
),
),
),
Divider(
thickness: .5,
colour: Theme.of(context).cupertinoOverrideTheme?.primaryColor,
top: 1,
),
const _BottomInputField(),
],
),
My message mannequin
import 'package deal:lumina_project/fashions/enum/chat_message_type.dart';
class ChatMessage {
closing DateTime time;
closing String messageContent;
closing ChatMessageType messageType;
closing String? path;
closing bool choose;
closing bool isLiked;
ChatMessage(
{required this.time,
required this.messageContent,
required this.messageType,
required this.choose,
required this.isLiked,
this.path});
manufacturing facility ChatMessage.despatched({required message}) => ChatMessage(
messageContent: message,
messageType: ChatMessageType.despatched,
time: DateTime.now(),
choose: false,
isLiked: false,
);
static Record<ChatMessage> generate() {
return [
ChatMessage(
time: DateTime.now().subtract(const Duration(minutes: 15)),
messageContent: "Hello!",
messageType: ChatMessageType.sent,
select: false,
isLiked: false,
),
ChatMessage(
time: DateTime.now().subtract(const Duration(minutes: 14)),
messageContent: "Nice to meet you!",
messageType: ChatMessageType.receiver,
select: false,
isLiked: false,
),
ChatMessage(
time: DateTime.now().subtract(const Duration(minutes: 13)),
messageContent: "The weather is nice today.",
messageType: ChatMessageType.sent,
select: false,
isLiked: false,
),
ChatMessage(
time: DateTime.now().subtract(const Duration(minutes: 12)),
messageContent: "Yes, it's a great day to go out.",
messageType: ChatMessageType.receiver,
select: false,
isLiked: false,
),
ChatMessage(
time: DateTime.now().subtract(const Duration(minutes: 11)),
messageContent: "Have a nice day!",
messageType: ChatMessageType.sent,
select: false,
isLiked: false,
),
ChatMessage(
time: DateTime.now().subtract(const Duration(minutes: 10)),
messageContent: "What are your plans for the weekend?",
messageType: ChatMessageType.receiver,
select: false,
isLiked: false,
),
ChatMessage(
time: DateTime.now().subtract(const Duration(minutes: 9)),
messageContent: "I'm planning to go to the beach.",
messageType: ChatMessageType.sent,
select: false,
isLiked: false,
),
ChatMessage(
time: DateTime.now().subtract(const Duration(minutes: 8)),
messageContent: "That sounds fun!",
messageType: ChatMessageType.receiver,
select: false,
isLiked: false,
),
ChatMessage(
time: DateTime.now().subtract(const Duration(minutes: 7)),
messageContent: "Do you want to come with me?",
messageType: ChatMessageType.sent,
select: false,
isLiked: false,
),
ChatMessage(
time: DateTime.now().subtract(const Duration(minutes: 6)),
messageContent: "Sure, I'd love to!",
messageType: ChatMessageType.receiver,
select: false,
isLiked: false,
),
ChatMessage(
time: DateTime.now().subtract(const Duration(minutes: 5)),
messageContent: "What time should we meet?",
messageType: ChatMessageType.receiver,
select: false,
isLiked: false,
),
ChatMessage(
time: DateTime.now().subtract(const Duration(minutes: 4)),
messageContent: "Let's meet at 10am.",
messageType: ChatMessageType.sent,
select: false,
isLiked: false,
),
ChatMessage(
time: DateTime.now().subtract(const Duration(minutes: 3)),
messageContent: "Sounds good to me!",
messageType: ChatMessageType.receiver,
select: false,
isLiked: false,
),
ChatMessage(
time: DateTime.now().subtract(const Duration(minutes: 2)),
messageContent: "See you then!",
messageType: ChatMessageType.sent,
select: false,
isLiked: false,
),
ChatMessage(
messageContent: "Bye!",
messageType: ChatMessageType.receiver,
time: DateTime.now().subtract(const Duration(minutes: 1)),
select: false,
isLiked: false,
),
ChatMessage(
messageContent: "How was your weekend?",
messageType: ChatMessageType.receiver,
time: DateTime.now().subtract(const Duration(minutes: 1)),
select: false,
isLiked: false,
),
ChatMessage(
messageContent: "It was great! The beach was awesome.",
messageType: ChatMessageType.sent,
time: DateTime.now(),
select: false,
isLiked: false,
),
ChatMessage(
messageContent: "I'm glad to hear that!",
messageType: ChatMessageType.receiver,
time: DateTime.now(),
select: false,
isLiked: false,
),
ChatMessage(
messageContent: "We should do that again sometime.",
messageType: ChatMessageType.sent,
time: DateTime.now(),
select: false,
isLiked: false,
),
ChatMessage(
messageContent: "Definitely!",
messageType: ChatMessageType.receiver,
time: DateTime.now(),
select: false,
isLiked: false,
),
];
}
}
Because of those that take the time to assist me
[ad_2]