553 lines
18 KiB
Dart
553 lines
18 KiB
Dart
import 'dart:convert';
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:stream_chat/stream_chat.dart';
|
|
import 'package:stream_chat_flutter/src/lazy_load_scroll_view.dart';
|
|
import 'package:stream_chat_flutter/src/users_bloc.dart';
|
|
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
|
|
|
|
import 'user_item.dart';
|
|
|
|
/// Callback called when tapping on a user
|
|
typedef UserTapCallback = void Function(User, Widget);
|
|
|
|
/// Builder used to create a custom [ListUserItem] from a [User]
|
|
typedef UserItemBuilder = Widget Function(BuildContext, User, bool);
|
|
|
|
///
|
|
/// It shows the list of current users.
|
|
///
|
|
/// ```dart
|
|
/// class UsersListPage extends StatelessWidget {
|
|
/// @override
|
|
/// Widget build(BuildContext context) {
|
|
/// return Scaffold(
|
|
/// body: UsersListView(
|
|
/// filter: {
|
|
/// 'members': {
|
|
/// '\$in': [StreamChat.of(context).user.id],
|
|
/// }
|
|
/// },
|
|
/// sort: [SortOption('last_message_at')],
|
|
/// pagination: PaginationParams(
|
|
/// limit: 20,
|
|
/// ),
|
|
/// channelWidget: ChannelPage(),
|
|
/// ),
|
|
/// );
|
|
/// }
|
|
/// }
|
|
/// ```
|
|
///
|
|
///
|
|
/// Make sure to have a [UsersBloc] ancestor in order to provide the information about the users.
|
|
/// The widget uses a [ListView.separated], [GridView.builder] to render the list, grid of channels.
|
|
///
|
|
/// The widget components render the ui based on the first ancestor of type [StreamChatTheme].
|
|
/// Modify it to change the widget appearance.
|
|
class UserListView extends StatefulWidget {
|
|
/// Instantiate a new UserListView
|
|
const UserListView({
|
|
Key key,
|
|
this.errorBuilder,
|
|
this.emptyBuilder,
|
|
this.filter,
|
|
this.options,
|
|
this.sort,
|
|
this.pagination,
|
|
this.onUserTap,
|
|
this.onUserLongPress,
|
|
this.userWidget,
|
|
this.userItemBuilder,
|
|
this.separatorBuilder,
|
|
this.onImageTap,
|
|
this.selectedUsers,
|
|
this.pullToRefresh = true,
|
|
this.groupAlphabetically = false,
|
|
this.crossAxisCount = 1,
|
|
}) : assert(
|
|
crossAxisCount == 1 || groupAlphabetically == false,
|
|
'Cannot group alphabetically when crossAxisCount > 1',
|
|
),
|
|
super(key: key);
|
|
|
|
/// The builder that will be used in case of error
|
|
final Widget Function(Error error) errorBuilder;
|
|
|
|
/// The builder used when the channel list is empty.
|
|
final WidgetBuilder emptyBuilder;
|
|
|
|
/// The query filters to use.
|
|
/// You can query on any of the custom fields you've defined on the [Channel].
|
|
/// You can also filter other built-in channel fields.
|
|
final Map<String, dynamic> filter;
|
|
|
|
/// Query channels options.
|
|
///
|
|
/// state: if true returns the Channel state
|
|
/// watch: if true listen to changes to this Channel in real time.
|
|
final Map<String, dynamic> options;
|
|
|
|
/// The sorting used for the channels matching the filters.
|
|
/// Sorting is based on field and direction, multiple sorting options can be provided.
|
|
/// You can sort based on last_updated, last_message_at, updated_at, created_at or member_count.
|
|
/// Direction can be ascending or descending.
|
|
final List<SortOption> sort;
|
|
|
|
/// Pagination parameters
|
|
/// limit: the number of users to return (max is 30)
|
|
/// offset: the offset (max is 1000)
|
|
/// message_limit: how many messages should be included to each channel
|
|
final PaginationParams pagination;
|
|
|
|
/// Function called when tapping on a channel
|
|
/// By default it calls [Navigator.push] building a [MaterialPageRoute]
|
|
/// with the widget [userWidget] as child.
|
|
final UserTapCallback onUserTap;
|
|
|
|
/// Function called when long pressing on a channel
|
|
final Function(User) onUserLongPress;
|
|
|
|
/// Widget used when opening a channel
|
|
final Widget userWidget;
|
|
|
|
/// Builder used to create a custom user preview
|
|
final UserItemBuilder userItemBuilder;
|
|
|
|
/// Builder used to create a custom item separator
|
|
final Function(BuildContext, int) separatorBuilder;
|
|
|
|
/// The function called when the image is tapped
|
|
final Function(User) onImageTap;
|
|
|
|
/// Set it to false to disable the pull-to-refresh widget
|
|
final bool pullToRefresh;
|
|
|
|
/// Sets a blue trailing checkMark in [ListUserItem] for all the [selectedUsers]
|
|
final Set<User> selectedUsers;
|
|
|
|
/// Set it to true to group users by their first character
|
|
///
|
|
/// defaults to false
|
|
final bool groupAlphabetically;
|
|
|
|
/// The number of children in the cross axis.
|
|
final int crossAxisCount;
|
|
|
|
@override
|
|
_UserListViewState createState() => _UserListViewState();
|
|
}
|
|
|
|
class _UserListViewState extends State<UserListView>
|
|
with WidgetsBindingObserver {
|
|
bool get _isListView => widget.crossAxisCount == 1;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
final usersBloc = UsersBloc.of(context);
|
|
usersBloc.queryUsers(
|
|
filter: widget.filter,
|
|
sort: widget.sort,
|
|
pagination: widget.pagination,
|
|
options: widget.options,
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final usersBloc = UsersBloc.of(context);
|
|
|
|
if (!widget.pullToRefresh) {
|
|
return _buildListView(usersBloc);
|
|
}
|
|
|
|
return RefreshIndicator(
|
|
onRefresh: () async {
|
|
return usersBloc.queryUsers(
|
|
filter: widget.filter,
|
|
sort: widget.sort,
|
|
options: widget.options,
|
|
pagination: widget.pagination,
|
|
);
|
|
},
|
|
child: _buildListView(usersBloc),
|
|
);
|
|
}
|
|
|
|
bool get isListAlreadySorted =>
|
|
widget.sort?.any((e) => e.field == 'name' && e.direction == 1) ?? false;
|
|
|
|
Stream<List<ListItem>> _buildUserStream(
|
|
UsersBlocState usersBlocState,
|
|
) {
|
|
return usersBlocState.usersStream.map(
|
|
(users) {
|
|
if (widget.groupAlphabetically) {
|
|
var temp = users;
|
|
if (!isListAlreadySorted) {
|
|
temp = users..sort((curr, next) => curr.name.compareTo(next.name));
|
|
}
|
|
final groupedUsers = <String, List<User>>{};
|
|
for (var e in temp) {
|
|
final alphabet = e.name[0]?.toUpperCase();
|
|
groupedUsers[alphabet] = [...groupedUsers[alphabet] ?? [], e];
|
|
}
|
|
final items = <ListItem>[];
|
|
for (var key in groupedUsers.keys) {
|
|
items.add(ListHeaderItem(key));
|
|
items.addAll(groupedUsers[key].map((e) => ListUserItem(e)));
|
|
}
|
|
return items;
|
|
}
|
|
return users.map((e) => ListUserItem(e)).toList();
|
|
},
|
|
);
|
|
}
|
|
|
|
StreamBuilder<List<ListItem>> _buildListView(
|
|
UsersBlocState usersBlocState,
|
|
) {
|
|
return StreamBuilder(
|
|
stream: _buildUserStream(usersBlocState),
|
|
builder: (context, snapshot) {
|
|
if (snapshot.hasError) {
|
|
if (snapshot.error is Error) {
|
|
print((snapshot.error as Error).stackTrace);
|
|
}
|
|
|
|
if (widget.errorBuilder != null) {
|
|
return widget.errorBuilder(snapshot.error);
|
|
}
|
|
|
|
var message = snapshot.error.toString();
|
|
if (snapshot.error is DioError) {
|
|
final dioError = snapshot.error as DioError;
|
|
if (dioError.type == DioErrorType.RESPONSE) {
|
|
message = dioError.message;
|
|
} else {
|
|
message = 'Check your connection and retry';
|
|
}
|
|
}
|
|
return Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: <Widget>[
|
|
Text.rich(
|
|
TextSpan(
|
|
children: [
|
|
WidgetSpan(
|
|
child: Padding(
|
|
padding: const EdgeInsets.only(
|
|
right: 2.0,
|
|
),
|
|
child: Icon(Icons.error_outline),
|
|
),
|
|
),
|
|
TextSpan(text: 'Error loading channels'),
|
|
],
|
|
),
|
|
style: Theme.of(context).textTheme.headline6,
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.only(
|
|
top: 16.0,
|
|
),
|
|
child: Text(message),
|
|
),
|
|
FlatButton(
|
|
onPressed: () {
|
|
usersBlocState.queryUsers(
|
|
filter: widget.filter,
|
|
sort: widget.sort,
|
|
pagination: widget.pagination,
|
|
options: widget.options,
|
|
);
|
|
},
|
|
child: Text('Retry'),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
if (!snapshot.hasData) {
|
|
return LayoutBuilder(
|
|
builder: (context, viewportConstraints) {
|
|
return SingleChildScrollView(
|
|
physics: AlwaysScrollableScrollPhysics(),
|
|
child: ConstrainedBox(
|
|
constraints: BoxConstraints(
|
|
minHeight: viewportConstraints.maxHeight,
|
|
),
|
|
child: Center(
|
|
child: CircularProgressIndicator(),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
final items = snapshot.data;
|
|
|
|
if (items.isEmpty && widget.emptyBuilder != null) {
|
|
return widget.emptyBuilder(context);
|
|
}
|
|
|
|
if (items.isEmpty && widget.emptyBuilder == null) {
|
|
return LayoutBuilder(
|
|
builder: (context, viewportConstraints) {
|
|
return SingleChildScrollView(
|
|
physics: AlwaysScrollableScrollPhysics(),
|
|
child: ConstrainedBox(
|
|
constraints: BoxConstraints(
|
|
minHeight: viewportConstraints.maxHeight,
|
|
),
|
|
child: Center(
|
|
child: Text('There are no users currently'),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
final child = _isListView
|
|
? ListView.separated(
|
|
physics: AlwaysScrollableScrollPhysics(),
|
|
itemCount: items.isNotEmpty ? items.length + 1 : items.length,
|
|
separatorBuilder: (_, index) {
|
|
if (widget.separatorBuilder != null) {
|
|
return widget.separatorBuilder(context, index);
|
|
}
|
|
return _separatorBuilder(context, index);
|
|
},
|
|
itemBuilder: (context, index) {
|
|
return _listItemBuilder(context, index, items);
|
|
},
|
|
)
|
|
: GridView.builder(
|
|
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
|
crossAxisCount: widget.crossAxisCount,
|
|
),
|
|
itemCount: items.isNotEmpty ? items.length + 1 : items.length,
|
|
physics: AlwaysScrollableScrollPhysics(),
|
|
itemBuilder: (context, index) {
|
|
return _gridItemBuilder(context, index, items);
|
|
},
|
|
);
|
|
|
|
return LazyLoadScrollView(
|
|
onEndOfPage: () async {
|
|
return _listenUserPagination(usersBlocState);
|
|
},
|
|
child: child,
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
Widget _listItemBuilder(BuildContext context, int i, List<ListItem> items) {
|
|
final usersProvider = UsersBloc.of(context);
|
|
if (i < items.length) {
|
|
final item = items[i];
|
|
return item.when(
|
|
headerItem: (header) {
|
|
return Container(
|
|
key: ValueKey<String>('HEADER-$header'),
|
|
color:
|
|
StreamChatTheme.of(context).colorTheme.black.withOpacity(0.05),
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 6),
|
|
child: Text(
|
|
header,
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 14.5,
|
|
color: StreamChatTheme.of(context)
|
|
.colorTheme
|
|
.black
|
|
.withOpacity(0.3)),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
userItem: (user) {
|
|
final selected = widget.selectedUsers?.contains(user) ?? false;
|
|
return Container(
|
|
key: ValueKey<String>('USER-${user.id}'),
|
|
child: widget.userItemBuilder != null
|
|
? widget.userItemBuilder(context, user, selected)
|
|
: UserItem(
|
|
user: user,
|
|
onTap: (user) => widget.onUserTap(user, widget.userWidget),
|
|
onLongPress: widget.onUserLongPress,
|
|
onImageTap: widget.onImageTap,
|
|
selected: selected,
|
|
),
|
|
);
|
|
},
|
|
);
|
|
} else {
|
|
return _buildQueryProgressIndicator(context, usersProvider);
|
|
}
|
|
}
|
|
|
|
Widget _gridItemBuilder(BuildContext context, int i, List<ListItem> items) {
|
|
final usersProvider = UsersBloc.of(context);
|
|
if (i < items.length) {
|
|
final item = items[i];
|
|
return item.when(
|
|
headerItem: (_) => Offstage(),
|
|
userItem: (user) {
|
|
final selected = widget.selectedUsers?.contains(user) ?? false;
|
|
return Container(
|
|
key: ValueKey<String>('USER-${user.id}'),
|
|
child: widget.userItemBuilder != null
|
|
? widget.userItemBuilder(context, user, selected)
|
|
: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
UserAvatar(
|
|
user: user,
|
|
borderRadius: BorderRadius.circular(32),
|
|
selected: selected,
|
|
constraints: BoxConstraints.tightFor(
|
|
height: 64,
|
|
width: 64,
|
|
),
|
|
onTap: (user) =>
|
|
widget.onUserTap(user, widget.userWidget),
|
|
onLongPress: widget.onUserLongPress,
|
|
),
|
|
SizedBox(height: 4),
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8),
|
|
child: Text(
|
|
user.name,
|
|
textAlign: TextAlign.center,
|
|
maxLines: 2,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 12,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
);
|
|
} else {
|
|
return _buildQueryProgressIndicator(context, usersProvider);
|
|
}
|
|
}
|
|
|
|
Widget _buildQueryProgressIndicator(context, UsersBlocState usersProvider) {
|
|
return StreamBuilder<bool>(
|
|
stream: usersProvider.queryUsersLoading,
|
|
initialData: false,
|
|
builder: (context, snapshot) {
|
|
if (snapshot.hasError) {
|
|
return Container(
|
|
color: StreamChatTheme.of(context)
|
|
.colorTheme
|
|
.accentRed
|
|
.withOpacity(.2),
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 16.0),
|
|
child: Center(
|
|
child: Text('Error loading users'),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
return Container(
|
|
height: 100,
|
|
padding: EdgeInsets.all(32),
|
|
child: Center(
|
|
child: snapshot.data ? CircularProgressIndicator() : Container(),
|
|
),
|
|
);
|
|
});
|
|
}
|
|
|
|
Widget _separatorBuilder(context, i) {
|
|
return Container(
|
|
height: 1,
|
|
color: Theme.of(context).brightness == Brightness.dark
|
|
? StreamChatTheme.of(context).colorTheme.white.withOpacity(0.1)
|
|
: StreamChatTheme.of(context).colorTheme.black.withOpacity(0.1),
|
|
);
|
|
}
|
|
|
|
void _listenUserPagination(UsersBlocState usersProvider) {
|
|
usersProvider.queryUsers(
|
|
filter: widget.filter,
|
|
sort: widget.sort,
|
|
pagination: widget.pagination.copyWith(
|
|
offset: usersProvider.users?.length ?? 0,
|
|
),
|
|
options: widget.options,
|
|
);
|
|
}
|
|
|
|
@override
|
|
void didUpdateWidget(UserListView oldWidget) {
|
|
super.didUpdateWidget(oldWidget);
|
|
if (widget.filter?.toString() != oldWidget.filter?.toString() ||
|
|
jsonEncode(widget.sort) != jsonEncode(oldWidget.sort) ||
|
|
widget.pagination?.toJson()?.toString() !=
|
|
oldWidget.pagination?.toJson()?.toString() ||
|
|
widget.options?.toString() != oldWidget.options?.toString()) {
|
|
final usersBloc = UsersBloc.of(context);
|
|
usersBloc.queryUsers(
|
|
filter: widget.filter,
|
|
sort: widget.sort,
|
|
pagination: widget.pagination,
|
|
options: widget.options,
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
abstract class ListItem {
|
|
String get key {
|
|
if (this is ListHeaderItem) {
|
|
final header = (this as ListHeaderItem).heading;
|
|
return 'HEADER-$header';
|
|
}
|
|
if (this is ListUserItem) {
|
|
final user = (this as ListUserItem).user;
|
|
return 'USER-${user.id}';
|
|
}
|
|
}
|
|
|
|
Widget when({
|
|
@required Widget Function(String heading) headerItem,
|
|
@required Widget Function(User user) userItem,
|
|
}) {
|
|
if (this is ListHeaderItem) {
|
|
return headerItem((this as ListHeaderItem).heading);
|
|
}
|
|
if (this is ListUserItem) {
|
|
return userItem((this as ListUserItem).user);
|
|
}
|
|
}
|
|
}
|
|
|
|
class ListHeaderItem extends ListItem {
|
|
final String heading;
|
|
|
|
ListHeaderItem(this.heading);
|
|
}
|
|
|
|
class ListUserItem extends ListItem {
|
|
final User user;
|
|
|
|
ListUserItem(this.user);
|
|
}
|