corrected overlay positions

2021-09-06 16:46:15 +05:30
parent 0a384f3c45
commit ae2e8b740f
2 changed files with 112 additions and 109 deletions
@@ -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,20 +1398,15 @@ class MessageInputState extends State<MessageInput> {
        ),
      ),
    );
-    return Positioned(
-      bottom: size.height + MediaQuery.of(context).viewInsets.bottom,
-      left: 0,
-      right: 0,
-      child: TweenAnimationBuilder<double>(
-        tween: Tween(begin: 0, end: 1),
-        duration: const Duration(milliseconds: 300),
-        curve: Curves.easeInOutExpo,
-        builder: (context, val, child) => Transform.scale(
-          scale: val,
-          child: child,
-        ),
+    return TweenAnimationBuilder<double>(
+      tween: Tween(begin: 0, end: 1),
+      duration: const Duration(milliseconds: 300),
+      curve: Curves.easeInOutExpo,
+      builder: (context, val, child) => Transform.scale(
+        scale: val,
        child: child,
      ),
+      child: child,
    );
  }

@@ -1422,84 +1425,79 @@ 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(
-        margin: const EdgeInsets.all(8),
-        elevation: 2,
-        color: _streamChatTheme.colorTheme.barsBg,
-        shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(8),
+    return Card(
+      margin: const EdgeInsets.all(8),
+      elevation: 2,
+      color: _streamChatTheme.colorTheme.barsBg,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(8),
+      ),
+      clipBehavior: Clip.hardEdge,
+      child: Container(
+        constraints: BoxConstraints.loose(Size(size.width - 16, 200)),
+        decoration: BoxDecoration(
+          boxShadow: const [
+            BoxShadow(
+              spreadRadius: -8,
+              blurRadius: 5,
+              offset: Offset(0, -4),
+            ),
+          ],
+          color: _streamChatTheme.colorTheme.barsBg,
        ),
-        clipBehavior: Clip.hardEdge,
-        child: Container(
-          constraints: BoxConstraints.loose(const Size.fromHeight(200)),
-          decoration: BoxDecoration(
-            boxShadow: const [
-              BoxShadow(
-                spreadRadius: -8,
-                blurRadius: 5,
-                offset: Offset(0, -4),
-              ),
-            ],
-            color: _streamChatTheme.colorTheme.barsBg,
-          ),
-          child: ListView.builder(
-            padding: const EdgeInsets.all(0),
-            shrinkWrap: true,
-            itemCount: emojis.length + 1,
-            itemBuilder: (context, i) {
-              if (i == 0) {
-                return Padding(
-                  padding: const EdgeInsets.only(left: 8, top: 8),
-                  child: Row(
-                    children: [
-                      Padding(
-                        padding: const EdgeInsets.symmetric(horizontal: 8),
-                        child: StreamSvgIcon.smile(
-                          color: _streamChatTheme.colorTheme.accentPrimary,
+        child: ListView.builder(
+          padding: const EdgeInsets.all(0),
+          shrinkWrap: true,
+          itemCount: emojis.length + 1,
+          itemBuilder: (context, i) {
+            if (i == 0) {
+              return Padding(
+                padding: const EdgeInsets.only(left: 8, top: 8),
+                child: Row(
+                  children: [
+                    Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 8),
+                      child: StreamSvgIcon.smile(
+                        color: _streamChatTheme.colorTheme.accentPrimary,
+                      ),
+                    ),
+                    Flexible(
+                      child: Text(
+                        context.translations.emojiMatchingQueryText(
+                          query,
+                        ),
+                        style: TextStyle(
+                          color: _streamChatTheme.colorTheme.textHighEmphasis
+                              .withOpacity(.5),
                        ),
                      ),
-                      Flexible(
-                        child: Text(
-                          context.translations.emojiMatchingQueryText(
-                            query,
-                          ),
-                          style: TextStyle(
-                            color: _streamChatTheme.colorTheme.textHighEmphasis
-                                .withOpacity(.5),
-                          ),
-                        ),
-                      )
-                    ],
-                  ),
-                );
-              }
-
-              final emoji = emojis.elementAt(i - 1)!;
-              final themeData = Theme.of(context);
-              return ListTile(
-                title: SubstringHighlight(
-                  text:
-                      // ignore: lines_longer_than_80_chars
-                      "${emoji.char} ${emoji.name!.replaceAll('_', ' ')}",
-                  term: query,
-                  textStyleHighlight: themeData.textTheme.headline6!.copyWith(
-                    fontSize: 14.5,
-                    fontWeight: FontWeight.bold,
-                  ),
-                  textStyle: themeData.textTheme.headline6!.copyWith(
-                    fontSize: 14.5,
-                  ),
+                    )
+                  ],
                ),
-                onTap: () {
-                  _chooseEmoji(splits, emoji);
-                },
              );
-            },
-          ),
+            }
+
+            final emoji = emojis.elementAt(i - 1)!;
+            final themeData = Theme.of(context);
+            return ListTile(
+              title: SubstringHighlight(
+                text:
+                    // ignore: lines_longer_than_80_chars
+                    "${emoji.char} ${emoji.name!.replaceAll('_', ' ')}",
+                term: query,
+                textStyleHighlight: themeData.textTheme.headline6!.copyWith(
+                  fontSize: 14.5,
+                  fontWeight: FontWeight.bold,
+                ),
+                textStyle: themeData.textTheme.headline6!.copyWith(
+                  fontSize: 14.5,
+                ),
+              ),
+              onTap: () {
+                _chooseEmoji(splits, emoji);
+              },
+            );
+          },
        ),
      ),
    );
@@ -16,17 +16,17 @@ class AnchoredOverlay extends StatelessWidget {
    return new Container(
      child: new LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
-            return new OverlayBuilder(
-              showOverlay: showOverlay,
-              overlayBuilder: (BuildContext overlayContext) {
-                RenderBox box = context.findRenderObject() as RenderBox;
-                final center =
+        return new OverlayBuilder(
+          showOverlay: showOverlay,
+          overlayBuilder: (BuildContext overlayContext) {
+            RenderBox box = context.findRenderObject() as RenderBox;
+            final center =
                box.size.center(box.localToGlobal(const Offset(0.0, 0.0)));
-                return overlayBuilder(overlayContext, center);
-              },
-              child: child,
-            );
-          }),
+            return overlayBuilder(overlayContext, center);
+          },
+          child: child,
+        );
+      }),
    );
  }
 }
@@ -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: child,
+      child: FractionalTranslation(
+        translation: const Offset(-0.5, 0.0),
+        child: Padding(
+          padding: const EdgeInsets.only(bottom: 32.0),
+          child: child,
+        ),
      ),
    );
  }
-}
+}