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

example/lib/chips_input_text_field.dart

@@ -22,7 +22,7 @@ class ChipsInputTextField<T> extends StatefulWidget {
     this.focusNode,
     this.onChipAdded,
     this.onChipRemoved,
-    this.hint = 'Type a name or group',
+    this.hint = 'Type a name',
   }) : super(key: key);
 
   @override
@@ -61,7 +61,16 @@ class ChipInputTextFieldState<T> extends State<ChipsInputTextField<T>> {
 
   @override
   Widget build(BuildContext context) {
-    return Material(
+    return GestureDetector(
+      onTap: _pauseItemAddition
+          ? () {
+              setState(() {
+                _pauseItemAddition = false;
+                widget.focusNode?.requestFocus();
+              });
+            }
+          : null,
+      child: Material(
         elevation: 1,
         color: Colors.white,
         child: Container(
@@ -122,11 +131,14 @@ class ChipInputTextFieldState<T> extends State<ChipsInputTextField<T>> {
                     alignment: Alignment.bottomCenter,
                     child: IconButton(
                       icon: Icon(
-                      _chips.isEmpty ? StreamIcons.user : StreamIcons.user_add,
+                        _chips.isEmpty
+                            ? StreamIcons.user
+                            : StreamIcons.user_add,
                         color: Colors.black.withOpacity(0.5),
                         size: 24,
                       ),
-                    onPressed: !_pauseItemAddition ? null : resumeItemAddition,
+                      onPressed:
+                          !_pauseItemAddition ? null : resumeItemAddition,
                       alignment: Alignment.topRight,
                       visualDensity: VisualDensity.compact,
                       padding: const EdgeInsets.all(0),
@@ -142,6 +154,7 @@ class ChipInputTextFieldState<T> extends State<ChipsInputTextField<T>> {
             ),
           ),
         ),
+      ),
     );
   }
 }

example/lib/main.dart

@@ -111,6 +111,7 @@ class ChannelListPage extends StatelessWidget {
                 ),
                 ListTile(
                   onTap: () {
+                    Navigator.pop(context);
                     Navigator.push(
                       context,
                       MaterialPageRoute(builder: (_) => NewChatScreen()),
@@ -126,6 +127,7 @@ class ChannelListPage extends StatelessWidget {
                 ),
                 ListTile(
                   onTap: () {
+                    Navigator.pop(context);
                     Navigator.push(
                       context,
                       MaterialPageRoute(builder: (_) => NewGroupChatScreen()),
@@ -177,7 +179,10 @@ class ChannelListPage extends StatelessWidget {
           filter: {
             'members': {
               '\$in': [user.id],
-            }
+            },
+            'draft': {
+              r'$ne': true,
+            },
           },
           options: {
             'presence': true,
@@ -283,12 +288,17 @@ class _NewChatScreenState extends State<NewChatScreen> {
 
   final _selectedUsers = <User>{};
 
+  final _searchFocusNode = FocusNode();
+  final _messageInputFocusNode = FocusNode();
+
   bool _isSearchActive = false;
 
   Channel channel;
 
   Timer _debounce;
 
+  bool _showUserList = true;
+
   void _userNameListener() {
     if (_debounce?.isActive ?? false) _debounce.cancel();
     _debounce = Timer(const Duration(milliseconds: 350), () {
@@ -305,10 +315,50 @@ class _NewChatScreenState extends State<NewChatScreen> {
     super.initState();
     channel = StreamChat.of(context).client.channel('messaging');
     _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
   void dispose() {
+    _searchFocusNode.dispose();
+    _messageInputFocusNode.dispose();
     _controller?.clear();
     _controller?.removeListener(_userNameListener);
     _controller?.dispose();
@@ -335,14 +385,13 @@ class _NewChatScreenState extends State<NewChatScreen> {
       body: StreamChannel(
         showLoading: false,
         channel: channel,
-        child: UsersBloc(
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             ChipsInputTextField<User>(
               key: _chipInputTextFieldStateKey,
               controller: _controller,
-                focusNode: FocusNode(),
+              focusNode: _searchFocusNode,
               chipBuilder: (context, user) {
                 return Stack(
                   alignment: AlignmentDirectional.centerStart,
@@ -410,6 +459,7 @@ class _NewChatScreenState extends State<NewChatScreen> {
                   ),
                 ),
               ),
+            if (_showUserList)
               Container(
                 width: double.maxFinite,
                 decoration: BoxDecoration(
@@ -439,6 +489,8 @@ class _NewChatScreenState extends State<NewChatScreen> {
                 ),
               ),
             Expanded(
+              child: _showUserList
+                  ? UsersBloc(
                       child: UserListView(
                         selectedUsers: _selectedUsers,
                         groupAlphabetically: _isSearchActive ? false : true,
@@ -459,7 +511,10 @@ class _NewChatScreenState extends State<NewChatScreen> {
                           if (_userNameQuery.isNotEmpty)
                             'name': {
                               r'$autocomplete': _userNameQuery,
-                      }
+                            },
+                          'id': {
+                            r'$ne': StreamChat.of(context).user.id,
+                          },
                         },
                         sort: [
                           SortOption(
@@ -487,7 +542,8 @@ class _NewChatScreenState extends State<NewChatScreen> {
                                             color: Colors.grey,
                                           ),
                                         ),
-                                  Text('No user matches these keywords...'),
+                                        Text(
+                                            'No user matches these keywords...'),
                                       ],
                                     ),
                                   ),
@@ -497,19 +553,31 @@ class _NewChatScreenState extends State<NewChatScreen> {
                           );
                         },
                       ),
+                    )
+                  : MessageListView(),
             ),
             MessageInput(
-                preMessageSending: (message) async {
+              focusNode: _messageInputFocusNode,
-                  channel.extraData = {
+              onMessageSent: (m) {
-                    'members': [
+                if (!m.isEphemeral) {
-                      ..._selectedUsers.map((e) => e.id),
+                  _updateChannelAndNavigate(context);
-                      channel.client.state.user.id,
+                } else {
-                    ],
+                  channel.on('message.new').first.then((_) {
-                  };
+                    _updateChannelAndNavigate(context);
-                  await channel.watch();
+                  });
-                  return message;
+                }
               },
-                onMessageSent: (_) {
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  void _updateChannelAndNavigate(BuildContext context) {
+    channel.update({
+      'draft': false,
+    });
     Navigator.pushReplacement(
       context,
       MaterialPageRoute(
@@ -521,13 +589,6 @@ class _NewChatScreenState extends State<NewChatScreen> {
         },
       ),
     );
-                },
-              ),
-            ],
-          ),
-        ),
-      ),
-    );
   }
 }
 
@@ -761,6 +822,9 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                   if (_userNameQuery.isNotEmpty)
                     'name': {
                       r'$autocomplete': _userNameQuery,
+                    },
+                  'id': {
+                    r'$ne': StreamChat.of(context).user.id,
                   }
                 },
                 sort: [
@@ -832,10 +896,12 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
 
   void _groupNameListener() {
     final name = _groupNameController.text;
+    if (mounted) {
       setState(() {
         _isGroupNameEmpty = name.isEmpty;
       });
     }
+  }
 
   @override
   void initState() {

example/pubspec.yaml

@@ -1,6 +1,6 @@
 name: example
 description: A new Flutter project.
-version: 1.0.61+63
+version: 1.0.62+64
 
 environment:
   sdk: ">=2.2.2 <3.0.0"

lib/src/message_input.dart

@@ -104,6 +104,7 @@ class MessageInput extends StatefulWidget {
     this.actions,
     this.actionsLocation = ActionsLocation.left,
     this.attachmentThumbnailBuilders,
+    this.focusNode,
   }) : super(key: key);
 
   /// Message to edit
@@ -149,6 +150,9 @@ class MessageInput extends StatefulWidget {
   /// Map that defines a thumbnail builder for an attachment type
   final Map<String, AttachmentThumbnailBuilder> attachmentThumbnailBuilders;
 
+  /// The focus node associated to the TextField
+  final FocusNode focusNode;
+
   @override
   MessageInputState createState() => MessageInputState();
 
@@ -169,10 +173,10 @@ class MessageInput extends StatefulWidget {
 
 class MessageInputState extends State<MessageInput> {
   final List<_SendingAttachment> _attachments = [];
-  final _focusNode = FocusNode();
   final List<User> _mentionedUsers = [];
 
   final _imagePicker = ImagePicker();
+  FocusNode _focusNode;
   bool _inputEnabled = true;
   bool _messageIsPresent = false;
   bool _animateContainer = true;
@@ -1708,6 +1712,8 @@ class MessageInputState extends State<MessageInput> {
   void initState() {
     super.initState();
 
+    _focusNode = widget.focusNode ?? FocusNode();
+
     _emojiNames = Emoji.all().map((e) => e.name);
 
     if (!kIsWeb) {

lib/src/message_list_view.dart

@@ -180,7 +180,26 @@ class _MessageListViewState extends State<MessageListView> {
             ? streamChannel.channel.state.threads[widget.parentMessage.id]
             : streamChannel.channel.state.messages,
         builder: (context, snapshot) {
+          if (!snapshot.hasData) {
+            return Center(
+              child: CircularProgressIndicator(),
+            );
+          }
+
           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(
             alignment: Alignment.center,
             children: [

lib/src/url_attachment.dart

@@ -4,9 +4,9 @@ import 'package:stream_chat_flutter/src/utils.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 class UrlAttachment extends StatelessWidget {
-  Attachment urlAttachment;
+  final Attachment urlAttachment;
-  String hostDisplayName;
+  final String hostDisplayName;
-  EdgeInsets textPadding;
+  final EdgeInsets textPadding;
 
   UrlAttachment({
     @required this.urlAttachment,