feat: Added share user selection and text input

lib/src/image_footer.dart

@@ -1,9 +1,12 @@
+import 'dart:math';
+
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:stream_chat/stream_chat.dart';
 import 'package:stream_chat_flutter/src/back_button.dart';
 import 'package:stream_chat_flutter/src/channel_info.dart';
 import 'package:stream_chat_flutter/src/channel_name.dart';
+import 'package:stream_chat_flutter/src/message_input.dart';
 import 'package:stream_chat_flutter/src/stream_chat.dart';
 import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
 import 'package:stream_chat_flutter/src/stream_icons.dart';
@@ -52,6 +55,9 @@ class _ImageFooterState extends State<ImageFooter> {
   Future<QueryUsersResponse> _userQuery;
   bool _userSearchMode = false;
   TextEditingController _searchController = TextEditingController();
+  TextEditingController _messageController = TextEditingController();
+
+  List<User> selectedUsers = [];
 
   @override
   void initState() {
@@ -193,7 +199,11 @@ class _ImageFooterState extends State<ImageFooter> {
     showDialog(
       context: context,
       builder: (context) {
-        return StatefulBuilder(builder: (context, modalSetState) {
+        print('KEY ${MediaQuery.of(context).viewInsets.bottom}');
+        print(MediaQuery.of(context).viewInsets.bottom == 0.0);
+        return Scaffold(
+          backgroundColor: Colors.transparent,
+          body: StatefulBuilder(builder: (modalContext, modalSetState) {
             return Align(
               alignment:
                   _userSearchMode ? Alignment.topCenter : Alignment.bottomCenter,
@@ -206,14 +216,14 @@ class _ImageFooterState extends State<ImageFooter> {
                   children: [
                     ListView(
                       children: [
-                      if (!_userSearchMode)
+                        if (!_userSearchMode && MediaQuery.of(context).viewInsets.bottom == 0.0)
                           GestureDetector(
                             child: Container(
-                            height: MediaQuery.of(context).size.height / 2,
+                              height: MediaQuery.of(modalContext).size.height / 2,
                               color: Colors.transparent,
                             ),
                             onTapUp: (val) {
-                            Navigator.pop(context);
+                              Navigator.pop(modalContext);
                             },
                           ),
                         Container(
@@ -270,6 +280,8 @@ class _ImageFooterState extends State<ImageFooter> {
                                   physics: NeverScrollableScrollPhysics(),
                                   itemBuilder: (context, position) {
                                     var user = filteredData[position];
+                                    var isUserSelected =
+                                        selectedUsers.contains(user);
 
                                     return Padding(
                                       padding: const EdgeInsets.all(8.0),
@@ -282,17 +294,29 @@ class _ImageFooterState extends State<ImageFooter> {
                                         children: [
                                           Stack(
                                             children: [
-                                            UserAvatar(
+                                              CircleAvatar(
-                                              onTap: (user) {},
+                                                maxRadius: 32.0,
+                                                child: UserAvatar(
+                                                  onTap: (user) {
+                                                    if (isUserSelected) {
+                                                      selectedUsers.remove(user);
+                                                    } else {
+                                                      selectedUsers.add(user);
+                                                    }
+                                                    modalSetState(() {});
+                                                  },
                                                   user: user,
                                                   constraints:
                                                       BoxConstraints.tightFor(
-                                                height: 64,
+                                                    height:
-                                                width: 64,
+                                                        isUserSelected ? 56 : 64,
+                                                    width:
+                                                        isUserSelected ? 56 : 64,
                                                   ),
                                                   borderRadius:
                                                       BorderRadius.circular(32),
                                                 ),
+                                              ),
                                             ],
                                           ),
                                           Padding(
@@ -321,7 +345,7 @@ class _ImageFooterState extends State<ImageFooter> {
                         ),
                       ],
                     ),
-                  if (!_userSearchMode)
+                    if (!_userSearchMode && selectedUsers.isEmpty)
                       Align(
                         alignment: Alignment.bottomCenter,
                         child: Container(
@@ -335,7 +359,7 @@ class _ImageFooterState extends State<ImageFooter> {
                               child: Text(
                                 'Save to Photos',
                                 style: TextStyle(
-                                color: StreamChatTheme.of(context).accentColor,
+                                  color: StreamChatTheme.of(modalContext).accentColor,
                                   fontWeight: FontWeight.bold,
                                 ),
                               ),
@@ -343,11 +367,14 @@ class _ImageFooterState extends State<ImageFooter> {
                           ),
                         ),
                       ),
+                    if (!_userSearchMode && selectedUsers.isNotEmpty)
+                      _buildShareTextInputSection(modalSetState),
                   ],
                 ),
               ),
             );
-        });
+          }),
+        );
       },
     );
   }
@@ -458,6 +485,95 @@ class _ImageFooterState extends State<ImageFooter> {
     }
   }
 
+  Widget _buildShareTextInputSection(modalSetState) {
+    return Align(
+        alignment: Alignment.bottomCenter,
+        child: Container(
+          color: Colors.white,
+          height: 56.0,
+          child: Row(
+            children: [
+              Expanded(
+                child: Padding(
+                  padding: const EdgeInsets.only(left: 8.0),
+                  child: TextField(
+                    controller: _messageController,
+                    onChanged: (val) {
+                      modalSetState(() {});
+                    },
+                    onTap: () {
+                      modalSetState(() {});
+                      setState(() {});
+                    },
+                    decoration: InputDecoration(
+                      isDense: true,
+                      prefixText: '     ',
+                      hintText: 'Add a comment',
+                      border: OutlineInputBorder(
+                        borderRadius: BorderRadius.circular(32.0),
+                        borderSide: BorderSide(
+                          color: Colors.black.withOpacity(0.16),
+                        ),
+                      ),
+                      focusedBorder: OutlineInputBorder(
+                        borderRadius: BorderRadius.circular(32.0),
+                          borderSide: BorderSide(
+                            color: Colors.black.withOpacity(0.16),
+                          )
+                      ),
+                      contentPadding: EdgeInsets.symmetric(vertical: 12.0),
+                    ),
+                  ),
+                ),
+              ),
+              AnimatedCrossFade(
+                crossFadeState: _messageController.text.isNotEmpty
+                    ? CrossFadeState.showFirst
+                    : CrossFadeState.showSecond,
+                firstChild: IconTheme(
+                  data:
+                  StreamChatTheme.of(context).channelTheme.messageInputButtonIconTheme,
+                  child: Center(
+                    child: Padding(
+                      padding: const EdgeInsets.all(8.0),
+                      child: InkWell(
+                        onTap: () {
+                          // sendMessage();
+                        },
+                        child: Transform.rotate(
+                            angle: -pi / 2,
+                            child: Icon(
+                              StreamIcons.send_message,
+                              color: StreamChatTheme.of(context).accentColor,
+                            ),),
+                      ),
+                    ),
+                  ),
+                ),
+                secondChild: IconTheme(
+                  data:
+                  StreamChatTheme.of(context).channelTheme.messageInputButtonIconTheme,
+                  child: Padding(
+                    padding: const EdgeInsets.all(8.0),
+                    child: Center(
+                        child: InkWell(
+                          onTap: () {},
+                          child: Icon(
+                            StreamIcons.send_message,
+                            color: Colors.grey,
+                          ),
+                        )),
+                  ),
+                ),
+                duration: Duration(milliseconds: 300),
+                alignment: Alignment.center,
+              ),
+            ],
+          ),
+        ),
+      );
+  }
+
   Future<QueryUsersResponse> _queryUsers(context) {
     return StreamChat.of(context).client.queryUsers(
       pagination: PaginationParams(