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

swap user list with message list and create channel with draft: true

Browse Source
This commit is contained in:
Salvatore Giordano
2020-11-20 18:03:33 +01:00
parent 5352c2ac4b
commit 682c0b3e10
6 changed files with 339 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/lib/chips_input_text_field.dart
+85 -72
View File
@@ -22,7 +22,7 @@ class ChipsInputTextField<T> extends StatefulWidget {
this.focusNode, this.focusNode,
this.onChipAdded, this.onChipAdded,
this.onChipRemoved, this.onChipRemoved,
this.hint = 'Type a name or group', this.hint = 'Type a name',
}) : super(key: key); }) : super(key: key);
@override @override
@@ -61,83 +61,96 @@ class ChipInputTextFieldState<T> extends State<ChipsInputTextField<T>> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Material( return GestureDetector(
elevation: 1, onTap: _pauseItemAddition
color: Colors.white, ? () {
child: Container( setState(() {
child: Padding( _pauseItemAddition = false;
padding: const EdgeInsets.fromLTRB(16, 16, 16, 16), widget.focusNode?.requestFocus();
child: IntrinsicHeight( });
child: Row( }
crossAxisAlignment: CrossAxisAlignment.baseline, : null,
children: [ child: Material(
Padding( elevation: 1,
padding: const EdgeInsets.symmetric(vertical: 4.0), color: Colors.white,
child: Text( child: Container(
'TO:', child: Padding(
style: TextStyle( padding: const EdgeInsets.fromLTRB(16, 16, 16, 16),
fontSize: 12, child: IntrinsicHeight(
color: Colors.black.withOpacity(0.5), child: Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0),
child: Text(
'TO:',
style: TextStyle(
fontSize: 12,
color: Colors.black.withOpacity(0.5),
),
), ),
), ),
), SizedBox(width: 12),
SizedBox(width: 12), Expanded(
Expanded( child: Column(
child: Column( crossAxisAlignment: CrossAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min,
mainAxisSize: MainAxisSize.min, children: [
children: [ Wrap(
Wrap( spacing: 8.0,
spacing: 8.0, runSpacing: 4.0,
runSpacing: 4.0, children: _chips.map((item) {
children: _chips.map((item) { return widget.chipBuilder(context, item);
return widget.chipBuilder(context, item); }).toList(),
}).toList(), ),
), if (!_pauseItemAddition)
if (!_pauseItemAddition) TextField(
TextField( controller: widget.controller,
controller: widget.controller, onChanged: widget.onInputChanged,
onChanged: widget.onInputChanged, focusNode: widget.focusNode,
focusNode: widget.focusNode, decoration: InputDecoration(
decoration: InputDecoration( isDense: true,
isDense: true, border: InputBorder.none,
border: InputBorder.none, focusedBorder: InputBorder.none,
focusedBorder: InputBorder.none, enabledBorder: InputBorder.none,
enabledBorder: InputBorder.none, errorBorder: InputBorder.none,
errorBorder: InputBorder.none, disabledBorder: InputBorder.none,
disabledBorder: InputBorder.none, contentPadding: const EdgeInsets.only(top: 4.0),
contentPadding: const EdgeInsets.only(top: 4.0), hintText: widget.hint,
hintText: widget.hint, hintStyle: TextStyle(
hintStyle: TextStyle( color: Colors.black.withOpacity(0.5),
color: Colors.black.withOpacity(0.5), fontSize: 14,
fontSize: 14, ),
), ),
), ),
), ],
],
),
),
SizedBox(width: 12),
Align(
alignment: Alignment.bottomCenter,
child: IconButton(
icon: Icon(
_chips.isEmpty ? StreamIcons.user : StreamIcons.user_add,
color: Colors.black.withOpacity(0.5),
size: 24,
),
onPressed: !_pauseItemAddition ? null : resumeItemAddition,
alignment: Alignment.topRight,
visualDensity: VisualDensity.compact,
padding: const EdgeInsets.all(0),
splashRadius: 24,
constraints: BoxConstraints.tightFor(
height: 24,
width: 24,
), ),
), ),
), SizedBox(width: 12),
], Align(
alignment: Alignment.bottomCenter,
child: IconButton(
icon: Icon(
_chips.isEmpty
? StreamIcons.user
: StreamIcons.user_add,
color: Colors.black.withOpacity(0.5),
size: 24,
),
onPressed:
!_pauseItemAddition ? null : resumeItemAddition,
alignment: Alignment.topRight,
visualDensity: VisualDensity.compact,
padding: const EdgeInsets.all(0),
splashRadius: 24,
constraints: BoxConstraints.tightFor(
height: 24,
width: 24,
),
),
),
],
),
), ),
), ),
), ),
example/lib/main.dart
+224 -158
View File
@@ -111,6 +111,7 @@ class ChannelListPage extends StatelessWidget {
), ),
ListTile( ListTile(
onTap: () { onTap: () {
Navigator.pop(context);
Navigator.push( Navigator.push(
context, context,
MaterialPageRoute(builder: (_) => NewChatScreen()), MaterialPageRoute(builder: (_) => NewChatScreen()),
@@ -126,6 +127,7 @@ class ChannelListPage extends StatelessWidget {
), ),
ListTile( ListTile(
onTap: () { onTap: () {
Navigator.pop(context);
Navigator.push( Navigator.push(
context, context,
MaterialPageRoute(builder: (_) => NewGroupChatScreen()), MaterialPageRoute(builder: (_) => NewGroupChatScreen()),
@@ -177,7 +179,10 @@ class ChannelListPage extends StatelessWidget {
filter: { filter: {
'members': { 'members': {
'\$in': [user.id], '\$in': [user.id],
} },
'draft': {
r'$ne': true,
},
}, },
options: { options: {
'presence': true, 'presence': true,
@@ -283,12 +288,17 @@ class _NewChatScreenState extends State<NewChatScreen> {
final _selectedUsers = <User>{}; final _selectedUsers = <User>{};
final _searchFocusNode = FocusNode();
final _messageInputFocusNode = FocusNode();
bool _isSearchActive = false; bool _isSearchActive = false;
Channel channel; Channel channel;
Timer _debounce; Timer _debounce;
bool _showUserList = true;
void _userNameListener() { void _userNameListener() {
if (_debounce?.isActive ?? false) _debounce.cancel(); if (_debounce?.isActive ?? false) _debounce.cancel();
_debounce = Timer(const Duration(milliseconds: 350), () { _debounce = Timer(const Duration(milliseconds: 350), () {
@@ -305,10 +315,50 @@ class _NewChatScreenState extends State<NewChatScreen> {
super.initState(); super.initState();
channel = StreamChat.of(context).client.channel('messaging'); channel = StreamChat.of(context).client.channel('messaging');
_controller = TextEditingController()..addListener(_userNameListener); _controller = TextEditingController()..addListener(_userNameListener);
_searchFocusNode.addListener(() async {
if (_searchFocusNode.hasFocus && !_showUserList) {
if (channel.extraData['draft'] == true) {
await channel.stopWatching();
channel.dispose();
channel.client.state.channels.remove(channel.cid);
}
setState(() {
_showUserList = true;
});
}
});
_messageInputFocusNode.addListener(() async {
if (_messageInputFocusNode.hasFocus && _selectedUsers.isNotEmpty) {
final chatState = StreamChat.of(context);
channel = chatState.client.channel(
'messaging',
extraData: {
'members': [
..._selectedUsers.map((e) => e.id),
chatState.user.id,
],
'draft': true,
},
);
if (!chatState.client.state.channels.containsKey(channel.cid)) {
await channel.watch();
}
setState(() {
_showUserList = false;
});
}
});
} }
@override @override
void dispose() { void dispose() {
_searchFocusNode.dispose();
_messageInputFocusNode.dispose();
_controller?.clear(); _controller?.clear();
_controller?.removeListener(_userNameListener); _controller?.removeListener(_userNameListener);
_controller?.dispose(); _controller?.dispose();
@@ -335,81 +385,81 @@ class _NewChatScreenState extends State<NewChatScreen> {
body: StreamChannel( body: StreamChannel(
showLoading: false, showLoading: false,
channel: channel, channel: channel,
child: UsersBloc( child: Column(
child: Column( crossAxisAlignment: CrossAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start, children: [
children: [ ChipsInputTextField<User>(
ChipsInputTextField<User>( key: _chipInputTextFieldStateKey,
key: _chipInputTextFieldStateKey, controller: _controller,
controller: _controller, focusNode: _searchFocusNode,
focusNode: FocusNode(), chipBuilder: (context, user) {
chipBuilder: (context, user) { return Stack(
return Stack( alignment: AlignmentDirectional.centerStart,
alignment: AlignmentDirectional.centerStart, children: [
children: [ Container(
Container( decoration: BoxDecoration(
decoration: BoxDecoration( color: Colors.black.withOpacity(0.05),
color: Colors.black.withOpacity(0.05), borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(12), ),
), padding: const EdgeInsets.only(left: 24),
padding: const EdgeInsets.only(left: 24), child: Padding(
child: Padding( padding: const EdgeInsets.fromLTRB(8, 4, 12, 4),
padding: const EdgeInsets.fromLTRB(8, 4, 12, 4), child: Text(
child: Text( user.name,
user.name, style: TextStyle(color: Colors.black),
style: TextStyle(color: Colors.black),
),
), ),
), ),
UserAvatar( ),
user: user, UserAvatar(
constraints: BoxConstraints.tightFor( user: user,
height: 24, constraints: BoxConstraints.tightFor(
width: 24, height: 24,
width: 24,
),
),
],
);
},
onChipAdded: (user) {
setState(() => _selectedUsers.add(user));
},
onChipRemoved: (user) {
setState(() => _selectedUsers.remove(user));
},
),
if (!_isSearchActive && !_selectedUsers.isNotEmpty)
Container(
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => NewGroupChatScreen()),
);
},
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Row(
children: [
NeumorphicButton(
child: Icon(
StreamIcons.group,
color: Color(0xFF006CFF),
),
), ),
), SizedBox(width: 8),
], Text(
); 'Create a Group',
}, style: TextStyle(
onChipAdded: (user) { fontWeight: FontWeight.bold,
setState(() => _selectedUsers.add(user)); fontSize: 16,
},
onChipRemoved: (user) {
setState(() => _selectedUsers.remove(user));
},
),
if (!_isSearchActive && !_selectedUsers.isNotEmpty)
Container(
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => NewGroupChatScreen()),
);
},
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Row(
children: [
NeumorphicButton(
child: Icon(
StreamIcons.group,
color: Color(0xFF006CFF),
),
), ),
SizedBox(width: 8), ),
Text( ],
'Create a Group',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
],
),
), ),
), ),
), ),
),
if (_showUserList)
Container( Container(
width: double.maxFinite, width: double.maxFinite,
decoration: BoxDecoration( decoration: BoxDecoration(
@@ -438,97 +488,108 @@ class _NewChatScreenState extends State<NewChatScreen> {
), ),
), ),
), ),
Expanded( Expanded(
child: UserListView( child: _showUserList
selectedUsers: _selectedUsers, ? UsersBloc(
groupAlphabetically: _isSearchActive ? false : true, child: UserListView(
onUserTap: (user, _) { selectedUsers: _selectedUsers,
_controller.clear(); groupAlphabetically: _isSearchActive ? false : true,
if (!_selectedUsers.contains(user)) { onUserTap: (user, _) {
_chipInputTextFieldState _controller.clear();
..addItem(user) if (!_selectedUsers.contains(user)) {
..pauseItemAddition(); _chipInputTextFieldState
} else { ..addItem(user)
_chipInputTextFieldState.removeItem(user); ..pauseItemAddition();
} } else {
}, _chipInputTextFieldState.removeItem(user);
pagination: PaginationParams( }
limit: 25, },
), pagination: PaginationParams(
filter: { limit: 25,
if (_userNameQuery.isNotEmpty) ),
'name': { filter: {
r'$autocomplete': _userNameQuery, if (_userNameQuery.isNotEmpty)
} 'name': {
}, r'$autocomplete': _userNameQuery,
sort: [ },
SortOption( 'id': {
'name', r'$ne': StreamChat.of(context).user.id,
direction: 1, },
), },
], sort: [
emptyBuilder: (_) { SortOption(
return LayoutBuilder( 'name',
builder: (context, viewportConstraints) { direction: 1,
return SingleChildScrollView( ),
physics: AlwaysScrollableScrollPhysics(), ],
child: ConstrainedBox( emptyBuilder: (_) {
constraints: BoxConstraints( return LayoutBuilder(
minHeight: viewportConstraints.maxHeight, builder: (context, viewportConstraints) {
), return SingleChildScrollView(
child: Center( physics: AlwaysScrollableScrollPhysics(),
child: Column( child: ConstrainedBox(
children: [ constraints: BoxConstraints(
Padding( minHeight: viewportConstraints.maxHeight,
padding: const EdgeInsets.all(24), ),
child: Icon( child: Center(
StreamIcons.search, child: Column(
size: 96, children: [
color: Colors.grey, Padding(
padding: const EdgeInsets.all(24),
child: Icon(
StreamIcons.search,
size: 96,
color: Colors.grey,
),
),
Text(
'No user matches these keywords...'),
],
), ),
), ),
Text('No user matches these keywords...'), ),
], );
), },
), );
), },
); ),
}, )
); : MessageListView(),
}, ),
), MessageInput(
), focusNode: _messageInputFocusNode,
MessageInput( onMessageSent: (m) {
preMessageSending: (message) async { if (!m.isEphemeral) {
channel.extraData = { _updateChannelAndNavigate(context);
'members': [ } else {
..._selectedUsers.map((e) => e.id), channel.on('message.new').first.then((_) {
channel.client.state.user.id, _updateChannelAndNavigate(context);
], });
}; }
await channel.watch(); },
return message; ),
}, ],
onMessageSent: (_) {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) {
return StreamChannel(
child: ChannelPage(),
channel: channel,
);
},
),
);
},
),
],
),
), ),
), ),
); );
} }
void _updateChannelAndNavigate(BuildContext context) {
channel.update({
'draft': false,
});
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) {
return StreamChannel(
child: ChannelPage(),
channel: channel,
);
},
),
);
}
} }
class NewGroupChatScreen extends StatefulWidget { class NewGroupChatScreen extends StatefulWidget {
@@ -761,7 +822,10 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
if (_userNameQuery.isNotEmpty) if (_userNameQuery.isNotEmpty)
'name': { 'name': {
r'$autocomplete': _userNameQuery, r'$autocomplete': _userNameQuery,
} },
'id': {
r'$ne': StreamChat.of(context).user.id,
}
}, },
sort: [ sort: [
SortOption( SortOption(
@@ -832,9 +896,11 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
void _groupNameListener() { void _groupNameListener() {
final name = _groupNameController.text; final name = _groupNameController.text;
setState(() { if (mounted) {
_isGroupNameEmpty = name.isEmpty; setState(() {
}); _isGroupNameEmpty = name.isEmpty;
});
}
} }
@override @override
example/pubspec.yaml
+1 -1
View File
@@ -1,6 +1,6 @@
name: example name: example
description: A new Flutter project. description: A new Flutter project.
version: 1.0.61+63 version: 1.0.62+64
environment: environment:
sdk: ">=2.2.2 <3.0.0" sdk: ">=2.2.2 <3.0.0"
lib/src/message_input.dart
+7 -1
View File
@@ -104,6 +104,7 @@ class MessageInput extends StatefulWidget {
this.actions, this.actions,
this.actionsLocation = ActionsLocation.left, this.actionsLocation = ActionsLocation.left,
this.attachmentThumbnailBuilders, this.attachmentThumbnailBuilders,
this.focusNode,
}) : super(key: key); }) : super(key: key);
/// Message to edit /// Message to edit
@@ -149,6 +150,9 @@ class MessageInput extends StatefulWidget {
/// Map that defines a thumbnail builder for an attachment type /// Map that defines a thumbnail builder for an attachment type
final Map<String, AttachmentThumbnailBuilder> attachmentThumbnailBuilders; final Map<String, AttachmentThumbnailBuilder> attachmentThumbnailBuilders;
/// The focus node associated to the TextField
final FocusNode focusNode;
@override @override
MessageInputState createState() => MessageInputState(); MessageInputState createState() => MessageInputState();
@@ -169,10 +173,10 @@ class MessageInput extends StatefulWidget {
class MessageInputState extends State<MessageInput> { class MessageInputState extends State<MessageInput> {
final List<_SendingAttachment> _attachments = []; final List<_SendingAttachment> _attachments = [];
final _focusNode = FocusNode();
final List<User> _mentionedUsers = []; final List<User> _mentionedUsers = [];
final _imagePicker = ImagePicker(); final _imagePicker = ImagePicker();
FocusNode _focusNode;
bool _inputEnabled = true; bool _inputEnabled = true;
bool _messageIsPresent = false; bool _messageIsPresent = false;
bool _animateContainer = true; bool _animateContainer = true;
@@ -1708,6 +1712,8 @@ class MessageInputState extends State<MessageInput> {
void initState() { void initState() {
super.initState(); super.initState();
_focusNode = widget.focusNode ?? FocusNode();
_emojiNames = Emoji.all().map((e) => e.name); _emojiNames = Emoji.all().map((e) => e.name);
if (!kIsWeb) { if (!kIsWeb) {
lib/src/message_list_view.dart
+19
View File
@@ -180,7 +180,26 @@ class _MessageListViewState extends State<MessageListView> {
? streamChannel.channel.state.threads[widget.parentMessage.id] ? streamChannel.channel.state.threads[widget.parentMessage.id]
: streamChannel.channel.state.messages, : streamChannel.channel.state.messages,
builder: (context, snapshot) { builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(),
);
}
final messages = snapshot.data?.reversed?.toList() ?? []; final messages = snapshot.data?.reversed?.toList() ?? [];
if (messages.isEmpty) {
return Center(
child: Text(
'No chats here yet...',
style: TextStyle(
fontSize: 12,
color: Colors.black.withOpacity(.5),
),
),
);
}
return Stack( return Stack(
alignment: Alignment.center, alignment: Alignment.center,
children: [ children: [
lib/src/url_attachment.dart
+3 -3
View File
@@ -4,9 +4,9 @@ import 'package:stream_chat_flutter/src/utils.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart'; import 'package:stream_chat_flutter/stream_chat_flutter.dart';
class UrlAttachment extends StatelessWidget { class UrlAttachment extends StatelessWidget {
Attachment urlAttachment; final Attachment urlAttachment;
String hostDisplayName; final String hostDisplayName;
EdgeInsets textPadding; final EdgeInsets textPadding;
UrlAttachment({ UrlAttachment({
@required this.urlAttachment, @required this.urlAttachment,