Merge pull request #672 from GetStream/fix/668

fix(ui): fix `MessageInput` rendering errors

packages/stream_chat_flutter/CHANGELOG.md

@@ -1,3 +1,15 @@
+## Upcoming
+
+🐞 Fixed
+
+- [[#668]](https://github.com/GetStream/stream-chat-flutter/issues/668): Fix `MessageInput` rendering errors in case
+  there are no actions available to show.
+- [[#349]](https://github.com/GetStream/stream-chat-flutter/issues/349): Fix `MessageInput` attachment render overflow error.
+
+🔄 Changed
+
+- Animation curves changed from default `Curves.linear` to `Curves.easeOut` and `Curves.easeIn` for attachment controls.
+
 ## 2.2.1
 
 ⚠️ Deprecated

packages/stream_chat_flutter/lib/src/message_input.dart

@@ -578,6 +578,8 @@ class MessageInputState extends State<MessageInput> {
         crossFadeState: _actionsShrunk
             ? CrossFadeState.showFirst
             : CrossFadeState.showSecond,
+        firstCurve: Curves.easeOut,
+        secondCurve: Curves.easeIn,
         firstChild: IconButton(
           onPressed: () {
             if (_actionsShrunk) {
@@ -604,9 +606,7 @@ class MessageInputState extends State<MessageInput> {
                 !widget.showCommandsButton &&
                 widget.actions?.isNotEmpty != true
             ? const Offstage()
-            : FittedBox(
+            : Wrap(
-                child: Row(
-                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                 children: <Widget>[
                   if (!widget.disableAttachments)
                     _buildAttachmentButton(context),
@@ -618,7 +618,6 @@ class MessageInputState extends State<MessageInput> {
                   ...widget.actions ?? [],
                 ].insertBetween(const SizedBox(width: 8)),
               ),
-              ),
         duration: const Duration(milliseconds: 300),
         alignment: Alignment.center,
       ),
@@ -1089,7 +1088,11 @@ class MessageInputState extends State<MessageInput> {
 
     return AnimatedContainer(
       duration: const Duration(milliseconds: 300),
+      curve: Curves.easeOut,
       height: _openFilePickerSection ? _kMinMediaPickerSize : 0,
+      child: SingleChildScrollView(
+        child: SizedBox(
+          height: _kMinMediaPickerSize,
           child: Material(
             color: _streamChatTheme.colorTheme.inputBg,
             child: Column(
@@ -1101,7 +1104,8 @@ class MessageInputState extends State<MessageInput> {
                       icon: StreamSvgIcon.pictures(
                         color: _getIconColor(0),
                       ),
-                  onPressed: _attachmentContainsFile && _attachments.isNotEmpty
+                      onPressed:
+                          _attachmentContainsFile && _attachments.isNotEmpty
                               ? null
                               : () {
                                   setState(() {
@@ -1114,7 +1118,8 @@ class MessageInputState extends State<MessageInput> {
                       icon: StreamSvgIcon.files(
                         color: _getIconColor(1),
                       ),
-                  onPressed: !_attachmentContainsFile && _attachments.isNotEmpty
+                      onPressed:
+                          !_attachmentContainsFile && _attachments.isNotEmpty
                               ? null
                               : () {
                                   pickFile(DefaultAttachmentTypes.file);
@@ -1125,10 +1130,12 @@ class MessageInputState extends State<MessageInput> {
                         color: _getIconColor(2),
                       ),
                       onPressed: attachmentLimitCrossed ||
-                          (_attachmentContainsFile && _attachments.isNotEmpty)
+                              (_attachmentContainsFile &&
+                                  _attachments.isNotEmpty)
                           ? null
                           : () {
-                          pickFile(DefaultAttachmentTypes.image, camera: true);
+                              pickFile(DefaultAttachmentTypes.image,
+                                  camera: true);
                             },
                     ),
                     IconButton(
@@ -1137,10 +1144,12 @@ class MessageInputState extends State<MessageInput> {
                         color: _getIconColor(3),
                       ),
                       onPressed: attachmentLimitCrossed ||
-                          (_attachmentContainsFile && _attachments.isNotEmpty)
+                              (_attachmentContainsFile &&
+                                  _attachments.isNotEmpty)
                           ? null
                           : () {
-                          pickFile(DefaultAttachmentTypes.video, camera: true);
+                              pickFile(DefaultAttachmentTypes.video,
+                                  camera: true);
                             },
                     ),
                   ],
@@ -1193,6 +1202,8 @@ class MessageInputState extends State<MessageInput> {
               ],
             ),
           ),
+        ),
+      ),
     );
   }
 
@@ -2315,7 +2326,7 @@ class _PickerWidgetState extends State<_PickerWidget> {
       future: requestPermission,
       builder: (context, snapshot) {
         if (!snapshot.hasData) {
-          return const Center(child: CircularProgressIndicator());
+          return const Offstage();
         }
 
         if (snapshot.data!) {