feat: Converted message_list_view.dart

This commit is contained in:
Deven Joshi
2021-01-25 20:59:50 +05:30
parent 5594a9a116
commit a79f551332
2 changed files with 268 additions and 292 deletions
@@ -236,309 +236,288 @@ class _MessageListViewState extends State<MessageListView> {
bool _inBetweenList = false; bool _inBetweenList = false;
MessageListController _messageListController = MessageListController();
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final messagesStream = _isThreadConversation return MessageListCore(
? streamChannel.channel.state.threadsStream loadingBuilder: (context) {
.where((threads) => threads.containsKey(widget.parentMessage.id)) return Center(
.map((threads) => threads[widget.parentMessage.id]) child: const CircularProgressIndicator(),
: streamChannel.channel.state?.messagesStream; );
},
emptyBuilder: (context) {
return Center(
child: Text(
'No chats here yet...',
style: StreamChatTheme.of(context).textTheme.footnote.copyWith(
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5)),
),
);
},
messageListBuilder: (context, list) {
return _buildListView(list);
},
messageListController: _messageListController,
parentMessage: widget.parentMessage,
showScrollToBottom: widget.showScrollToBottom,
);
}
return StreamBuilder<List<Message>>( Widget _buildListView(List<Message> data) {
stream: messagesStream?.map((messages) => messages messages = data;
?.where((e) => final newMessagesListLength = messages.length;
(!e.isDeleted && e.shadowed != true) ||
(e.isDeleted && if (_messageListLength != null) {
e.user.id == streamChannel.channel.client.state.user.id)) if (_bottomPaginationActive || (_inBetweenList && _upToDate)) {
?.toList()), if (_itemPositionListener.itemPositions.value?.isNotEmpty == true) {
builder: (context, snapshot) { final first = _itemPositionListener.itemPositions.value.first;
if (!snapshot.hasData) { final diff = newMessagesListLength - _messageListLength;
return Center( if (diff > 0) {
child: const CircularProgressIndicator(), initialIndex = first.index + diff;
); initialAlignment = first.itemLeadingEdge;
} }
}
} else if (!_topPaginationActive && _upToDate) {
// Reset the index in-case we send any new message
initialIndex = 0;
initialAlignment = 0;
}
}
final messageList = snapshot.data?.reversed?.toList() ?? []; _messageListLength = newMessagesListLength;
if (messageList.isEmpty) { final _client = StreamChat.of(context).client;
if (_upToDate) {
return Center( return Stack(
child: Text( alignment: Alignment.center,
'No chats here yet...', children: [
style: StreamChatTheme.of(context) ValueListenableBuilder<ConnectionStatus>(
.textTheme valueListenable: _client.wsConnectionStatus,
.footnote builder: (context, status, _) {
.copyWith( String statusString = '';
color: StreamChatTheme.of(context) bool showStatus = true;
.colorTheme
.black switch (status) {
.withOpacity(.5)), case ConnectionStatus.connected:
statusString = 'Connected';
showStatus = false;
break;
case ConnectionStatus.connecting:
statusString = 'Reconnecting...';
break;
case ConnectionStatus.disconnected:
statusString = 'Disconnected';
break;
}
return InfoTile(
showMessage:
widget.showConnectionStateTile ? showStatus : false,
tileAnchor: Alignment.topCenter,
childAnchor: Alignment.topCenter,
message: statusString,
child: LazyLoadScrollView(
onStartOfPage: () async {
_inBetweenList = false;
if (!_upToDate) {
_topPaginationActive = false;
_bottomPaginationActive = true;
return _paginateData(
streamChannel,
QueryDirection.bottom,
);
}
},
onEndOfPage: () async {
_inBetweenList = false;
_topPaginationActive = true;
_bottomPaginationActive = false;
return _paginateData(
streamChannel,
QueryDirection.top,
);
},
onInBetweenOfPage: () {
_inBetweenList = true;
},
child: ScrollablePositionedList.separated(
key: ValueKey(initialIndex + initialAlignment),
itemPositionsListener: _itemPositionListener,
addAutomaticKeepAlives: true,
initialScrollIndex: initialIndex ?? 0,
initialAlignment: initialAlignment ?? 0,
physics: widget.scrollPhysics,
itemScrollController: _scrollController,
reverse: true,
itemCount:
messages.length + 2 + (_isThreadConversation ? 1 : 0),
separatorBuilder: (context, i) {
if (i == messages.length) return Offstage();
if (i == 0) return SizedBox(height: 30);
if (i == messages.length + 1) {
final replyCount = widget.parentMessage.replyCount;
return Container(
decoration: BoxDecoration(
gradient: StreamChatTheme.of(context)
.colorTheme
.bgGradient,
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'$replyCount ${replyCount == 1 ? 'Reply' : 'Replies'}',
textAlign: TextAlign.center,
style: StreamChatTheme.of(context)
.channelTheme
.channelHeaderTheme
.lastMessageAt,
),
),
);
}
final message = messages[i];
final nextMessage = messages[i - 1];
if (!Jiffy(message.createdAt.toLocal()).isSame(
nextMessage.createdAt.toLocal(),
Units.DAY,
)) {
final divider = widget.dateDividerBuilder != null
? widget.dateDividerBuilder(
nextMessage.createdAt.toLocal(),
)
: DateDivider(
dateTime: nextMessage.createdAt.toLocal(),
);
return Padding(
padding: const EdgeInsets.symmetric(vertical: 12.0),
child: divider,
);
}
final timeDiff =
Jiffy(nextMessage.createdAt.toLocal()).diff(
message.createdAt.toLocal(),
Units.MINUTE,
);
final isNextUserSame =
message.user.id == nextMessage.user?.id;
final isThread = message.replyCount > 0;
final isDeleted = message.isDeleted;
if (timeDiff >= 1 ||
!isNextUserSame ||
isThread ||
isDeleted) {
return SizedBox(height: 8);
}
return SizedBox(height: 2);
},
itemBuilder: (context, i) {
if (i == messages.length + 2) {
if (widget.parentMessageBuilder != null) {
return widget.parentMessageBuilder(
context,
widget.parentMessage,
);
} else {
return buildParentMessage(widget.parentMessage);
}
}
if (i == messages.length + 1) {
return _buildLoadingIndicator(
streamChannel,
QueryDirection.top,
);
}
if (i == 0) {
return _buildLoadingIndicator(
streamChannel,
QueryDirection.bottom,
);
}
final message = messages[i - 1];
Widget messageWidget;
if (i == 1) {
messageWidget = _buildBottomMessage(
context,
message,
messages,
streamChannel,
);
} else if (i == messages.length - 1) {
messageWidget = _buildTopMessage(
context,
message,
messages,
streamChannel,
);
} else {
if (widget.messageBuilder != null) {
messageWidget = Builder(
key: ValueKey<String>('MESSAGE-${message.id}'),
builder: (context) => widget.messageBuilder(
context,
MessageDetails(
context,
message,
messages,
i,
),
messages),
);
} else {
messageWidget = buildMessage(message, messages, i);
}
}
return messageWidget;
},
),
), ),
); );
} }),
} else { if (widget.showScrollToBottom) _buildScrollToBottom(),
messages = messageList; Positioned(
} top: 20.0,
child: ValueListenableBuilder<Iterable<ItemPosition>>(
final newMessagesListLength = messages.length; valueListenable: _itemPositionListener.itemPositions,
builder: (context, values, _) {
if (_messageListLength != null) { final items = _itemPositionListener.itemPositions?.value;
if (_bottomPaginationActive || (_inBetweenList && _upToDate)) { if (items.isEmpty || messages.isEmpty) {
if (_itemPositionListener.itemPositions.value?.isNotEmpty == return SizedBox();
true) {
final first = _itemPositionListener.itemPositions.value.first;
final diff = newMessagesListLength - _messageListLength;
if (diff > 0) {
initialIndex = first.index + diff;
initialAlignment = first.itemLeadingEdge;
}
} }
} else if (!_topPaginationActive && _upToDate) {
// Reset the index in-case we send any new message
initialIndex = 0;
initialAlignment = 0;
}
}
_messageListLength = newMessagesListLength; var index = _getTopElement(values).index;
final _client = StreamChat.of(context).client;
return Stack( if (index > messages.length) {
alignment: Alignment.center, return SizedBox();
children: [ }
ValueListenableBuilder<ConnectionStatus>(
valueListenable: _client.wsConnectionStatus,
builder: (context, status, _) {
String statusString = '';
bool showStatus = true;
switch (status) { if (index == messages.length) {
case ConnectionStatus.connected: index = max(index - 1, 0);
statusString = 'Connected'; }
showStatus = false;
break;
case ConnectionStatus.connecting:
statusString = 'Reconnecting...';
break;
case ConnectionStatus.disconnected:
statusString = 'Disconnected';
break;
}
return InfoTile( return widget.dateDividerBuilder != null
showMessage: ? widget.dateDividerBuilder(
widget.showConnectionStateTile ? showStatus : false, messages[index].createdAt.toLocal(),
tileAnchor: Alignment.topCenter, )
childAnchor: Alignment.topCenter, : DateDivider(
message: statusString, dateTime: messages[index].createdAt.toLocal(),
child: LazyLoadScrollView(
onStartOfPage: () async {
_inBetweenList = false;
if (!_upToDate) {
_topPaginationActive = false;
_bottomPaginationActive = true;
return _paginateData(
streamChannel,
QueryDirection.bottom,
);
}
},
onEndOfPage: () async {
_inBetweenList = false;
_topPaginationActive = true;
_bottomPaginationActive = false;
return _paginateData(
streamChannel,
QueryDirection.top,
);
},
onInBetweenOfPage: () {
_inBetweenList = true;
},
child: ScrollablePositionedList.separated(
key: ValueKey(initialIndex + initialAlignment),
itemPositionsListener: _itemPositionListener,
addAutomaticKeepAlives: true,
initialScrollIndex: initialIndex ?? 0,
initialAlignment: initialAlignment ?? 0,
physics: widget.scrollPhysics,
itemScrollController: _scrollController,
reverse: true,
itemCount: messages.length +
2 +
(_isThreadConversation ? 1 : 0),
separatorBuilder: (context, i) {
if (i == messages.length) return Offstage();
if (i == 0) return SizedBox(height: 30);
if (i == messages.length + 1) {
final replyCount =
widget.parentMessage.replyCount;
return Container(
decoration: BoxDecoration(
gradient: StreamChatTheme.of(context)
.colorTheme
.bgGradient,
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'$replyCount ${replyCount == 1 ? 'Reply' : 'Replies'}',
textAlign: TextAlign.center,
style: StreamChatTheme.of(context)
.channelTheme
.channelHeaderTheme
.lastMessageAt,
),
),
);
}
final message = messages[i];
final nextMessage = messages[i - 1];
if (!Jiffy(message.createdAt.toLocal()).isSame(
nextMessage.createdAt.toLocal(),
Units.DAY,
)) {
final divider = widget.dateDividerBuilder != null
? widget.dateDividerBuilder(
nextMessage.createdAt.toLocal(),
)
: DateDivider(
dateTime: nextMessage.createdAt.toLocal(),
);
return Padding(
padding:
const EdgeInsets.symmetric(vertical: 12.0),
child: divider,
);
}
final timeDiff =
Jiffy(nextMessage.createdAt.toLocal()).diff(
message.createdAt.toLocal(),
Units.MINUTE,
);
final isNextUserSame =
message.user.id == nextMessage.user?.id;
final isThread = message.replyCount > 0;
final isDeleted = message.isDeleted;
if (timeDiff >= 1 ||
!isNextUserSame ||
isThread ||
isDeleted) {
return SizedBox(height: 8);
}
return SizedBox(height: 2);
},
itemBuilder: (context, i) {
if (i == messages.length + 2) {
if (widget.parentMessageBuilder != null) {
return widget.parentMessageBuilder(
context,
widget.parentMessage,
);
} else {
return buildParentMessage(widget.parentMessage);
}
}
if (i == messages.length + 1) {
return _buildLoadingIndicator(
streamChannel,
QueryDirection.top,
);
}
if (i == 0) {
return _buildLoadingIndicator(
streamChannel,
QueryDirection.bottom,
);
}
final message = messages[i - 1];
Widget messageWidget;
if (i == 1) {
messageWidget = _buildBottomMessage(
context,
message,
messages,
streamChannel,
);
} else if (i == messages.length - 1) {
messageWidget = _buildTopMessage(
context,
message,
messages,
streamChannel,
);
} else {
if (widget.messageBuilder != null) {
messageWidget = Builder(
key:
ValueKey<String>('MESSAGE-${message.id}'),
builder: (context) => widget.messageBuilder(
context,
MessageDetails(
context,
message,
messages,
i,
),
messages),
);
} else {
messageWidget =
buildMessage(message, messages, i);
}
}
return messageWidget;
},
),
),
); );
}), },
if (widget.showScrollToBottom) _buildScrollToBottom(), ),
Positioned( ),
top: 20.0, ],
child: ValueListenableBuilder<Iterable<ItemPosition>>( );
valueListenable: _itemPositionListener.itemPositions,
builder: (context, values, _) {
final items = _itemPositionListener.itemPositions?.value;
if (items.isEmpty || messages.isEmpty) {
return SizedBox();
}
var index = _getTopElement(values).index;
if (index > messages.length) {
return SizedBox();
}
if (index == messages.length) {
index = max(index - 1, 0);
}
return widget.dateDividerBuilder != null
? widget.dateDividerBuilder(
messages[index].createdAt.toLocal(),
)
: DateDivider(
dateTime: messages[index].createdAt.toLocal(),
);
},
),
),
],
);
});
} }
Future<void> _paginateData( Future<void> _paginateData(
StreamChannelState channel, QueryDirection direction) { StreamChannelState channel, QueryDirection direction) {
if (!_isThreadConversation) { return _messageListController.paginateData(direction: direction);
return channel.queryMessages(direction: direction);
} else {
return channel.getReplies(widget.parentMessage.id);
}
} }
ItemPosition _getTopElement(Iterable<ItemPosition> values) { ItemPosition _getTopElement(Iterable<ItemPosition> values) {
@@ -51,7 +51,6 @@ class MessageListCore extends StatefulWidget {
Key key, Key key,
this.showScrollToBottom = true, this.showScrollToBottom = true,
this.parentMessage, this.parentMessage,
this.dateDividerBuilder,
@required this.loadingBuilder, @required this.loadingBuilder,
@required this.emptyBuilder, @required this.emptyBuilder,
@required this.messageListBuilder, @required this.messageListBuilder,
@@ -74,9 +73,6 @@ class MessageListCore extends StatefulWidget {
/// Parent message in case of a thread /// Parent message in case of a thread
final Message parentMessage; final Message parentMessage;
/// Builder used to render date dividers
final Widget Function(DateTime) dateDividerBuilder;
@override @override
_MessageListCoreState createState() => _MessageListCoreState(); _MessageListCoreState createState() => _MessageListCoreState();
} }
@@ -128,7 +124,8 @@ class _MessageListCoreState extends State<MessageListCore> {
}); });
} }
Future<void> paginateData(QueryDirection direction) { Future<void> paginateData(
{QueryDirection direction = QueryDirection.bottom}) {
if (!_isThreadConversation) { if (!_isThreadConversation) {
return streamChannel.queryMessages(direction: direction); return streamChannel.queryMessages(direction: direction);
} else { } else {
@@ -162,5 +159,5 @@ class _MessageListCoreState extends State<MessageListCore> {
/// Controller used for paginating data in [ChannelListView] /// Controller used for paginating data in [ChannelListView]
class MessageListController { class MessageListController {
Function(QueryDirection direction) paginateData; Function({QueryDirection direction}) paginateData;
} }