From ae2e8b740fe76b7ea5615ad60212d84420e4b9ba Mon Sep 17 00:00:00 2001 From: Deven Joshi Date: Mon, 6 Sep 2021 16:46:15 +0530 Subject: [PATCH] corrected overlay positions --- .../lib/src/message_input.dart | 182 +++++++++--------- .../lib/{ => src}/overlays.dart | 39 ++-- 2 files changed, 112 insertions(+), 109 deletions(-) rename packages/stream_chat_flutter/lib/{ => src}/overlays.dart (79%) diff --git a/packages/stream_chat_flutter/lib/src/message_input.dart b/packages/stream_chat_flutter/lib/src/message_input.dart index c51cab9c..cf118b7f 100644 --- a/packages/stream_chat_flutter/lib/src/message_input.dart +++ b/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 { _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 { .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 { 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 { ), 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 { ), ), ); - return Positioned( - bottom: size.height + MediaQuery.of(context).viewInsets.bottom, - left: 0, - right: 0, - child: TweenAnimationBuilder( - 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( + 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 { 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); + }, + ); + }, ), ), ); diff --git a/packages/stream_chat_flutter/lib/overlays.dart b/packages/stream_chat_flutter/lib/src/overlays.dart similarity index 79% rename from packages/stream_chat_flutter/lib/overlays.dart rename to packages/stream_chat_flutter/lib/src/overlays.dart index 01210fec..65956cb9 100644 --- a/packages/stream_chat_flutter/lib/overlays.dart +++ b/packages/stream_chat_flutter/lib/src/overlays.dart @@ -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 { 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, + ), ), ); } -} \ No newline at end of file +}