corrected overlay positions

packages/stream_chat_flutter/lib/src/message_input.dart

@@ -11,7 +11,7 @@ import 'package:flutter_svg/flutter_svg.dart';
 import 'package:image_picker/image_picker.dart';
 import 'package:photo_manager/photo_manager.dart';
 import 'package:shimmer/shimmer.dart';
-import 'package:stream_chat_flutter/overlays.dart';
+import 'package:stream_chat_flutter/src/overlays.dart';
 import 'package:stream_chat_flutter/src/emoji/emoji.dart';
 import 'package:stream_chat_flutter/src/extension.dart';
 import 'package:stream_chat_flutter/src/media_list_view.dart';
@@ -475,13 +475,20 @@ class MessageInputState extends State<MessageInput> {
           _emojiOverlay != null ||
           _mentionsOverlay != null,
       overlayBuilder: (context, offset) {
+        late Widget child;
+
         if (_commandsOverlay != null) {
-          return _buildCommandsOverlayEntry();
+          child = _buildCommandsOverlayEntry();
         } else if (_emojiOverlay != null) {
-          return _buildEmojiOverlay();
+          child = _buildEmojiOverlay();
         } else {
-          return _buildMentionsOverlayEntry();
+          child = _buildMentionsOverlayEntry();
         }
+
+        return CenterAbout(
+          position: Offset(offset.dx, offset.dy),
+          child: child,
+        );
       },
       child: child,
     );
@@ -924,9 +931,10 @@ class MessageInputState extends State<MessageInput> {
             .where((c) => c.name.contains(text.replaceFirst('/', '')))
             .toList() ??
         [];
+    final size = MediaQuery.of(context).size;
 
     return Padding(
-      padding: const EdgeInsets.all(8),
+      padding: const EdgeInsets.all(4),
       child: Card(
         elevation: 2,
         shape: RoundedRectangleBorder(
@@ -935,7 +943,7 @@ class MessageInputState extends State<MessageInput> {
         color: _streamChatTheme.colorTheme.barsBg,
         clipBehavior: Clip.hardEdge,
         child: Container(
-          constraints: BoxConstraints.loose(const Size.fromHeight(400)),
+          constraints: BoxConstraints.loose(Size(size.width - 16, 400)),
           decoration: BoxDecoration(
               color: _streamChatTheme.colorTheme.barsBg,
               borderRadius: BorderRadius.circular(8)),
@@ -1336,7 +1344,7 @@ class MessageInputState extends State<MessageInput> {
       ),
       clipBehavior: Clip.hardEdge,
       child: Container(
-        constraints: BoxConstraints.loose(const Size.fromHeight(240)),
+        constraints: BoxConstraints.loose(Size(size.width - 16, 200)),
         decoration: BoxDecoration(
           color: _streamChatTheme.colorTheme.barsBg,
         ),
@@ -1390,11 +1398,7 @@ class MessageInputState extends State<MessageInput> {
         ),
       ),
     );
-    return Positioned(
-      bottom: size.height + MediaQuery.of(context).viewInsets.bottom,
-      left: 0,
-      right: 0,
-      child: TweenAnimationBuilder<double>(
+    return TweenAnimationBuilder<double>(
       tween: Tween(begin: 0, end: 1),
       duration: const Duration(milliseconds: 300),
       curve: Curves.easeInOutExpo,
@@ -1403,7 +1407,6 @@ class MessageInputState extends State<MessageInput> {
         child: child,
       ),
       child: child,
-      ),
     );
   }
 
@@ -1422,11 +1425,7 @@ class MessageInputState extends State<MessageInput> {
     final renderBox = context.findRenderObject() as RenderBox;
     final size = renderBox.size;
 
-    return Positioned(
-      bottom: size.height + MediaQuery.of(context).viewInsets.bottom,
-      left: 0,
-      right: 0,
-      child: Card(
+    return Card(
       margin: const EdgeInsets.all(8),
       elevation: 2,
       color: _streamChatTheme.colorTheme.barsBg,
@@ -1435,7 +1434,7 @@ class MessageInputState extends State<MessageInput> {
       ),
       clipBehavior: Clip.hardEdge,
       child: Container(
-          constraints: BoxConstraints.loose(const Size.fromHeight(200)),
+        constraints: BoxConstraints.loose(Size(size.width - 16, 200)),
         decoration: BoxDecoration(
           boxShadow: const [
             BoxShadow(
@@ -1501,7 +1500,6 @@ class MessageInputState extends State<MessageInput> {
           },
         ),
       ),
-      ),
     );
   }
 

packages/stream_chat_flutter/lib/src/overlays.dart

@@ -84,7 +84,7 @@ class _OverlayBuilderState extends State<OverlayBuilder> {
   bool isShowingOverlay() => overlayEntry != null;
 
   void showOverlay() {
-    overlayEntry = new OverlayEntry(
+    overlayEntry = OverlayEntry(
       builder: widget.overlayBuilder,
     );
     if (overlayEntry != null) {
@@ -128,13 +128,18 @@ class CenterAbout extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return new Positioned(
-      top: position.dy,
+    var size = MediaQuery.of(context).size;
+
+    return Positioned(
+      bottom: size.height - position.dy,
       left: position.dx,
-      child: new FractionalTranslation(
-        translation: const Offset(-0.5, -0.5),
+      child: FractionalTranslation(
+        translation: const Offset(-0.5, 0.0),
+        child: Padding(
+          padding: const EdgeInsets.only(bottom: 32.0),
           child: child,
         ),
+      ),
     );
   }
 }