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

[UI-KIT] Add connection status builder

Browse Source 
Signed-off-by: Sahil Kumar <[email protected]>
This commit is contained in:
Sahil Kumar
2021-01-29 13:33:45 +05:30
parent 18f0956717
commit d5c57f3cb5
11 changed files with 546 additions and 499 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/flutter_widgets/example/lib/group_chat_details_screen.dart
+100 -100
View File
@@ -150,116 +150,116 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
), ),
], ],
), ),
body: ValueListenableBuilder<ConnectionStatus>( body: ConnectionStatusBuilder(
valueListenable: StreamChat.of(context).client.wsConnectionStatus, statusBuilder: (context, status) {
builder: (context, status, _) { String statusString = '';
String statusString = ''; bool showStatus = true;
bool showStatus = true;
switch (status) { switch (status) {
case ConnectionStatus.connected: case ConnectionStatus.connected:
statusString = 'Connected'; statusString = 'Connected';
showStatus = false; showStatus = false;
break; break;
case ConnectionStatus.connecting: case ConnectionStatus.connecting:
statusString = 'Reconnecting...'; statusString = 'Reconnecting...';
break; break;
case ConnectionStatus.disconnected: case ConnectionStatus.disconnected:
statusString = 'Disconnected'; statusString = 'Disconnected';
break; break;
} }
return InfoTile( return InfoTile(
showMessage: showStatus, showMessage: showStatus,
tileAnchor: Alignment.topCenter, tileAnchor: Alignment.topCenter,
childAnchor: Alignment.topCenter, childAnchor: Alignment.topCenter,
message: statusString, message: statusString,
child: Column( child: Column(
children: [ children: [
Container( Container(
width: double.maxFinite, width: double.maxFinite,
decoration: BoxDecoration( decoration: BoxDecoration(
gradient: gradient:
StreamChatTheme.of(context).colorTheme.bgGradient, StreamChatTheme.of(context).colorTheme.bgGradient,
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 8,
), ),
child: Padding( child: Text(
padding: const EdgeInsets.symmetric( '$_totalUsers ${_totalUsers > 1 ? 'Members' : 'Member'}',
vertical: 8, style: TextStyle(
horizontal: 8, color: StreamChatTheme.of(context).colorTheme.grey,
),
child: Text(
'$_totalUsers ${_totalUsers > 1 ? 'Members' : 'Member'}',
style: TextStyle(
color: StreamChatTheme.of(context).colorTheme.grey,
),
), ),
), ),
), ),
Expanded( ),
child: GestureDetector( Expanded(
behavior: HitTestBehavior.opaque, child: GestureDetector(
onPanDown: (_) => FocusScope.of(context).unfocus(), behavior: HitTestBehavior.opaque,
child: ListView.separated( onPanDown: (_) => FocusScope.of(context).unfocus(),
itemCount: _selectedUsers.length + 1, child: ListView.separated(
separatorBuilder: (_, __) => Container( itemCount: _selectedUsers.length + 1,
height: 1, separatorBuilder: (_, __) => Container(
color: StreamChatTheme.of(context) height: 1,
.colorTheme color: StreamChatTheme.of(context)
.greyWhisper, .colorTheme
), .greyWhisper,
itemBuilder: (_, index) { ),
if (index == _selectedUsers.length) { itemBuilder: (_, index) {
return Container( if (index == _selectedUsers.length) {
height: 1, return Container(
height: 1,
color: StreamChatTheme.of(context)
.colorTheme
.greyWhisper,
);
}
final user = _selectedUsers[index];
return ListTile(
key: ObjectKey(user),
leading: UserAvatar(
user: user,
constraints: BoxConstraints.tightFor(
width: 40,
height: 40,
),
),
title: Text(
user.name,
style: TextStyle(fontWeight: FontWeight.bold),
),
contentPadding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 8,
),
trailing: IconButton(
icon: Icon(
Icons.clear_rounded,
color: StreamChatTheme.of(context) color: StreamChatTheme.of(context)
.colorTheme .colorTheme
.greyWhisper, .black,
);
}
final user = _selectedUsers[index];
return ListTile(
key: ObjectKey(user),
leading: UserAvatar(
user: user,
constraints: BoxConstraints.tightFor(
width: 40,
height: 40,
),
), ),
title: Text( padding: const EdgeInsets.all(0),
user.name, splashRadius: 24,
style: TextStyle(fontWeight: FontWeight.bold), onPressed: () {
), setState(() {
contentPadding: const EdgeInsets.symmetric( _selectedUsers.remove(user);
horizontal: 12, });
vertical: 8, if (_selectedUsers.isEmpty) {
), Navigator.pop(context, _selectedUsers);
trailing: IconButton( }
icon: Icon( },
Icons.clear_rounded, ),
color: StreamChatTheme.of(context) );
.colorTheme },
.black,
),
padding: const EdgeInsets.all(0),
splashRadius: 24,
onPressed: () {
setState(() {
_selectedUsers.remove(user);
});
if (_selectedUsers.isEmpty) {
Navigator.pop(context, _selectedUsers);
}
},
),
);
},
),
), ),
), ),
], ),
), ],
); ),
}), );
},
),
), ),
); );
} }
packages/flutter_widgets/example/lib/new_chat_screen.dart
+2 -3
View File
@@ -134,9 +134,8 @@ class _NewChatScreenState extends State<NewChatScreen> {
), ),
centerTitle: true, centerTitle: true,
), ),
body: ValueListenableBuilder<ConnectionStatus>( body: ConnectionStatusBuilder(
valueListenable: StreamChat.of(context).client.wsConnectionStatus, statusBuilder: (context, status) {
builder: (context, status, _) {
String statusString = ''; String statusString = '';
bool showStatus = true; bool showStatus = true;
packages/flutter_widgets/example/lib/new_group_chat_screen.dart
+202 -204
View File
@@ -87,227 +87,225 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
) )
], ],
), ),
body: ValueListenableBuilder<ConnectionStatus>( body: ConnectionStatusBuilder(
valueListenable: StreamChat.of(context).client.wsConnectionStatus, statusBuilder: (context, status) {
builder: (context, status, _) { String statusString = '';
String statusString = ''; bool showStatus = true;
bool showStatus = true;
switch (status) { switch (status) {
case ConnectionStatus.connected: case ConnectionStatus.connected:
statusString = 'Connected'; statusString = 'Connected';
showStatus = false; showStatus = false;
break; break;
case ConnectionStatus.connecting: case ConnectionStatus.connecting:
statusString = 'Reconnecting...'; statusString = 'Reconnecting...';
break; break;
case ConnectionStatus.disconnected: case ConnectionStatus.disconnected:
statusString = 'Disconnected'; statusString = 'Disconnected';
break; break;
} }
return InfoTile( return InfoTile(
showMessage: showStatus, showMessage: showStatus,
tileAnchor: Alignment.topCenter, tileAnchor: Alignment.topCenter,
childAnchor: Alignment.topCenter, childAnchor: Alignment.topCenter,
message: statusString, message: statusString,
child: NestedScrollView( child: NestedScrollView(
floatHeaderSlivers: true, floatHeaderSlivers: true,
headerSliverBuilder: headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) { (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[ return <Widget>[
SliverToBoxAdapter( SliverToBoxAdapter(
child: SearchTextField( child: SearchTextField(
controller: _controller, controller: _controller,
),
), ),
if (_selectedUsers.isNotEmpty) ),
SliverToBoxAdapter( if (_selectedUsers.isNotEmpty)
child: Container( SliverToBoxAdapter(
height: 104, child: Container(
child: ListView.separated( height: 104,
scrollDirection: Axis.horizontal, child: ListView.separated(
itemCount: _selectedUsers.length, scrollDirection: Axis.horizontal,
padding: const EdgeInsets.all(8), itemCount: _selectedUsers.length,
separatorBuilder: (_, __) => SizedBox(width: 16), padding: const EdgeInsets.all(8),
itemBuilder: (_, index) { separatorBuilder: (_, __) => SizedBox(width: 16),
final user = _selectedUsers.elementAt(index); itemBuilder: (_, index) {
return Column( final user = _selectedUsers.elementAt(index);
children: [ return Column(
Stack( children: [
children: [ Stack(
UserAvatar( children: [
onlineIndicatorAlignment: UserAvatar(
Alignment(0.9, 0.9), onlineIndicatorAlignment:
user: user, Alignment(0.9, 0.9),
showOnlineStatus: true, user: user,
borderRadius: BorderRadius.circular(32), showOnlineStatus: true,
constraints: BoxConstraints.tightFor( borderRadius: BorderRadius.circular(32),
height: 64, constraints: BoxConstraints.tightFor(
width: 64, height: 64,
), width: 64,
), ),
Positioned( ),
top: -4, Positioned(
right: -4, top: -4,
child: GestureDetector( right: -4,
onTap: () { child: GestureDetector(
if (_selectedUsers.contains(user)) { onTap: () {
setState(() => if (_selectedUsers.contains(user)) {
_selectedUsers.remove(user)); setState(() =>
} _selectedUsers.remove(user));
}, }
child: Container( },
decoration: BoxDecoration( child: Container(
decoration: BoxDecoration(
color: StreamChatTheme.of(context)
.colorTheme
.white,
shape: BoxShape.circle,
border: Border.all(
color: StreamChatTheme.of(context) color: StreamChatTheme.of(context)
.colorTheme .colorTheme
.white, .whiteSnow,
shape: BoxShape.circle,
border: Border.all(
color:
StreamChatTheme.of(context)
.colorTheme
.whiteSnow,
),
),
child: StreamSvgIcon.close(
color: StreamChatTheme.of(context)
.colorTheme
.black,
size: 24,
), ),
), ),
), child: StreamSvgIcon.close(
) color: StreamChatTheme.of(context)
], .colorTheme
), .black,
SizedBox(height: 4), size: 24,
Text( ),
user.name.split(' ')[0],
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 12,
),
),
],
);
},
),
),
),
SliverPersistentHeader(
pinned: true,
delegate: _HeaderDelegate(
height: 30,
child: Container(
width: double.maxFinite,
decoration: BoxDecoration(
gradient: StreamChatTheme.of(context)
.colorTheme
.bgGradient,
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 8,
),
child: Text(
_isSearchActive
? 'Matches for \"$_userNameQuery\"'
: 'On the platform',
style: TextStyle(
color:
StreamChatTheme.of(context).colorTheme.grey,
),
),
),
),
),
),
];
},
body: GestureDetector(
behavior: HitTestBehavior.opaque,
onPanDown: (_) => FocusScope.of(context).unfocus(),
child: UsersBloc(
child: UserListView(
selectedUsers: _selectedUsers,
pullToRefresh: false,
groupAlphabetically: _isSearchActive ? false : true,
onUserTap: (user, _) {
if (!_selectedUsers.contains(user)) {
setState(() {
_selectedUsers.add(user);
});
} else {
setState(() {
_selectedUsers.remove(user);
});
}
},
pagination: PaginationParams(
limit: 25,
),
filter: {
if (_userNameQuery.isNotEmpty)
'name': {
r'$autocomplete': _userNameQuery,
},
'id': {
r'$ne': StreamChat.of(context).user.id,
}
},
sort: [
SortOption(
'name',
direction: 1,
),
],
emptyBuilder: (_) {
return LayoutBuilder(
builder: (context, viewportConstraints) {
return SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: viewportConstraints.maxHeight,
),
child: Center(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(24),
child: StreamSvgIcon.search(
size: 96,
color: StreamChatTheme.of(context)
.colorTheme
.grey,
), ),
), ),
Text( )
'No user matches these keywords...', ],
style: StreamChatTheme.of(context) ),
.textTheme SizedBox(height: 4),
.footnote Text(
.copyWith( user.name.split(' ')[0],
color: StreamChatTheme.of(context) style: TextStyle(
.colorTheme fontWeight: FontWeight.bold,
.grey, fontSize: 12,
),
),
],
), ),
), ),
), ],
); );
}, },
); ),
}, ),
), ),
SliverPersistentHeader(
pinned: true,
delegate: _HeaderDelegate(
height: 30,
child: Container(
width: double.maxFinite,
decoration: BoxDecoration(
gradient:
StreamChatTheme.of(context).colorTheme.bgGradient,
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 8,
),
child: Text(
_isSearchActive
? 'Matches for \"$_userNameQuery\"'
: 'On the platform',
style: TextStyle(
color:
StreamChatTheme.of(context).colorTheme.grey,
),
),
),
),
),
),
];
},
body: GestureDetector(
behavior: HitTestBehavior.opaque,
onPanDown: (_) => FocusScope.of(context).unfocus(),
child: UsersBloc(
child: UserListView(
selectedUsers: _selectedUsers,
pullToRefresh: false,
groupAlphabetically: _isSearchActive ? false : true,
onUserTap: (user, _) {
if (!_selectedUsers.contains(user)) {
setState(() {
_selectedUsers.add(user);
});
} else {
setState(() {
_selectedUsers.remove(user);
});
}
},
pagination: PaginationParams(
limit: 25,
),
filter: {
if (_userNameQuery.isNotEmpty)
'name': {
r'$autocomplete': _userNameQuery,
},
'id': {
r'$ne': StreamChat.of(context).user.id,
}
},
sort: [
SortOption(
'name',
direction: 1,
),
],
emptyBuilder: (_) {
return LayoutBuilder(
builder: (context, viewportConstraints) {
return SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: viewportConstraints.maxHeight,
),
child: Center(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(24),
child: StreamSvgIcon.search(
size: 96,
color: StreamChatTheme.of(context)
.colorTheme
.grey,
),
),
Text(
'No user matches these keywords...',
style: StreamChatTheme.of(context)
.textTheme
.footnote
.copyWith(
color: StreamChatTheme.of(context)
.colorTheme
.grey,
),
),
],
),
),
),
);
},
);
},
), ),
), ),
), ),
); ),
}), );
},
),
); );
} }
} }
packages/flutter_widgets/lib/src/channel_header.dart
+3 -4
View File
@@ -9,6 +9,7 @@ import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
import '../stream_chat_flutter.dart'; import '../stream_chat_flutter.dart';
import './channel_name.dart'; import './channel_name.dart';
import 'channel_image.dart'; import 'channel_image.dart';
import 'connection_status_builder.dart';
/// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/channel_header.png) /// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/channel_header.png)
/// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/channel_header_paint.png) /// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/channel_header_paint.png)
@@ -85,11 +86,9 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final channel = StreamChannel.of(context).channel; final channel = StreamChannel.of(context).channel;
final _client = StreamChat.of(context).client;
return ValueListenableBuilder<ConnectionStatus>( return ConnectionStatusBuilder(
valueListenable: _client.wsConnectionStatus, statusBuilder: (context, status) {
builder: (context, status, _) {
String statusString = ''; String statusString = '';
bool showStatus = true; bool showStatus = true;
packages/flutter_widgets/lib/src/channel_info.dart
+4 -3
View File
@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
import 'package:jiffy/jiffy.dart'; import 'package:jiffy/jiffy.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart'; import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import 'connection_status_builder.dart';
class ChannelInfo extends StatelessWidget { class ChannelInfo extends StatelessWidget {
final Channel channel; final Channel channel;
@@ -25,9 +27,8 @@ class ChannelInfo extends StatelessWidget {
stream: channel.state.membersStream, stream: channel.state.membersStream,
initialData: channel.state.members, initialData: channel.state.members,
builder: (context, snapshot) { builder: (context, snapshot) {
return ValueListenableBuilder( return ConnectionStatusBuilder(
valueListenable: client.wsConnectionStatus, statusBuilder: (context, status) {
builder: (context, status, child) {
switch (status) { switch (status) {
case ConnectionStatus.connected: case ConnectionStatus.connected:
return _buildConnectedTitleState(context, snapshot.data); return _buildConnectedTitleState(context, snapshot.data);
packages/flutter_widgets/lib/src/channel_list_header.dart
+5 -6
View File
@@ -6,6 +6,7 @@ import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
import 'package:stream_chat_flutter/src/stream_neumorphic_button.dart'; import 'package:stream_chat_flutter/src/stream_neumorphic_button.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart'; import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import 'connection_status_builder.dart';
import 'info_tile.dart'; import 'info_tile.dart';
import 'stream_chat.dart'; import 'stream_chat.dart';
@@ -79,9 +80,8 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
final _client = client ?? StreamChat.of(context).client; final _client = client ?? StreamChat.of(context).client;
final user = _client.state.user; final user = _client.state.user;
return ValueListenableBuilder<ConnectionStatus>( return ConnectionStatusBuilder(
valueListenable: _client.wsConnectionStatus, statusBuilder: (context, status) {
builder: (context, status, child) {
String statusString = ''; String statusString = '';
bool showStatus = true; bool showStatus = true;
@@ -130,9 +130,8 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
actions: [ actions: [
StreamNeumorphicButton( StreamNeumorphicButton(
child: IconButton( child: IconButton(
icon: ValueListenableBuilder<ConnectionStatus>( icon: ConnectionStatusBuilder(
valueListenable: _client.wsConnectionStatus, statusBuilder: (context, status) {
builder: (context, status, child) {
var color; var color;
switch (status) { switch (status) {
case ConnectionStatus.connected: case ConnectionStatus.connected:
packages/flutter_widgets/lib/src/connection_status_builder.dart
+55
View File
@@ -0,0 +1,55 @@
import 'package:flutter/material.dart';
import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
import 'stream_chat.dart';
class ConnectionStatusBuilder extends StatelessWidget {
/// Creates a new ConnectionStatusBuilder
const ConnectionStatusBuilder({
Key key,
@required this.statusBuilder,
this.initialStatus = ConnectionStatus.disconnected,
this.connectionStatusStream,
this.errorBuilder,
this.loadingBuilder,
}) : assert(statusBuilder != null),
super(key: key);
/// The connection status that will be used to create the initial snapshot.
final ConnectionStatus initialStatus;
/// The asynchronous computation to which this builder is currently connected.
final Stream<ConnectionStatus> connectionStatusStream;
/// The builder that will be used in case of error
final Widget Function(BuildContext context, Object error) errorBuilder;
/// The builder that will be used in case of loading
final WidgetBuilder loadingBuilder;
/// The builder that will be used in case of data
final Widget Function(BuildContext context, ConnectionStatus status)
statusBuilder;
@override
Widget build(BuildContext context) {
final stream = connectionStatusStream ??
StreamChat.of(context).client.wsConnectionStatusStream;
return StreamBuilder<ConnectionStatus>(
initialData: initialStatus,
stream: stream,
builder: (context, snapshot) {
if (snapshot.hasError) {
if (errorBuilder != null) {
return errorBuilder(context, snapshot.error);
}
return Offstage();
}
if (!snapshot.hasData) {
if (loadingBuilder != null) return loadingBuilder(context);
return Offstage();
}
return statusBuilder(context, snapshot.data);
},
);
}
}
packages/flutter_widgets/lib/src/message_list_view.dart
+172 -175
View File
@@ -14,6 +14,7 @@ import 'package:stream_chat_flutter/src/system_message.dart';
import 'package:visibility_detector/visibility_detector.dart'; import 'package:visibility_detector/visibility_detector.dart';
import '../stream_chat_flutter.dart'; import '../stream_chat_flutter.dart';
import 'connection_status_builder.dart';
import 'date_divider.dart'; import 'date_divider.dart';
import 'swipeable.dart'; import 'swipeable.dart';
import 'extension.dart'; import 'extension.dart';
@@ -301,197 +302,193 @@ 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: [
ValueListenableBuilder<ConnectionStatus>( ConnectionStatusBuilder(
valueListenable: _client.wsConnectionStatus, statusBuilder: (context, status) {
builder: (context, status, _) { String statusString = '';
String statusString = ''; bool showStatus = true;
bool showStatus = true; switch (status) {
case ConnectionStatus.connected:
statusString = 'Connected';
showStatus = false;
break;
case ConnectionStatus.connecting:
statusString = 'Reconnecting...';
break;
case ConnectionStatus.disconnected:
statusString = 'Disconnected';
break;
}
switch (status) { return InfoTile(
case ConnectionStatus.connected: showMessage: widget.showConnectionStateTile ? showStatus : false,
statusString = 'Connected'; tileAnchor: Alignment.topCenter,
showStatus = false; childAnchor: Alignment.topCenter,
break; message: statusString,
case ConnectionStatus.connecting: child: LazyLoadScrollView(
statusString = 'Reconnecting...'; onStartOfPage: () async {
break; _inBetweenList = false;
case ConnectionStatus.disconnected: if (!_upToDate) {
statusString = 'Disconnected'; _topPaginationActive = false;
break; _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,
),
),
);
}
return InfoTile( final message = messages[i];
showMessage: final nextMessage = messages[i - 1];
widget.showConnectionStateTile ? showStatus : false, if (!Jiffy(message.createdAt.toLocal()).isSame(
tileAnchor: Alignment.topCenter, nextMessage.createdAt.toLocal(),
childAnchor: Alignment.topCenter, Units.DAY,
message: statusString, )) {
child: LazyLoadScrollView( final divider = widget.dateDividerBuilder != null
onStartOfPage: () async { ? widget.dateDividerBuilder(
_inBetweenList = false; nextMessage.createdAt.toLocal(),
if (!_upToDate) { )
_topPaginationActive = false; : DateDivider(
_bottomPaginationActive = true; dateTime: nextMessage.createdAt.toLocal(),
return _paginateData( );
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, streamChannel,
QueryDirection.bottom, QueryDirection.bottom,
); );
} }
}, final message = messages[i - 1];
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]; Widget messageWidget;
final nextMessage = messages[i - 1];
if (!Jiffy(message.createdAt.toLocal()).isSame( if (i == 1) {
nextMessage.createdAt.toLocal(), messageWidget = _buildBottomMessage(
Units.DAY, context,
)) { message,
final divider = widget.dateDividerBuilder != null messages,
? widget.dateDividerBuilder( streamChannel,
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,
); );
} else if (i == messages.length - 1) {
final isNextUserSame = messageWidget = _buildTopMessage(
message.user.id == nextMessage.user?.id; context,
final isThread = message.replyCount > 0; message,
final isDeleted = message.isDeleted; messages,
if (timeDiff >= 1 || streamChannel,
!isNextUserSame || );
isThread || } else {
isDeleted) { if (widget.messageBuilder != null) {
return SizedBox(height: 8); messageWidget = Builder(
} key: ValueKey<String>('MESSAGE-${message.id}'),
return SizedBox(height: 2); builder: (context) => widget.messageBuilder(
}, context,
itemBuilder: (context, i) { MessageDetails(
if (i == messages.length + 2) { context,
if (widget.parentMessageBuilder != null) { message,
return widget.parentMessageBuilder( messages,
context, i,
widget.parentMessage, ),
); messages),
} 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 { } else {
if (widget.messageBuilder != null) { messageWidget = buildMessage(message, messages, i);
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; }
}, return messageWidget;
), },
), ),
); ),
}), );
},
),
if (widget.showScrollToBottom) _buildScrollToBottom(), if (widget.showScrollToBottom) _buildScrollToBottom(),
Positioned( Positioned(
top: 20.0, top: 20.0,
packages/flutter_widgets/lib/stream_chat_flutter.dart
+1
View File
@@ -40,4 +40,5 @@ export 'src/channel_file_display_screen.dart';
export 'src/channel_media_display_screen.dart'; export 'src/channel_media_display_screen.dart';
export 'src/info_tile.dart'; export 'src/info_tile.dart';
export 'src/stream_chat.dart'; export 'src/stream_chat.dart';
export 'src/connection_status_builder.dart';
export 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart'; export 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
packages/flutter_widgets/pubspec.yaml
-2
View File
@@ -32,8 +32,6 @@ dependencies:
image_picker: ^0.6.7+17 image_picker: ^0.6.7+17
flutter_keyboard_visibility: ^4.0.2 flutter_keyboard_visibility: ^4.0.2
mime: ^0.9.7 mime: ^0.9.7
stream_chat:
path: ../dart_client
video_compress: ^2.1.1 video_compress: ^2.1.1
visibility_detector: ^0.1.5 visibility_detector: ^0.1.5
http_parser: ^3.1.4 http_parser: ^3.1.4
packages/stream_chat_flutter_core/pubspec.yaml
+2 -2
View File
@@ -10,8 +10,8 @@ environment:
flutter: ">=1.17.0" flutter: ">=1.17.0"
dependencies: dependencies:
stream_chat: ^0.2.23+3 stream_chat:
rxdart: ^0.24.1 path: ../dart_client
flutter: flutter:
sdk: flutter sdk: flutter