temp push

example/lib/chips_input_text_field.dart

@@ -0,0 +1,142 @@
+import 'package:flutter/material.dart';
+import 'package:stream_chat_flutter/src/stream_icons.dart';
+
+typedef ChipBuilder<T> = Widget Function(BuildContext context, T chip);
+typedef OnChipAdded<T> = void Function(T chip);
+typedef OnChipRemoved<T> = void Function(T chip);
+
+class ChipsInputTextField<T> extends StatefulWidget {
+  final TextEditingController controller;
+  final FocusNode focusNode;
+  final ValueChanged<String> onInputChanged;
+  final ChipBuilder<T> chipBuilder;
+  final OnChipAdded<T> onChipAdded;
+  final OnChipRemoved<T> onChipRemoved;
+  final String hint;
+
+  const ChipsInputTextField({
+    Key key,
+    @required this.chipBuilder,
+    @required this.controller,
+    this.onInputChanged,
+    this.focusNode,
+    this.onChipAdded,
+    this.onChipRemoved,
+    this.hint = 'Type a name or group',
+  }) : super(key: key);
+
+  @override
+  ChipInputTextFieldState<T> createState() => ChipInputTextFieldState<T>();
+}
+
+class ChipInputTextFieldState<T> extends State<ChipsInputTextField<T>> {
+  final _chips = <T>{};
+  bool _pauseItemAddition = false;
+
+  void addItem(T item) {
+    if (!_pauseItemAddition) {
+      setState(() => _chips.add(item));
+      if (widget.onChipAdded != null) widget.onChipAdded(item);
+    }
+  }
+
+  void removeItem(T item) {
+    setState(() {
+      _chips.remove(item);
+      if (_chips.isEmpty) resumeItemAddition();
+    });
+    if (widget.focusNode != null) widget.focusNode.requestFocus();
+    if (widget.onChipRemoved != null) widget.onChipRemoved(item);
+  }
+
+  void pauseItemAddition() {
+    if (!_pauseItemAddition) {
+      setState(() => _pauseItemAddition = true);
+    }
+  }
+
+  void resumeItemAddition() {
+    if (_pauseItemAddition) {
+      setState(() => _pauseItemAddition = false);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      elevation: 4,
+      color: Colors.white,
+      child: Container(
+        child: Padding(
+          padding: const EdgeInsets.symmetric(
+            vertical: 16.0,
+            horizontal: 16.0,
+          ),
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Padding(
+                padding: const EdgeInsets.symmetric(vertical: 10.0),
+                child: Text(
+                  'TO:',
+                  style: TextStyle(
+                    fontSize: 16,
+                    fontWeight: FontWeight.w500,
+                  ),
+                ),
+              ),
+              SizedBox(width: 12),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Wrap(
+                      spacing: 4.0,
+                      runSpacing: 4.0,
+                      children: _chips.map((item) {
+                        return widget.chipBuilder(context, item);
+                      }).toList(),
+                    ),
+                    if (!_pauseItemAddition) ...[
+                      if (_chips.isNotEmpty) SizedBox(height: 4),
+                      TextField(
+                        controller: widget.controller,
+                        onChanged: widget.onInputChanged,
+                        focusNode: widget.focusNode,
+                        style: TextStyle(fontSize: 18),
+                        decoration: InputDecoration(
+                            isDense: true,
+                            border: InputBorder.none,
+                            focusedBorder: InputBorder.none,
+                            enabledBorder: InputBorder.none,
+                            errorBorder: InputBorder.none,
+                            disabledBorder: InputBorder.none,
+                            contentPadding: const EdgeInsets.symmetric(
+                              vertical: 8,
+                            ),
+                            hintText: widget.hint,
+                            hintStyle: TextStyle(fontSize: 18)),
+                      ),
+                    ]
+                  ],
+                ),
+              ),
+              SizedBox(width: 12),
+              IconButton(
+                icon: Icon(
+                  _chips.isEmpty ? StreamIcons.user : StreamIcons.user_add,
+                ),
+                onPressed: () {
+                  resumeItemAddition();
+                },
+                visualDensity: VisualDensity.compact,
+                padding: const EdgeInsets.all(0),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

example/lib/main.dart

@@ -6,6 +6,7 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_secure_storage/flutter_secure_storage.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
+import 'chips_input_text_field.dart';
 
 import 'notifications_service.dart';
 
@@ -268,7 +269,7 @@ class CreateChannelPage extends StatefulWidget {
 }
 
 class _CreateChannelPageState extends State<CreateChannelPage> {
-  List<User> selectedUsers = [];
+  final selectedUsers = <User>{};
 
   @override
   Widget build(BuildContext context) {
@@ -282,7 +283,7 @@ class _CreateChannelPageState extends State<CreateChannelPage> {
         ),
       ),
       floatingActionButton:
-          selectedUsers.isNotEmpty ? _buildFAB(context) : SizedBox(),
+          selectedUsers.isNotEmpty ? _buildFAB(context) : null,
       body: _buildListView(),
     );
   }
@@ -325,7 +326,7 @@ class _CreateChannelPageState extends State<CreateChannelPage> {
           }
         }
 
-        _createChannel(context, selectedUsers, name);
+        _createChannel(context, selectedUsers.toList(), name);
       },
     );
   }
