feat: Added sticky header to display position data
This commit is contained in:
Deven Joshi
+148
-130
@@ -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/system_message.dart';
|
||||
import 'package:visibility_detector/visibility_detector.dart';
|
||||
import 'package:widgets_visibility_provider/widgets_visibility_provider.dart';
|
||||
|
||||
import '../stream_chat_flutter.dart';
|
||||
import 'date_divider.dart';
|
||||
@@ -149,150 +150,167 @@ class _MessageListViewState extends State<MessageListView> {
|
||||
List<Message> _newMessageList = [];
|
||||
Function _onThreadTap;
|
||||
bool _showScrollToBottom = false;
|
||||
var positionData;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final streamChannel = StreamChannel.of(context);
|
||||
|
||||
/// TODO: find a better solution when (https://github.com/flutter/flutter/issues/21023) is fixed
|
||||
return Stack(
|
||||
children: [
|
||||
NotificationListener<ScrollNotification>(
|
||||
onNotification: (_) {
|
||||
if (_scrollController.offset < 150 && _newMessageList.isNotEmpty) {
|
||||
setState(() {
|
||||
_messages.insertAll(0, _newMessageList);
|
||||
_newMessageList.clear();
|
||||
});
|
||||
}
|
||||
return true;
|
||||
},
|
||||
child: ListView.custom(
|
||||
key: Key('messageListView'),
|
||||
physics: widget.scrollPhysics,
|
||||
keyboardDismissBehavior: widget.keyboardDismissBehavior,
|
||||
controller: _scrollController,
|
||||
reverse: true,
|
||||
childrenDelegate: SliverChildBuilderDelegate(
|
||||
(context, i) {
|
||||
if (i == _messages.length + 1) {
|
||||
if (widget.parentMessage != null) {
|
||||
if (widget.parentMessageBuilder != null) {
|
||||
return widget.parentMessageBuilder(
|
||||
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 {
|
||||
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(
|
||||
return WidgetsVisibilityProvider(
|
||||
condition: (c) => null,
|
||||
child: Stack(
|
||||
children: [
|
||||
NotificationListener<ScrollNotification>(
|
||||
onNotification: (_) {
|
||||
if (_scrollController.offset < 150 && _newMessageList.isNotEmpty) {
|
||||
setState(() {
|
||||
_messages.insertAll(0, _newMessageList);
|
||||
_newMessageList.clear();
|
||||
});
|
||||
}
|
||||
return true;
|
||||
},
|
||||
child: ListView.custom(
|
||||
key: Key('messageListView'),
|
||||
physics: widget.scrollPhysics,
|
||||
keyboardDismissBehavior: widget.keyboardDismissBehavior,
|
||||
controller: _scrollController,
|
||||
reverse: true,
|
||||
childrenDelegate: SliverChildBuilderDelegate(
|
||||
(context, i) {
|
||||
if (i == _messages.length + 1) {
|
||||
if (widget.parentMessage != null) {
|
||||
if (widget.parentMessageBuilder != null) {
|
||||
return widget.parentMessageBuilder(
|
||||
context,
|
||||
MessageDetails(
|
||||
context,
|
||||
message,
|
||||
_messages,
|
||||
i,
|
||||
),
|
||||
_messages),
|
||||
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 {
|
||||
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 {
|
||||
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 &&
|
||||
!Jiffy(message.createdAt.toLocal())
|
||||
.isSame(nextMessage.createdAt.toLocal(), Units.DAY)) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: <Widget>[
|
||||
messageWidget,
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 12.0),
|
||||
child: widget.dateDividerBuilder != null
|
||||
? widget.dateDividerBuilder(
|
||||
nextMessage.createdAt.toLocal())
|
||||
: DateDivider(
|
||||
dateTime: nextMessage.createdAt.toLocal(),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
if (nextMessage != null &&
|
||||
!Jiffy(message.createdAt.toLocal())
|
||||
.isSame(nextMessage.createdAt.toLocal(), Units.DAY)) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: <Widget>[
|
||||
messageWidget,
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 12.0),
|
||||
child: widget.dateDividerBuilder != null
|
||||
? widget.dateDividerBuilder(
|
||||
nextMessage.createdAt.toLocal())
|
||||
: DateDivider(
|
||||
dateTime: nextMessage.createdAt.toLocal(),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
return messageWidget;
|
||||
},
|
||||
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;
|
||||
},
|
||||
return VisibleNotifierWidget(child: messageWidget);
|
||||
},
|
||||
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<Event>(
|
||||
stream: streamChannel.channel.on(
|
||||
EventType.messageNew,
|
||||
),
|
||||
builder: (context, _) {
|
||||
if (!_showScrollToBottom ||
|
||||
streamChannel.channel.state.unreadCount == 0) {
|
||||
return SizedBox();
|
||||
}
|
||||
return _buildScrollToBottom(streamChannel);
|
||||
}),
|
||||
],
|
||||
if (widget.showScrollToBottom)
|
||||
StreamBuilder<Event>(
|
||||
stream: streamChannel.channel.on(
|
||||
EventType.messageNew,
|
||||
),
|
||||
builder: (context, _) {
|
||||
if (!_showScrollToBottom ||
|
||||
streamChannel.channel.state.unreadCount == 0) {
|
||||
return SizedBox();
|
||||
}
|
||||
return _buildScrollToBottom(streamChannel);
|
||||
}),
|
||||
Positioned(
|
||||
top: 20.0,
|
||||
child: WidgetsVisibilityListener(
|
||||
listener: (context, event) {
|
||||
setState(() {
|
||||
positionData = event.positionDataList.first.startPosition;
|
||||
});
|
||||
},
|
||||
child: Chip(
|
||||
label: Text(positionData.toString()),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -30,6 +30,7 @@ dependencies:
|
||||
flutter_slidable: ^0.5.4
|
||||
carousel_slider: ^2.2.1
|
||||
clipboard: ^0.1.2+8
|
||||
widgets_visibility_provider: ^2.0.2
|
||||
|
||||
flutter:
|
||||
fonts:
|
||||
|
||||
Reference in New Issue
Block a user