[NewGroupChatScreen] Float selected users and searchField when list is scrolling.

example/lib/new_group_chat_screen.dart

@@ -24,11 +24,12 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
   void _userNameListener() {
     if (_debounce?.isActive ?? false) _debounce.cancel();
     _debounce = Timer(const Duration(milliseconds: 350), () {
-      if (mounted)
+      if (mounted) {
         setState(() {
           _userNameQuery = _controller.text;
           _isSearchActive = _userNameQuery.isNotEmpty;
         });
+      }
     });
   }
 
@@ -46,11 +47,19 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
     super.dispose();
   }
 
-  @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return SafeArea(
-      backgroundColor: Color.fromRGBO(252, 252, 252, 1),
+      child: UsersBloc(
-      appBar: AppBar(
+        child: Scaffold(
+          body: NestedScrollView(
+            floatHeaderSlivers: true,
+            headerSliverBuilder:
+                (BuildContext context, bool innerBoxIsScrolled) {
+              return <Widget>[
+                SliverAppBar(
+                  // floating: true,
+                  pinned: true,
+                  forceElevated: true,
                   elevation: 1,
                   backgroundColor: Colors.white,
                   leading: const StreamBackButton(),
@@ -74,7 +83,8 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                             context,
                             MaterialPageRoute(
                               builder: (_) => GroupChatDetailsScreen(
-                      selectedUsers: _selectedUsers.toList(growable: false),
+                                selectedUsers:
+                                    _selectedUsers.toList(growable: false),
                               ),
                             ),
                           );
@@ -89,10 +99,8 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                       )
                   ],
                 ),
-      body: UsersBloc(
+                SliverToBoxAdapter(
-        child: Column(
+                  child: Container(
-          children: [
-            Container(
                     height: 36,
                     decoration: BoxDecoration(
                       color: Colors.white,
@@ -126,8 +134,10 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                       ),
                     ),
                   ),
+                ),
                 if (_selectedUsers.isNotEmpty)
-              Container(
+                  SliverToBoxAdapter(
+                    child: Container(
                       height: 104,
                       child: ListView.separated(
                         scrollDirection: Axis.horizontal,
@@ -141,7 +151,8 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                               Stack(
                                 children: [
                                   UserAvatar(
-                              onlineIndicatorAlignment: Alignment(0.9, 0.9),
+                                    onlineIndicatorAlignment:
+                                        Alignment(0.9, 0.9),
                                     user: user,
                                     showOnlineStatus: true,
                                     borderRadius: BorderRadius.circular(32),
@@ -156,7 +167,8 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                                     child: GestureDetector(
                                       onTap: () {
                                         if (_selectedUsers.contains(user)) {
-                                    setState(() => _selectedUsers.remove(user));
+                                          setState(() =>
+                                              _selectedUsers.remove(user));
                                         }
                                       },
                                       child: Container(
@@ -192,7 +204,12 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                         },
                       ),
                     ),
-            Container(
+                  ),
+                SliverPersistentHeader(
+                  pinned: true,
+                  delegate: _HeaderDelegate(
+                    height: 30,
+                    child: Container(
                       width: double.maxFinite,
                       decoration: BoxDecoration(
                         gradient: LinearGradient(
@@ -220,9 +237,13 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                         ),
                       ),
                     ),
-            Expanded(
+                  ),
-              child: UserListView(
+                ),
+              ];
+            },
+            body: UserListView(
               selectedUsers: _selectedUsers,
+              pullToRefresh: false,
               groupAlphabetically: _isSearchActive ? false : true,
               onUserTap: (user, _) {
                 if (!_selectedUsers.contains(user)) {
@@ -284,9 +305,36 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
               },
             ),
           ),
-          ],
         ),
       ),
     );
   }
 }
+
+class _HeaderDelegate extends SliverPersistentHeaderDelegate {
+  final Widget child;
+  final double height;
+
+  const _HeaderDelegate({
+    @required this.child,
+    @required this.height,
+  });
+
+  @override
+  Widget build(
+      BuildContext context, double shrinkOffset, bool overlapsContent) {
+    return Container(
+      color: Colors.white,
+      child: child,
+    );
+  }
+
+  @override
+  double get maxExtent => height;
+
+  @override
+  double get minExtent => height;
+
+  @override
+  bool shouldRebuild(_HeaderDelegate oldDelegate) => true;
+}