feat: Added sticky header to display position data

This commit is contained in:
Deven Joshi
2020-10-27 13:28:17 +05:30
parent a7f5d7a635
commit bbb71ec47f
2 changed files with 149 additions and 130 deletions
+148 -130
View File
@@ -6,6 +6,7 @@ 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';
@@ -149,150 +150,167 @@ class _MessageListViewState extends State<MessageListView> {
List<Message> _newMessageList = []; List<Message> _newMessageList = [];
Function _onThreadTap; Function _onThreadTap;
bool _showScrollToBottom = false; bool _showScrollToBottom = false;
var positionData;
@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 /// TODO: find a better solution when (https://github.com/flutter/flutter/issues/21023) is fixed
return Stack( return WidgetsVisibilityProvider(
children: [ condition: (c) => null,
NotificationListener<ScrollNotification>( child: Stack(
onNotification: (_) { children: [
if (_scrollController.offset < 150 && _newMessageList.isNotEmpty) { NotificationListener<ScrollNotification>(
setState(() { onNotification: (_) {
_messages.insertAll(0, _newMessageList); if (_scrollController.offset < 150 && _newMessageList.isNotEmpty) {
_newMessageList.clear(); setState(() {
}); _messages.insertAll(0, _newMessageList);
} _newMessageList.clear();
return true; });
}, }
child: ListView.custom( return true;
key: Key('messageListView'), },
physics: widget.scrollPhysics, child: ListView.custom(
keyboardDismissBehavior: widget.keyboardDismissBehavior, key: Key('messageListView'),
controller: _scrollController, physics: widget.scrollPhysics,
reverse: true, keyboardDismissBehavior: widget.keyboardDismissBehavior,
childrenDelegate: SliverChildBuilderDelegate( controller: _scrollController,
(context, i) { reverse: true,
if (i == _messages.length + 1) { childrenDelegate: SliverChildBuilderDelegate(
if (widget.parentMessage != null) { (context, i) {
if (widget.parentMessageBuilder != null) { if (i == _messages.length + 1) {
return widget.parentMessageBuilder( if (widget.parentMessage != null) {
context, if (widget.parentMessageBuilder != null) {
widget.parentMessage, return widget.parentMessageBuilder(
);
} 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 {
return SizedBox();
}
}
if (i == _messages.length) {
return _buildLoadingIndicator(streamChannel);
}
final message = _messages[i];
final nextMessage = i > 0 ? _messages[i - 1] : null;
Widget messageWidget;
if (i == 0) {
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: (_) => widget.messageBuilder(
context, context,
MessageDetails( widget.parentMessage,
context, );
message, } else {
_messages, return Column(
i, crossAxisAlignment: CrossAxisAlignment.stretch,
), children: <Widget>[
_messages), 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 {
return SizedBox();
}
}
if (i == _messages.length) {
return _buildLoadingIndicator(streamChannel);
}
final message = _messages[i];
final nextMessage = i > 0 ? _messages[i - 1] : null;
Widget messageWidget;
if (i == 0) {
messageWidget = _buildBottomMessage(
context,
message,
_messages,
streamChannel,
);
} else if (i == _messages.length - 1) {
messageWidget = _buildTopMessage(
context,
message,
_messages,
streamChannel,
); );
} else { } else {
messageWidget = buildMessage(message, _messages, i); if (widget.messageBuilder != null) {
messageWidget = Builder(
key: ValueKey<String>('MESSAGE-${message.id}'),
builder: (_) => widget.messageBuilder(
context,
MessageDetails(
context,
message,
_messages,
i,
),
_messages),
);
} else {
messageWidget = buildMessage(message, _messages, i);
}
} }
}
if (nextMessage != null && if (nextMessage != null &&
!Jiffy(message.createdAt.toLocal()) !Jiffy(message.createdAt.toLocal())
.isSame(nextMessage.createdAt.toLocal(), Units.DAY)) { .isSame(nextMessage.createdAt.toLocal(), Units.DAY)) {
return Column( return Column(
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[ children: <Widget>[
messageWidget, messageWidget,
Padding( Padding(
padding: const EdgeInsets.symmetric(vertical: 12.0), padding: const EdgeInsets.symmetric(vertical: 12.0),
child: widget.dateDividerBuilder != null child: widget.dateDividerBuilder != null
? widget.dateDividerBuilder( ? widget.dateDividerBuilder(
nextMessage.createdAt.toLocal()) nextMessage.createdAt.toLocal())
: DateDivider( : DateDivider(
dateTime: nextMessage.createdAt.toLocal(), dateTime: nextMessage.createdAt.toLocal(),
), ),
), ),
], ],
); );
} }
return messageWidget; return VisibleNotifierWidget(child: messageWidget);
}, },
childCount: _messages.length + 2, childCount: _messages.length + 2,
findChildIndexCallback: (key) { findChildIndexCallback: (key) {
final ValueKey<String> valueKey = key; final ValueKey<String> valueKey = key;
final index = _messages final index = _messages
.indexWhere((m) => 'MESSAGE-${m.id}' == valueKey.value); .indexWhere((m) => 'MESSAGE-${m.id}' == valueKey.value);
return index != -1 ? index : null; return index != -1 ? index : null;
}, },
),
), ),
), ),
), if (widget.showScrollToBottom)
if (widget.showScrollToBottom) StreamBuilder<Event>(
StreamBuilder<Event>( stream: streamChannel.channel.on(
stream: streamChannel.channel.on( EventType.messageNew,
EventType.messageNew, ),
), builder: (context, _) {
builder: (context, _) { if (!_showScrollToBottom ||
if (!_showScrollToBottom || streamChannel.channel.state.unreadCount == 0) {
streamChannel.channel.state.unreadCount == 0) { return SizedBox();
return SizedBox(); }
} return _buildScrollToBottom(streamChannel);
return _buildScrollToBottom(streamChannel); }),
}), Positioned(
], top: 20.0,
child: WidgetsVisibilityListener(
listener: (context, event) {
setState(() {
positionData = event.positionDataList.first.startPosition;
});
},
child: Chip(
label: Text(positionData.toString()),
),
),
),
],
),
); );
} }
+1
View File
@@ -30,6 +30,7 @@ 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:
fonts: fonts: