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

feat: Added a way to disable info tiles and added info tile to message list view

Browse Source
This commit is contained in:
Deven Joshi
2021-01-12 21:13:38 +05:30
parent 0bb76bab39
commit fad38a513a
3 changed files with 201 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/src/channel_header.dart
+5 -2
View File
@@ -69,6 +69,8 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
/// If true the typing indicator will be rendered if a user is typing /// If true the typing indicator will be rendered if a user is typing
final bool showTypingIndicator; final bool showTypingIndicator;
final bool showConnectionStateTile;
/// Creates a channel header /// Creates a channel header
ChannelHeader({ ChannelHeader({
Key key, Key key,
@@ -77,6 +79,7 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
this.onTitleTap, this.onTitleTap,
this.showTypingIndicator = true, this.showTypingIndicator = true,
this.onImageTap, this.onImageTap,
this.showConnectionStateTile = false,
}) : preferredSize = Size.fromHeight(kToolbarHeight), }) : preferredSize = Size.fromHeight(kToolbarHeight),
super(key: key); super(key: key);
@@ -97,7 +100,7 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
showStatus = false; showStatus = false;
break; break;
case ConnectionStatus.connecting: case ConnectionStatus.connecting:
statusString = 'Connecting'; statusString = 'Reconnecting...';
break; break;
case ConnectionStatus.disconnected: case ConnectionStatus.disconnected:
statusString = 'Disconnected'; statusString = 'Disconnected';
@@ -105,7 +108,7 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
} }
return InfoTile( return InfoTile(
showMessage: showStatus, showMessage: showConnectionStateTile ? showStatus : false,
message: statusString, message: statusString,
child: AppBar( child: AppBar(
brightness: Theme.of(context).brightness, brightness: Theme.of(context).brightness,
lib/src/channel_list_header.dart
+5 -2
View File
@@ -54,6 +54,7 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
this.titleBuilder, this.titleBuilder,
this.onUserAvatarTap, this.onUserAvatarTap,
this.onNewChatButtonTap, this.onNewChatButtonTap,
this.showConnectionStateTile = false,
}) : super(key: key); }) : super(key: key);
/// Pass this if you don't have a [Client] in your widget tree. /// Pass this if you don't have a [Client] in your widget tree.
@@ -69,6 +70,8 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
/// Callback to call when pressing the new chat button. /// Callback to call when pressing the new chat button.
final VoidCallback onNewChatButtonTap; final VoidCallback onNewChatButtonTap;
final bool showConnectionStateTile;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final _client = client ?? StreamChat.of(context).client; final _client = client ?? StreamChat.of(context).client;
@@ -85,7 +88,7 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
showStatus = false; showStatus = false;
break; break;
case ConnectionStatus.connecting: case ConnectionStatus.connecting:
statusString = 'Connecting'; statusString = 'Reconnecting...';
break; break;
case ConnectionStatus.disconnected: case ConnectionStatus.disconnected:
statusString = 'Disconnected'; statusString = 'Disconnected';
@@ -93,7 +96,7 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
} }
return InfoTile( return InfoTile(
showMessage: showStatus, showMessage: showConnectionStateTile ? showStatus : false,
message: statusString, message: statusString,
child: AppBar( child: AppBar(
brightness: Theme.of(context).brightness, brightness: Theme.of(context).brightness,
lib/src/message_list_view.dart
+191 -154
View File
@@ -7,6 +7,7 @@ import 'package:jiffy/jiffy.dart';
import 'package:rxdart/rxdart.dart'; import 'package:rxdart/rxdart.dart';
import 'package:scrollable_positioned_list/scrollable_positioned_list.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/info_tile.dart';
import 'package:stream_chat_flutter/src/lazy_load_scroll_view.dart'; import 'package:stream_chat_flutter/src/lazy_load_scroll_view.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/stream_svg_icon.dart'; import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
@@ -124,6 +125,7 @@ class MessageListView extends StatefulWidget {
this.highlightInitialMessage = false, this.highlightInitialMessage = false,
this.messageHighlightColor, this.messageHighlightColor,
this.onShowMessage, this.onShowMessage,
this.showConnectionStateTile = false,
}) : super(key: key); }) : super(key: key);
/// Function used to build a custom message widget /// Function used to build a custom message widget
@@ -181,6 +183,8 @@ class MessageListView extends StatefulWidget {
final ShowMessageCallback onShowMessage; final ShowMessageCallback onShowMessage;
final bool showConnectionStateTile;
@override @override
_MessageListViewState createState() => _MessageListViewState(); _MessageListViewState createState() => _MessageListViewState();
} }
@@ -297,172 +301,205 @@ class _MessageListViewState extends State<MessageListView> {
} }
_messageListLength = newMessagesListLength; _messageListLength = newMessagesListLength;
final _client = StreamChat.of(context).client;
return Stack( return Stack(
alignment: Alignment.center, alignment: Alignment.center,
children: [ children: [
LazyLoadScrollView( ValueListenableBuilder<ConnectionStatus>(
onStartOfPage: () async { valueListenable: _client.wsConnectionStatus,
_inBetweenList = false; builder: (context, status, _) {
if (!_upToDate) { String statusString = '';
_topPaginationActive = false; bool showStatus = true;
_bottomPaginationActive = true;
return _paginateData( switch (status) {
streamChannel, case ConnectionStatus.connected:
QueryDirection.bottom, statusString = 'Connected';
); showStatus = false;
} break;
}, case ConnectionStatus.connecting:
onEndOfPage: () async { statusString = 'Reconnecting...';
_inBetweenList = false; break;
_topPaginationActive = true; case ConnectionStatus.disconnected:
_bottomPaginationActive = false; statusString = 'Disconnected';
return _paginateData( break;
streamChannel, }
QueryDirection.top,
); return InfoTile(
}, showMessage:
onInBetweenOfPage: () { widget.showConnectionStateTile ? showStatus : false,
_inBetweenList = true; tileAnchor: Alignment.topCenter,
}, childAnchor: Alignment.topCenter,
child: ScrollablePositionedList.separated( message: statusString,
key: ValueKey(initialIndex + initialAlignment), child: LazyLoadScrollView(
itemPositionsListener: _itemPositionListener, onStartOfPage: () async {
addAutomaticKeepAlives: true, _inBetweenList = false;
initialScrollIndex: initialIndex ?? 0, if (!_upToDate) {
initialAlignment: initialAlignment ?? 0, _topPaginationActive = false;
physics: widget.scrollPhysics, _bottomPaginationActive = true;
itemScrollController: _scrollController, return _paginateData(
reverse: true, streamChannel,
itemCount: QueryDirection.bottom,
messages.length + 2 + (_isThreadConversation ? 1 : 0), );
separatorBuilder: (context, i) { }
if (i == messages.length) return Offstage(); },
if (i == messages.length + 2) return Offstage(); onEndOfPage: () async {
if (i == messages.length + 1) return Offstage(); _inBetweenList = false;
if (i == 0) return SizedBox(height: 30); _topPaginationActive = true;
final message = messages[i]; _bottomPaginationActive = false;
final nextMessage = messages[i - 1]; return _paginateData(
if (!Jiffy(message.createdAt.toLocal()).isSame( streamChannel,
nextMessage.createdAt.toLocal(), QueryDirection.top,
Units.DAY, );
)) { },
final divider = widget.dateDividerBuilder != null onInBetweenOfPage: () {
? widget.dateDividerBuilder( _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 == messages.length + 2) return Offstage();
if (i == messages.length + 1) return Offstage();
if (i == 0) return SizedBox(height: 30);
final message = messages[i];
final nextMessage = messages[i - 1];
if (!Jiffy(message.createdAt.toLocal()).isSame(
nextMessage.createdAt.toLocal(), nextMessage.createdAt.toLocal(),
) Units.DAY,
: DateDivider( )) {
dateTime: nextMessage.createdAt.toLocal(), 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,
); );
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 = 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 SizedBox(height: 8); return SizedBox(height: 8);
} }
return SizedBox(height: 2); return SizedBox(height: 2);
}, },
itemBuilder: (context, i) { itemBuilder: (context, i) {
if (i == messages.length + 2) { if (i == messages.length + 2) {
if (widget.parentMessageBuilder != null) { if (widget.parentMessageBuilder != null) {
return widget.parentMessageBuilder( return widget.parentMessageBuilder(
context, context,
widget.parentMessage, widget.parentMessage,
); );
} else { } else {
return Column( return Column(
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment:
children: <Widget>[ CrossAxisAlignment.stretch,
buildParentMessage(widget.parentMessage), children: <Widget>[
Container( buildParentMessage(widget.parentMessage),
decoration: BoxDecoration( Container(
gradient: StreamChatTheme.of(context) decoration: BoxDecoration(
.colorTheme gradient: StreamChatTheme.of(context)
.bgGradient, .colorTheme
), .bgGradient,
child: Padding( ),
padding: const EdgeInsets.all(8.0), child: Padding(
child: Text( padding: const EdgeInsets.all(8.0),
'${widget.parentMessage.replyCount} ${widget.parentMessage.replyCount == 1 ? 'Reply' : 'Replies'}', child: Text(
textAlign: TextAlign.center, '${widget.parentMessage.replyCount} ${widget.parentMessage.replyCount == 1 ? 'Reply' : 'Replies'}',
style: StreamChatTheme.of(context) textAlign: TextAlign.center,
.channelTheme style: StreamChatTheme.of(context)
.channelHeaderTheme .channelTheme
.lastMessageAt, .channelHeaderTheme
), .lastMessageAt,
), ),
), ),
], ),
); ],
} );
} }
if (i == messages.length + 1) { }
return _buildLoadingIndicator( if (i == messages.length + 1) {
streamChannel, return _buildLoadingIndicator(
QueryDirection.top, streamChannel,
); QueryDirection.top,
} );
if (i == 0) { }
return _buildLoadingIndicator( if (i == 0) {
streamChannel, return _buildLoadingIndicator(
QueryDirection.bottom, streamChannel,
); QueryDirection.bottom,
} );
final message = messages[i - 1]; }
final message = messages[i - 1];
Widget messageWidget; Widget messageWidget;
if (i == 1) { if (i == 1) {
messageWidget = _buildBottomMessage( 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, context,
message, message,
messages, messages,
i, streamChannel,
), );
messages), } else if (i == messages.length - 1) {
); messageWidget = _buildTopMessage(
} else { context,
messageWidget = buildMessage(message, messages, i); message,
} messages,
} streamChannel,
return messageWidget; );
}, } 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(), if (widget.showScrollToBottom) _buildScrollToBottom(),
Positioned( Positioned(
top: 20.0, top: 20.0,