talksik/stream-chat-flutter
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

corrected overlay positions

Browse Source
This commit is contained in:
Deven Joshi
2021-09-06 16:46:15 +05:30
parent 0a384f3c45
commit ae2e8b740f
2 changed files with 112 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/stream_chat_flutter/lib/src/message_input.dart
+90 -92
View File
@@ -11,7 +11,7 @@ import 'package:flutter_svg/flutter_svg.dart';
import 'package:image_picker/image_picker.dart'; import 'package:image_picker/image_picker.dart';
import 'package:photo_manager/photo_manager.dart'; import 'package:photo_manager/photo_manager.dart';
import 'package:shimmer/shimmer.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/emoji/emoji.dart';
import 'package:stream_chat_flutter/src/extension.dart'; import 'package:stream_chat_flutter/src/extension.dart';
import 'package:stream_chat_flutter/src/media_list_view.dart'; import 'package:stream_chat_flutter/src/media_list_view.dart';
@@ -475,13 +475,20 @@ class MessageInputState extends State<MessageInput> {
_emojiOverlay != null || _emojiOverlay != null ||
_mentionsOverlay != null, _mentionsOverlay != null,
overlayBuilder: (context, offset) { overlayBuilder: (context, offset) {
late Widget child;
if (_commandsOverlay != null) { if (_commandsOverlay != null) {
return _buildCommandsOverlayEntry(); child = _buildCommandsOverlayEntry();
} else if (_emojiOverlay != null) { } else if (_emojiOverlay != null) {
return _buildEmojiOverlay(); child = _buildEmojiOverlay();
} else { } else {
return _buildMentionsOverlayEntry(); child = _buildMentionsOverlayEntry();
} }
return CenterAbout(
position: Offset(offset.dx, offset.dy),
child: child,
);
}, },
child: child, child: child,
); );
@@ -924,9 +931,10 @@ class MessageInputState extends State<MessageInput> {
.where((c) => c.name.contains(text.replaceFirst('/', ''))) .where((c) => c.name.contains(text.replaceFirst('/', '')))
.toList() ?? .toList() ??
[]; [];
final size = MediaQuery.of(context).size;
return Padding( return Padding(
padding: const EdgeInsets.all(8), padding: const EdgeInsets.all(4),
child: Card( child: Card(
elevation: 2, elevation: 2,
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
@@ -935,7 +943,7 @@ class MessageInputState extends State<MessageInput> {
color: _streamChatTheme.colorTheme.barsBg, color: _streamChatTheme.colorTheme.barsBg,
clipBehavior: Clip.hardEdge, clipBehavior: Clip.hardEdge,
child: Container( child: Container(
constraints: BoxConstraints.loose(const Size.fromHeight(400)), constraints: BoxConstraints.loose(Size(size.width - 16, 400)),
decoration: BoxDecoration( decoration: BoxDecoration(
color: _streamChatTheme.colorTheme.barsBg, color: _streamChatTheme.colorTheme.barsBg,
borderRadius: BorderRadius.circular(8)), borderRadius: BorderRadius.circular(8)),
@@ -1336,7 +1344,7 @@ class MessageInputState extends State<MessageInput> {
), ),
clipBehavior: Clip.hardEdge, clipBehavior: Clip.hardEdge,
child: Container( child: Container(
constraints: BoxConstraints.loose(const Size.fromHeight(240)), constraints: BoxConstraints.loose(Size(size.width - 16, 200)),
decoration: BoxDecoration( decoration: BoxDecoration(
color: _streamChatTheme.colorTheme.barsBg, color: _streamChatTheme.colorTheme.barsBg,
), ),
@@ -1390,20 +1398,15 @@ class MessageInputState extends State<MessageInput> {
), ),
), ),
); );
return Positioned( return TweenAnimationBuilder<double>(
bottom: size.height + MediaQuery.of(context).viewInsets.bottom, tween: Tween(begin: 0, end: 1),
left: 0, duration: const Duration(milliseconds: 300),
right: 0, curve: Curves.easeInOutExpo,
child: TweenAnimationBuilder<double>( builder: (context, val, child) => Transform.scale(
tween: Tween(begin: 0, end: 1), scale: val,
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOutExpo,
builder: (context, val, child) => Transform.scale(
scale: val,
child: child,
),
child: child, child: child,
), ),
child: child,
); );
} }
@@ -1422,84 +1425,79 @@ class MessageInputState extends State<MessageInput> {
final renderBox = context.findRenderObject() as RenderBox; final renderBox = context.findRenderObject() as RenderBox;
final size = renderBox.size; final size = renderBox.size;
return Positioned( return Card(
bottom: size.height + MediaQuery.of(context).viewInsets.bottom, margin: const EdgeInsets.all(8),
left: 0, elevation: 2,
right: 0, color: _streamChatTheme.colorTheme.barsBg,
child: Card( shape: RoundedRectangleBorder(
margin: const EdgeInsets.all(8), borderRadius: BorderRadius.circular(8),
elevation: 2, ),
color: _streamChatTheme.colorTheme.barsBg, clipBehavior: Clip.hardEdge,
shape: RoundedRectangleBorder( child: Container(
borderRadius: BorderRadius.circular(8), 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: ListView.builder(
child: Container( padding: const EdgeInsets.all(0),
constraints: BoxConstraints.loose(const Size.fromHeight(200)), shrinkWrap: true,
decoration: BoxDecoration( itemCount: emojis.length + 1,
boxShadow: const [ itemBuilder: (context, i) {
BoxShadow( if (i == 0) {
spreadRadius: -8, return Padding(
blurRadius: 5, padding: const EdgeInsets.only(left: 8, top: 8),
offset: Offset(0, -4), child: Row(
), children: [
], Padding(
color: _streamChatTheme.colorTheme.barsBg, padding: const EdgeInsets.symmetric(horizontal: 8),
), child: StreamSvgIcon.smile(
child: ListView.builder( color: _streamChatTheme.colorTheme.accentPrimary,
padding: const EdgeInsets.all(0), ),
shrinkWrap: true, ),
itemCount: emojis.length + 1, Flexible(
itemBuilder: (context, i) { child: Text(
if (i == 0) { context.translations.emojiMatchingQueryText(
return Padding( query,
padding: const EdgeInsets.only(left: 8, top: 8), ),
child: Row( style: TextStyle(
children: [ color: _streamChatTheme.colorTheme.textHighEmphasis
Padding( .withOpacity(.5),
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),
),
),
)
],
),
);
}
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);
},
);
},
), ),
), ),
); );
packages/stream_chat_flutter/lib/overlays.dart → packages/stream_chat_flutter/lib/src/overlays.dart
+22 -17
View File
@@ -16,17 +16,17 @@ class AnchoredOverlay extends StatelessWidget {
return new Container( return new Container(
child: new LayoutBuilder( child: new LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) { builder: (BuildContext context, BoxConstraints constraints) {
return new OverlayBuilder( return new OverlayBuilder(
showOverlay: showOverlay, showOverlay: showOverlay,
overlayBuilder: (BuildContext overlayContext) { overlayBuilder: (BuildContext overlayContext) {
RenderBox box = context.findRenderObject() as RenderBox; RenderBox box = context.findRenderObject() as RenderBox;
final center = final center =
box.size.center(box.localToGlobal(const Offset(0.0, 0.0))); box.size.center(box.localToGlobal(const Offset(0.0, 0.0)));
return overlayBuilder(overlayContext, center); return overlayBuilder(overlayContext, center);
}, },
child: child, child: child,
); );
}), }),
); );
} }
} }
@@ -84,7 +84,7 @@ class _OverlayBuilderState extends State<OverlayBuilder> {
bool isShowingOverlay() => overlayEntry != null; bool isShowingOverlay() => overlayEntry != null;
void showOverlay() { void showOverlay() {
overlayEntry = new OverlayEntry( overlayEntry = OverlayEntry(
builder: widget.overlayBuilder, builder: widget.overlayBuilder,
); );
if (overlayEntry != null) { if (overlayEntry != null) {
@@ -128,13 +128,18 @@ class CenterAbout extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new Positioned( var size = MediaQuery.of(context).size;
top: position.dy,
return Positioned(
bottom: size.height - position.dy,
left: position.dx, left: position.dx,
child: new FractionalTranslation( child: FractionalTranslation(
translation: const Offset(-0.5, -0.5), translation: const Offset(-0.5, 0.0),
child: child, child: Padding(
padding: const EdgeInsets.only(bottom: 32.0),
child: child,
),
), ),
); );
} }
} }