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,11 +57,14 @@ class ChatBottomInputSection extends HookWidget {
     }
 
     /// Image and send buttons
-    var messageSendButtons = Row(
+    var messageSendButtons = SizedBox(
+      height: 45,
+      child: Row(
         crossAxisAlignment: CrossAxisAlignment.center,
         mainAxisSize: MainAxisSize.min,
         children: [
           IconButton(
+            alignment: Alignment.bottomRight,
             onPressed: onPressSelectImage,
             icon: Icon(
               Icons.image_outlined,
@@ -69,21 +72,28 @@ class ChatBottomInputSection extends HookWidget {
             ),
           ),
           IconButton(
+            alignment: Alignment.bottomRight,
             disabledColor: options.iconDisabledColor,
             color: options.iconEnabledColor,
             onPressed: onClickSendMessage,
             icon: const Icon(Icons.send_rounded),
           ),
         ],
+      ),
     );
 
     Future<void> onSubmitField() async => sendMessage();
 
-    var defaultInputField = TextField(
+    var defaultInputField = Stack(
+      children: [
+        TextField(
           textAlign: TextAlign.start,
           textAlignVertical: TextAlignVertical.center,
           style: theme.textTheme.bodySmall,
           textCapitalization: TextCapitalization.sentences,
+          textInputAction: TextInputAction.newline,
+          keyboardType: TextInputType.multiline,
+          maxLines: null,
           controller: textController,
           decoration: InputDecoration(
             enabledBorder: OutlineInputBorder(
@@ -94,9 +104,17 @@ class ChatBottomInputSection extends HookWidget {
               borderRadius: BorderRadius.circular(25),
               borderSide: const BorderSide(color: Colors.black),
             ),
-        contentPadding: const EdgeInsets.symmetric(
+            contentPadding: const EdgeInsets.only(
-          vertical: 0,
+              left: 16,
-          horizontal: 30,
+              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,
@@ -106,15 +124,21 @@ class ChatBottomInputSection extends HookWidget {
               borderRadius: BorderRadius.all(Radius.circular(25)),
               borderSide: BorderSide.none,
             ),
-        suffixIcon: messageSendButtons,
           ),
           onSubmitted: (_) async => onSubmitField(),
+        ),
+        Positioned(
+          right: 0,
+          bottom: 0,
+          child: messageSendButtons,
+        ),
+      ],
     );
 
     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,