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

use scrollable_positioned_list

Browse Source
This commit is contained in:
Salvatore Giordano
2020-11-05 09:50:08 +01:00
parent abd822634c
commit e27b45e4f8
2 changed files with 194 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/src/message_list_view.dart
+193 -207
View File
@@ -1,12 +1,13 @@
import 'dart:async'; import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:jiffy/jiffy.dart'; import 'package:jiffy/jiffy.dart';
import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
import 'package:stream_chat/stream_chat.dart'; import 'package:stream_chat/stream_chat.dart';
import 'package:stream_chat_flutter/src/message_widget.dart'; import 'package:stream_chat_flutter/src/message_widget.dart';
import 'package:stream_chat_flutter/src/system_message.dart'; import 'package:stream_chat_flutter/src/system_message.dart';
import 'package:visibility_detector/visibility_detector.dart'; import 'package:visibility_detector/visibility_detector.dart';
import 'package:widgets_visibility_provider/widgets_visibility_provider.dart';
import '../stream_chat_flutter.dart'; import '../stream_chat_flutter.dart';
import 'date_divider.dart'; import 'date_divider.dart';
@@ -106,7 +107,10 @@ class MessageListView extends StatefulWidget {
this.onThreadTap, this.onThreadTap,
this.dateDividerBuilder, this.dateDividerBuilder,
this.scrollPhysics = const AlwaysScrollableScrollPhysics(), this.scrollPhysics = const AlwaysScrollableScrollPhysics(),
this.keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual, this.initialScrollIndex,
this.initialAlignment,
this.scrollController,
this.itemPositionListener,
}) : super(key: key); }) : super(key: key);
/// Function used to build a custom message widget /// Function used to build a custom message widget
@@ -131,95 +135,101 @@ class MessageListView extends StatefulWidget {
/// Builder used to render date dividers /// Builder used to render date dividers
final Widget Function(DateTime) dateDividerBuilder; final Widget Function(DateTime) dateDividerBuilder;
/// Index of an item to initially align within the viewport.
final int initialScrollIndex;
/// Determines where the leading edge of the item at [initialScrollIndex]
/// should be placed.
final double initialAlignment;
/// Controller for jumping or scrolling to an item.
final ItemScrollController scrollController;
/// Provides a listenable iterable of [itemPositions] of items that are on
/// screen and their locations.
final ItemPositionsListener itemPositionListener;
/// The ScrollPhysics used by the ListView /// The ScrollPhysics used by the ListView
final ScrollPhysics scrollPhysics; final ScrollPhysics scrollPhysics;
/// The [ScrollViewKeyboardDismissBehavior] used by the ListView
final ScrollViewKeyboardDismissBehavior keyboardDismissBehavior;
@override @override
_MessageListViewState createState() => _MessageListViewState(); _MessageListViewState createState() => _MessageListViewState();
} }
class _MessageListViewState extends State<MessageListView> { class _MessageListViewState extends State<MessageListView> {
static const _newMessageLoadingOffset = 100; ItemScrollController _scrollController;
final ScrollController _scrollController = ScrollController(); bool _bottomWasVisible = false;
bool _bottomWasVisible = true;
bool _topWasVisible = false; bool _topWasVisible = false;
List<Message> _messages = [];
List<Message> _newMessageList = [];
Function _onThreadTap; Function _onThreadTap;
bool _showScrollToBottom = false; bool _showScrollToBottom = false;
ItemPositionsListener _itemPositionListener;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final streamChannel = StreamChannel.of(context); final streamChannel = StreamChannel.of(context);
/// TODO: find a better solution when (https://github.com/flutter/flutter/issues/21023) is fixed final messagesStream = widget.parentMessage != null
return WidgetsVisibilityProvider( ? streamChannel.channel.state.threadsStream
condition: (positionData) => .where((threads) => threads.containsKey(widget.parentMessage.id))
positionData.endPosition >= 20 && .map((threads) => threads[widget.parentMessage.id])
positionData.startPosition <= positionData.viewportSize, : streamChannel.channel.state.messagesStream;
child: Stack(
alignment: Alignment.center, return StreamBuilder<List<Message>>(
children: [ stream: messagesStream,
NotificationListener<ScrollNotification>( initialData: widget.parentMessage != null
onNotification: (_) { ? streamChannel.channel.state.threads[widget.parentMessage.id]
if (_scrollController.offset < 150 && : streamChannel.channel.state.messages,
_newMessageList.isNotEmpty) { builder: (context, snapshot) {
setState(() { final messages = snapshot.data?.reversed?.toList() ?? [];
_messages.insertAll(0, _newMessageList); return Stack(
_newMessageList.clear(); alignment: Alignment.center,
}); children: [
} ScrollablePositionedList.builder(
return true; itemPositionsListener: _itemPositionListener,
}, addAutomaticKeepAlives: true,
child: ListView.custom( key: Key('messageListView'),
key: Key('messageListView'), initialScrollIndex: widget.initialScrollIndex,
physics: widget.scrollPhysics, initialAlignment: widget.initialAlignment,
keyboardDismissBehavior: widget.keyboardDismissBehavior, physics: widget.scrollPhysics,
controller: _scrollController, itemScrollController: _scrollController,
reverse: true, reverse: true,
childrenDelegate: SliverChildBuilderDelegate( itemCount: messages.length +
(context, i) { 1 +
if (i == _messages.length + 1) { (widget.parentMessage != null ? 1 : 0),
if (widget.parentMessage != null) { itemBuilder: (context, i) {
if (widget.parentMessageBuilder != null) { if (i == messages.length + 1) {
return widget.parentMessageBuilder( if (widget.parentMessageBuilder != null) {
context, return widget.parentMessageBuilder(
widget.parentMessage, context,
); widget.parentMessage,
} else { );
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
buildParentMessage(widget.parentMessage),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 32),
child: Container(
padding: const EdgeInsets.all(8),
child: Text(
'Start of thread',
textAlign: TextAlign.center,
),
color:
Theme.of(context).accentColor.withAlpha(50),
),
),
],
);
}
} else { } else {
return SizedBox(); return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
buildParentMessage(widget.parentMessage),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 32),
child: Container(
padding: const EdgeInsets.all(8),
child: Text(
'Start of thread',
textAlign: TextAlign.center,
),
color:
Theme.of(context).accentColor.withAlpha(50),
),
),
],
);
} }
} }
if (i == _messages.length) { if (i == messages.length) {
return _buildLoadingIndicator(streamChannel); return _buildLoadingIndicator(streamChannel);
} }
final message = _messages[i]; final message = messages[i];
final nextMessage = i > 0 ? _messages[i - 1] : null; final nextMessage = i > 0 ? messages[i - 1] : null;
Widget messageWidget; Widget messageWidget;
@@ -227,14 +237,14 @@ class _MessageListViewState extends State<MessageListView> {
messageWidget = _buildBottomMessage( messageWidget = _buildBottomMessage(
context, context,
message, message,
_messages, messages,
streamChannel, streamChannel,
); );
} else if (i == _messages.length - 1) { } else if (i == messages.length - 1) {
messageWidget = _buildTopMessage( messageWidget = _buildTopMessage(
context, context,
message, message,
_messages, messages,
streamChannel, streamChannel,
); );
} else { } else {
@@ -246,13 +256,13 @@ class _MessageListViewState extends State<MessageListView> {
MessageDetails( MessageDetails(
context, context,
message, message,
_messages, messages,
i, i,
), ),
_messages), messages),
); );
} else { } else {
messageWidget = buildMessage(message, _messages, i); messageWidget = buildMessage(message, messages, i);
} }
} }
@@ -265,84 +275,74 @@ class _MessageListViewState extends State<MessageListView> {
messageWidget, messageWidget,
Padding( Padding(
padding: const EdgeInsets.symmetric(vertical: 12.0), padding: const EdgeInsets.symmetric(vertical: 12.0),
child: VisibleNotifierWidget( child: widget.dateDividerBuilder != null
condition: ( ? widget.dateDividerBuilder(
ScrollNotification previousNotification, nextMessage.createdAt.toLocal())
PositionData previousPositionData, : DateDivider(
ScrollNotification currentNotification, dateTime: nextMessage.createdAt.toLocal(),
PositionData currentPositionData, ),
) {
print(
'currentPositionData.endPosition: ${currentPositionData.endPosition}');
return true;
},
data: i,
child: widget.dateDividerBuilder != null
? widget.dateDividerBuilder(
nextMessage.createdAt.toLocal())
: DateDivider(
dateTime: nextMessage.createdAt.toLocal(),
),
),
), ),
], ],
); );
} }
return VisibleNotifierWidget( return messageWidget;
child: messageWidget,
data: i,
);
},
childCount: _messages.length + 2,
findChildIndexCallback: (key) {
final ValueKey<String> valueKey = key;
final index = _messages
.indexWhere((m) => 'MESSAGE-${m.id}' == valueKey.value);
return index != -1 ? index : null;
}, },
), ),
), if (widget.showScrollToBottom)
), StreamBuilder<int>(
if (widget.showScrollToBottom) stream: streamChannel.channel.state.unreadCountStream,
StreamBuilder<Event>( builder: (context, snapshot) {
stream: streamChannel.channel.on( if (!_showScrollToBottom ||
EventType.messageNew, !snapshot.hasData ||
), snapshot.data == 0) {
builder: (context, _) { return SizedBox();
if (!_showScrollToBottom || }
streamChannel.channel.state.unreadCount == 0) { return _buildScrollToBottom(snapshot.data);
return SizedBox(); }),
} Positioned(
return _buildScrollToBottom(streamChannel); top: 20.0,
}), child: ValueListenableBuilder<Iterable<ItemPosition>>(
Positioned( valueListenable: _itemPositionListener.itemPositions,
top: 20.0, builder: (context, values, _) {
child: WidgetsVisibilityConsumer( final items = _itemPositionListener.itemPositions?.value;
listener: ( if (items.isEmpty) {
context, return SizedBox();
event, }
) {},
builder: (context, event) {
if (event.positionDataList == null ||
event.positionDataList.isEmpty) {
return Container();
}
return DateDivider( var index = _getTopElement(values).index;
dateTime: _messages[event.positionDataList.last.data]
.createdAt if (index > messages.length) {
.toLocal(), 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(),
);
},
),
),
],
);
});
} }
Widget _buildScrollToBottom(StreamChannelState streamChannel) { ItemPosition _getTopElement(Iterable<ItemPosition> values) {
return values
.where((ItemPosition position) => position.itemLeadingEdge < 0.9)
.reduce((ItemPosition max, ItemPosition position) =>
position.itemLeadingEdge > max.itemLeadingEdge ? position : max);
}
Widget _buildScrollToBottom(int unreadCount) {
return Positioned( return Positioned(
bottom: 8, bottom: 8,
right: 8, right: 8,
@@ -358,13 +358,11 @@ class _MessageListViewState extends State<MessageListView> {
color: Colors.black, color: Colors.black,
), ),
onPressed: () { onPressed: () {
Future.delayed(Duration(milliseconds: 500), () { setState(() {
setState(() { _showScrollToBottom = false;
_showScrollToBottom = false;
});
}); });
_scrollController.animateTo( _scrollController.scrollTo(
0, index: 0,
duration: Duration(seconds: 1), duration: Duration(seconds: 1),
curve: Curves.easeInOut, curve: Curves.easeInOut,
); );
@@ -377,7 +375,7 @@ class _MessageListViewState extends State<MessageListView> {
top: -10, top: -10,
child: CircleAvatar( child: CircleAvatar(
radius: 20, radius: 20,
child: Text(streamChannel.channel.state.unreadCount.toString()), child: Text(unreadCount.toString()),
), ),
), ),
], ],
@@ -387,7 +385,9 @@ class _MessageListViewState extends State<MessageListView> {
Container _buildLoadingIndicator(StreamChannelState streamChannel) { Container _buildLoadingIndicator(StreamChannelState streamChannel) {
return Container( return Container(
key: Key('LOADING-INDICATOR'),
height: 50, height: 50,
width: double.infinity,
child: StreamBuilder<bool>( child: StreamBuilder<bool>(
stream: streamChannel.queryMessage, stream: streamChannel.queryMessage,
initialData: false, initialData: false,
@@ -401,7 +401,7 @@ class _MessageListViewState extends State<MessageListView> {
); );
} }
if (!snapshot.data) { if (!snapshot.data) {
return Container(); return SizedBox();
} }
return Center( return Center(
child: Padding( child: Padding(
@@ -428,14 +428,14 @@ class _MessageListViewState extends State<MessageListView> {
MessageDetails( MessageDetails(
context, context,
message, message,
_messages, messages,
_messages.length - 1, messages.length - 1,
), ),
_messages, messages,
), ),
); );
} else { } else {
messageWidget = buildMessage(message, messages, _messages.length - 1); messageWidget = buildMessage(message, messages, messages.length - 1);
} }
return VisibilityDetector( return VisibilityDetector(
@@ -470,10 +470,10 @@ class _MessageListViewState extends State<MessageListView> {
MessageDetails( MessageDetails(
context, context,
message, message,
_messages, messages,
0, 0,
), ),
_messages, messages,
), ),
); );
} else { } else {
@@ -492,9 +492,11 @@ class _MessageListViewState extends State<MessageListView> {
} }
} }
_bottomWasVisible = isVisible; _bottomWasVisible = isVisible;
setState(() { if (mounted) {
_showScrollToBottom = !isVisible; setState(() {
}); _showScrollToBottom = !isVisible;
});
}
}, },
child: messageWidget, child: messageWidget,
); );
@@ -541,6 +543,7 @@ class _MessageListViewState extends State<MessageListView> {
) { ) {
if (message.type == 'system' && message.text?.isNotEmpty == true) { if (message.type == 'system' && message.text?.isNotEmpty == true) {
return SystemMessage( return SystemMessage(
key: ValueKey<String>('MESSAGE-${message.id}'),
message: message, message: message,
); );
} }
@@ -563,6 +566,7 @@ class _MessageListViewState extends State<MessageListView> {
final allRead = readList.length >= (channel.memberCount ?? 0) - 1; final allRead = readList.length >= (channel.memberCount ?? 0) - 1;
return MessageWidget( return MessageWidget(
key: ValueKey<String>('MESSAGE-${message.id}'),
message: message, message: message,
reverse: isMyMessage, reverse: isMyMessage,
showReactions: !message.isDeleted, showReactions: !message.isDeleted,
@@ -600,63 +604,45 @@ class _MessageListViewState extends State<MessageListView> {
); );
} }
StreamSubscription _streamListener; StreamSubscription _messageNewListener;
@override @override
void initState() { void initState() {
super.initState(); super.initState();
_scrollController = widget.scrollController ?? ItemScrollController();
_itemPositionListener =
widget.itemPositionListener ?? ItemPositionsListener.create();
final streamChannel = StreamChannel.of(context); final streamChannel = StreamChannel.of(context);
Stream<List<Message>> stream; _messageNewListener =
streamChannel.channel.on(EventType.messageNew).listen((event) {
if (widget.parentMessage == null) { final firstElementInViewport =
stream = streamChannel.channel.state.messagesStream; _itemPositionListener.itemPositions.value.first;
} else { if (event.message.user.id == streamChannel.channel.client.state.user.id) {
streamChannel.getReplies(widget.parentMessage.id); WidgetsBinding.instance.addPostFrameCallback((_) {
stream = streamChannel.channel.state.threadsStream _scrollController.jumpTo(
.where((threads) => threads.containsKey(widget.parentMessage.id)) index: 0,
.map((threads) => threads[widget.parentMessage.id]); );
}
_streamListener = stream
.map((messages) =>
messages
?.where((m) =>
!(m.status == MessageSendingStatus.FAILED && m.isDeleted))
?.toList() ??
[])
.listen((newMessages) {
newMessages = newMessages.reversed.toList();
if (_messages.isEmpty ||
newMessages.isEmpty ||
newMessages.first.id != _messages.first.id) {
if (!_scrollController.hasClients ||
_scrollController.offset < _newMessageLoadingOffset) {
if (streamChannel.channel.state.unreadCount > 0) {
streamChannel.channel.markRead();
}
setState(() {
_messages = newMessages;
});
} else if (newMessages.first.user.id ==
streamChannel.channel.client.state.user.id) {
_scrollController.jumpTo(0);
WidgetsBinding.instance.addPostFrameCallback((_) {
setState(() {
_messages = newMessages;
});
});
} else {
_newMessageList = newMessages;
}
} else {
setState(() {
_messages = newMessages;
}); });
} else {
if (firstElementInViewport.index != 0) {
_scrollController.jumpTo(
index: firstElementInViewport.index + 1,
alignment: firstElementInViewport.itemLeadingEdge,
);
}
}
if (firstElementInViewport.index == 0) {
streamChannel.channel.markRead();
} }
}); });
if (widget.parentMessage != null) {
streamChannel.getReplies(widget.parentMessage.id);
}
_getOnThreadTap(); _getOnThreadTap();
} }
@@ -696,7 +682,7 @@ class _MessageListViewState extends State<MessageListView> {
@override @override
void dispose() { void dispose() {
_streamListener.cancel(); _messageNewListener?.cancel();
super.dispose(); super.dispose();
} }
} }
pubspec.yaml
+1 -1
View File
@@ -14,6 +14,7 @@ dependencies:
flutter_app_badger: ^1.1.2 flutter_app_badger: ^1.1.2
photo_view: ^0.10.1 photo_view: ^0.10.1
rxdart: ^0.24.1 rxdart: ^0.24.1
scrollable_positioned_list: ^0.1.8
jiffy: ^3.0.1 jiffy: ^3.0.1
flutter_portal: ^0.3.0 flutter_portal: ^0.3.0
cached_network_image: ^2.2.0+1 cached_network_image: ^2.2.0+1
@@ -31,7 +32,6 @@ dependencies:
flutter_slidable: ^0.5.4 flutter_slidable: ^0.5.4
carousel_slider: ^2.2.1 carousel_slider: ^2.2.1
clipboard: ^0.1.2+8 clipboard: ^0.1.2+8
widgets_visibility_provider: ^2.0.2
flutter: flutter:
assets: assets: