feat: make the default messageInputBuilder use a multiline textfield which increase the ChatBottomInputSection

CHANGELOG.md

@@ -17,6 +17,7 @@
 - Fixed that chat message is automatically sent when the user presses enter on the keyboard in the chat input
 - Added sender and chatId to uploadImage in the ChatRepositoryInterface
 - Added imagePickerBuilder to the builders in the ChatOptions to override the image picker with a custom implementation that needs to return a Future<Uint8List?>
+- Changed the ChatBottomInputSection to be multiline and go from 45px to 120px in height depending on how many lines are in the textfield
 
 ## 4.0.0
 - Move to the new user story architecture

packages/flutter_chat/lib/src/screens/chat_detail/widgets/chat_bottom.dart

@@ -57,64 +57,88 @@ class ChatBottomInputSection extends HookWidget {
     }
 
     /// Image and send buttons
-    var messageSendButtons = Row(
+    var messageSendButtons = SizedBox(
-      crossAxisAlignment: CrossAxisAlignment.center,
+      height: 45,
-      mainAxisSize: MainAxisSize.min,
+      child: Row(
-      children: [
+        crossAxisAlignment: CrossAxisAlignment.center,
-        IconButton(
+        mainAxisSize: MainAxisSize.min,
-          onPressed: onPressSelectImage,
+        children: [
-          icon: Icon(
+          IconButton(
-            Icons.image_outlined,
+            alignment: Alignment.bottomRight,
-            color: options.iconEnabledColor,
+            onPressed: onPressSelectImage,
+            icon: Icon(
+              Icons.image_outlined,
+              color: options.iconEnabledColor,
+            ),
           ),
-        ),
+          IconButton(
-        IconButton(
+            alignment: Alignment.bottomRight,
-          disabledColor: options.iconDisabledColor,
+            disabledColor: options.iconDisabledColor,
-          color: options.iconEnabledColor,
+            color: options.iconEnabledColor,
-          onPressed: onClickSendMessage,
+            onPressed: onClickSendMessage,
-          icon: const Icon(Icons.send_rounded),
+            icon: const Icon(Icons.send_rounded),
-        ),
+          ),
-      ],
+        ],
+      ),
     );
 
     Future<void> onSubmitField() async => sendMessage();
 
-    var defaultInputField = TextField(
+    var defaultInputField = Stack(
-      textAlign: TextAlign.start,
+      children: [
-      textAlignVertical: TextAlignVertical.center,
+        TextField(
-      style: theme.textTheme.bodySmall,
+          textAlign: TextAlign.start,
-      textCapitalization: TextCapitalization.sentences,
+          textAlignVertical: TextAlignVertical.center,
-      controller: textController,
+          style: theme.textTheme.bodySmall,
-      decoration: InputDecoration(
+          textCapitalization: TextCapitalization.sentences,
-        enabledBorder: OutlineInputBorder(
+          textInputAction: TextInputAction.newline,
-          borderRadius: BorderRadius.circular(25),
+          keyboardType: TextInputType.multiline,
-          borderSide: const BorderSide(color: Colors.black),
+          maxLines: null,
+          controller: textController,
+          decoration: InputDecoration(
+            enabledBorder: OutlineInputBorder(
+              borderRadius: BorderRadius.circular(25),
+              borderSide: const BorderSide(color: Colors.black),
+            ),
+            focusedBorder: OutlineInputBorder(
+              borderRadius: BorderRadius.circular(25),
+              borderSide: const BorderSide(color: Colors.black),
+            ),
+            contentPadding: const EdgeInsets.only(
+              left: 16,
+              top: 16,
+              bottom: 16,
+            ),
+            // this ensures that that there is space at the end of the textfield
+            suffixIcon: AbsorbPointer(
+              child: Opacity(
+                opacity: 0.0,
+                child: messageSendButtons,
+              ),
+            ),
+            hintText: options.translations.messagePlaceholder,
+            hintStyle: theme.textTheme.bodyMedium,
+            fillColor: Colors.white,
+            filled: true,
+            border: const OutlineInputBorder(
+              borderRadius: BorderRadius.all(Radius.circular(25)),
+              borderSide: BorderSide.none,
+            ),
+          ),
+          onSubmitted: (_) async => onSubmitField(),
         ),
-        focusedBorder: OutlineInputBorder(
+        Positioned(
-          borderRadius: BorderRadius.circular(25),
+          right: 0,
-          borderSide: const BorderSide(color: Colors.black),
+          bottom: 0,
+          child: messageSendButtons,
         ),
-        contentPadding: const EdgeInsets.symmetric(
+      ],
-          vertical: 0,
-          horizontal: 30,
-        ),
-        hintText: options.translations.messagePlaceholder,
-        hintStyle: theme.textTheme.bodyMedium,
-        fillColor: Colors.white,
-        filled: true,
-        border: const OutlineInputBorder(
-          borderRadius: BorderRadius.all(Radius.circular(25)),
-          borderSide: BorderSide.none,
-        ),
-        suffixIcon: messageSendButtons,
-      ),
-      onSubmitted: (_) async => onSubmitField(),
     );
 
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 16),
-      child: SizedBox(
+      child: ConstrainedBox(
-        height: 45,
+        constraints: const BoxConstraints(maxHeight: 120, minHeight: 45),
         child: options.builders.messageInputBuilder?.call(
               context,
               textController,