talksik/stream-chat-flutter
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: make the list work correctly with separators and findChildIndexCallback

Browse Source
This commit is contained in:
Salvatore Giordano
2021-09-08 13:14:53 +02:00
parent d48baf7274
commit 9b1d94693a
2 changed files with 67 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/stream_chat_flutter/lib/src/message_list_view.dart
+67 -71
View File
@@ -455,7 +455,7 @@ class _MessageListViewState extends State<MessageListView> {
onInBetweenOfPage: () { onInBetweenOfPage: () {
_inBetweenList = true; _inBetweenList = true;
}, },
child: ScrollablePositionedList.builder( child: ScrollablePositionedList.separated(
key: _upToDate key: _upToDate
? null ? null
: ValueKey(initialIndex + initialAlignment), : ValueKey(initialIndex + initialAlignment),
@@ -470,7 +470,7 @@ class _MessageListViewState extends State<MessageListView> {
final String data = (key as ValueKey).value; final String data = (key as ValueKey).value;
final index = final index =
messages.indexWhere((element) => element.id == data); messages.indexWhere((element) => element.id == data);
return index + 1; return ((index + 2) * 2) - 1;
}, },
// Item Count -> 8 (1 parent, 2 header+footer, 2 top+bottom, 3 messages) // Item Count -> 8 (1 parent, 2 header+footer, 2 top+bottom, 3 messages)
@@ -491,74 +491,72 @@ class _MessageListViewState extends State<MessageListView> {
// Separator(Footer -> 8??30) -> 0 (count-8) // Separator(Footer -> 8??30) -> 0 (count-8)
// Footer -> 0 (count-8) // Footer -> 0 (count-8)
// separatorBuilder: (context, i) { separatorBuilder: (context, i) {
// if (i == itemCount - 2) { if (i == itemCount - 2) {
// if (widget.parentMessage == null) { if (widget.parentMessage == null) {
// return const Offstage(); return const Offstage();
// } }
// return _buildThreadSeparator(); return _buildThreadSeparator();
// } }
// if (i == itemCount - 3) { if (i == itemCount - 3) {
// if (widget.headerBuilder == null) { if (widget.headerBuilder == null) {
// if (_isThreadConversation) return const Offstage(); if (_isThreadConversation) return const Offstage();
// return const SizedBox(height: 52); return const SizedBox(height: 52);
// } }
// return const SizedBox(height: 8); return const SizedBox(height: 8);
// } }
// if (i == 0) { if (i == 0) {
// if (widget.footerBuilder == null) { if (widget.footerBuilder == null) {
// return const SizedBox(height: 30); return const SizedBox(height: 30);
// } }
// return const SizedBox(height: 8); return const SizedBox(height: 8);
// } }
// if (i == 1 || i == itemCount - 4) return const Offstage(); if (i == 1 || i == itemCount - 4) return const Offstage();
// late final Message message, nextMessage; late final Message message, nextMessage;
// if (widget.reverse) { if (widget.reverse) {
// message = messages[i - 1]; message = messages[i - 1];
// nextMessage = messages[i - 2]; nextMessage = messages[i - 2];
// } else { } else {
// message = messages[i - 2]; message = messages[i - 2];
// nextMessage = messages[i - 1]; nextMessage = messages[i - 1];
// } }
// if (!Jiffy(message.createdAt.toLocal()).isSame( if (!Jiffy(message.createdAt.toLocal()).isSame(
// nextMessage.createdAt.toLocal(), nextMessage.createdAt.toLocal(),
// Units.DAY, Units.DAY,
// )) { )) {
// final divider = widget.dateDividerBuilder != null final divider = widget.dateDividerBuilder != null
// ? widget.dateDividerBuilder!( ? widget.dateDividerBuilder!(
// nextMessage.createdAt.toLocal(), nextMessage.createdAt.toLocal(),
// ) )
// : DateDivider( : DateDivider(
// dateTime: nextMessage.createdAt.toLocal(), dateTime: nextMessage.createdAt.toLocal(),
// ); );
// return Padding( return Padding(
// padding: const EdgeInsets.symmetric(vertical: 12), padding: const EdgeInsets.symmetric(vertical: 12),
// child: divider, child: divider,
// ); );
// } }
// final timeDiff = final timeDiff =
// Jiffy(nextMessage.createdAt.toLocal()).diff( Jiffy(nextMessage.createdAt.toLocal()).diff(
// message.createdAt.toLocal(), message.createdAt.toLocal(),
// Units.MINUTE, Units.MINUTE,
// ); );
// final isNextUserSame = final isNextUserSame =
// message.user!.id == nextMessage.user?.id; message.user!.id == nextMessage.user?.id;
// final isThread = message.replyCount! > 0; final isThread = message.replyCount! > 0;
// final isDeleted = message.isDeleted; final isDeleted = message.isDeleted;
// if (timeDiff >= 1 || if (timeDiff >= 1 ||
// !isNextUserSame || !isNextUserSame ||
// isThread || isThread ||
// isDeleted) { isDeleted) {
// return const SizedBox(height: 8); return const SizedBox(height: 8);
// } }
// return const SizedBox(height: 2); return const SizedBox(height: 2);
// }, },
itemBuilder: (context, i) { itemBuilder: (context, i) {
// final myMessage = messages[i];
// return buildMessage(myMessage, messages, i, i);
if (i == itemCount - 1) { if (i == itemCount - 1) {
if (widget.parentMessage == null) { if (widget.parentMessage == null) {
return const Offstage(); return const Offstage();
@@ -604,7 +602,7 @@ class _MessageListViewState extends State<MessageListView> {
i - 2, i - 2,
); );
} else { } else {
messageWidget = buildMessage(message, messages, i - 2, i); messageWidget = buildMessage(message, messages, i - 2);
} }
return messageWidget; return messageWidget;
}, },
@@ -830,7 +828,7 @@ class _MessageListViewState extends State<MessageListView> {
final messageWidget = buildMessage(message, messages, index); final messageWidget = buildMessage(message, messages, index);
return VisibilityDetector( return VisibilityDetector(
key: ValueKey<String>('BOTTOM-MESSAGE-${message.id}'), key: ValueKey<String>(message.id),
onVisibilityChanged: (visibility) { onVisibilityChanged: (visibility) {
final isVisible = visibility.visibleBounds != Rect.zero; final isVisible = visibility.visibleBounds != Rect.zero;
if (isVisible) { if (isVisible) {
@@ -922,8 +920,7 @@ class _MessageListViewState extends State<MessageListView> {
return defaultMessageWidget; return defaultMessageWidget;
} }
Widget buildMessage(Message message, List<Message> messages, int index, Widget buildMessage(Message message, List<Message> messages, int index) {
[int? actualIndex]) {
if ((message.type == 'system' || message.type == 'error') && if ((message.type == 'system' || message.type == 'error') &&
message.text?.isNotEmpty == true) { message.text?.isNotEmpty == true) {
return widget.systemMessageBuilder?.call(context, message) ?? return widget.systemMessageBuilder?.call(context, message) ??
@@ -1009,7 +1006,6 @@ class _MessageListViewState extends State<MessageListView> {
Widget messageWidget = MessageWidget( Widget messageWidget = MessageWidget(
key: ValueKey<String>(message.id), key: ValueKey<String>(message.id),
actualIndex: actualIndex,
message: message, message: message,
reverse: isMyMessage, reverse: isMyMessage,
showReactions: !message.isDeleted, showReactions: !message.isDeleted,
packages/stream_chat_flutter/lib/src/message_widget.dart
-7
View File
@@ -74,7 +74,6 @@ class MessageWidget extends StatefulWidget {
this.showInChannelIndicator = false, this.showInChannelIndicator = false,
this.onReplyTap, this.onReplyTap,
this.onThreadTap, this.onThreadTap,
this.actualIndex,
this.showUsername = true, this.showUsername = true,
this.showTimestamp = true, this.showTimestamp = true,
this.showReactions = true, this.showReactions = true,
@@ -258,8 +257,6 @@ class MessageWidget extends StatefulWidget {
}..addAll(customAttachmentBuilders ?? {}), }..addAll(customAttachmentBuilders ?? {}),
super(key: key); super(key: key);
final int? actualIndex;
/// Function called on mention tap /// Function called on mention tap
final void Function(User)? onMentionTap; final void Function(User)? onMentionTap;
@@ -593,10 +590,6 @@ class _MessageWidgetState extends State<MessageWidget>
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
super.build(context); super.build(context);
return Container(
decoration: BoxDecoration(border: Border.all()),
child: Text('${widget.message.text ?? 'valu'} ${widget.actualIndex}'),
);
final avatarWidth = final avatarWidth =
widget.messageTheme.avatarTheme?.constraints.maxWidth ?? 40; widget.messageTheme.avatarTheme?.constraints.maxWidth ?? 40;
final bottomRowPadding = final bottomRowPadding =