@@ -407,10 +408,44 @@ class NewChatScreen extends StatefulWidget {
 }
 
 class _NewChatScreenState extends State<NewChatScreen> {
+  final _chipInputTextFieldStateKey =
+      GlobalKey<ChipInputTextFieldState<User>>();
+
+  TextEditingController _controller;
+
+  ChipInputTextFieldState get _chipInputTextFieldState =>
+      _chipInputTextFieldStateKey.currentState;
+
+  String _userNameQuery = '';
+
+  final _selectedUsers = <User>{};
+
+  bool _isSearchActive = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = TextEditingController()
+      ..addListener(() {
+        setState(() {
+          _userNameQuery = _controller.text;
+          _isSearchActive = _userNameQuery.isNotEmpty;
+        });
+      });
+  }
+
+  @override
+  void dispose() {
+    _controller?.clear();
+    _controller?.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
+        elevation: 0,
         backgroundColor: Colors.white,
         title: Text(
           'New Chat',
@@ -418,14 +453,71 @@ class _NewChatScreenState extends State<NewChatScreen> {
         ),
       ),
       body: UsersBloc(
-        child: UserListView(
+        child: Column(
-          pagination: PaginationParams(
+          crossAxisAlignment: CrossAxisAlignment.start,
-            limit: 25,
+          children: [
-          ),
+            ChipsInputTextField<User>(
-          sort: [
+              key: _chipInputTextFieldStateKey,
-            SortOption(
+              controller: _controller,
-              'name',
+              focusNode: FocusNode(),
-              direction: SortOption.ASC,
+              chipBuilder: (context, user) {
+                return InputChip(
+                  key: ObjectKey(user),
+                  label: Text(
+                    user.name,
+                    style: TextStyle(color: Colors.black),
+                  ),
+                  avatar: UserAvatar(
+                    user: user,
+                  ),
+                  onDeleted: () => _chipInputTextFieldState.removeItem(user),
+                  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
+                );
+              },
+              onChipAdded: (user) {
+                setState(() => _selectedUsers.add(user));
+              },
+              onChipRemoved: (user) {
+                setState(() => _selectedUsers.remove(user));
+              },
+            ),
+            Container(
+              width: double.maxFinite,
+              color: Colors.white54,
+              child: Padding(
+                padding: const EdgeInsets.symmetric(
+                  vertical: 8,
+                  horizontal: 8,
+                ),
+                child: Text(
+                  _isSearchActive
+                      ? "Matches for \"$_userNameQuery\""
+                      : 'On the platform',
+                  style: TextStyle(
+                    fontWeight: FontWeight.w500,
+                  ),
+                ),
+              ),
+            ),
+            Expanded(
+              child: UserListView(
+                filterByUserName: _userNameQuery,
+                selectedUsers: _selectedUsers,
+                groupAlphabetically: _isSearchActive ? false : true,
+                onUserTap: (user, _) {
+                  if (!_selectedUsers.contains(user)) {
+                    _controller.clear();
+                    _chipInputTextFieldState
+                      ..addItem(user)
+                      ..pauseItemAddition();
+                  }
+                },
+                pagination: PaginationParams(
+                  limit: 25,
+                ),
+              ),
+            ),
+            MessageInput(
             ),
           ],
         ),