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

Merge pull request #207 from GetStream/qa3-fixes

Browse Source 
QA3 fixes
This commit is contained in:
Salvatore Giordano
2021-01-12 15:24:07 +01:00
committed by GitHub
parent 04902f6a81 80d8c48826
commit a6be5766dc
7 changed files with 438 additions and 434 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/src/extension.dart
+21
View File
@@ -1,7 +1,28 @@
import 'package:emojis/emoji.dart';
import 'package:characters/characters.dart';
final _emojis = Emoji.all();
extension StringExtension on String { extension StringExtension on String {
String capitalize() { String capitalize() {
return "${this[0].toUpperCase()}${this.substring(1)}"; return "${this[0].toUpperCase()}${this.substring(1)}";
} }
// Emojis guidelines
// 1 to 3 emojis: big size with no text bubble.
// 4+ emojis or emojis+text: standard size with text bubble.
bool get isOnlyEmoji {
final characters = this.trim().characters;
if (characters.isEmpty) return false;
if (characters.length > 3) return false;
return characters.every((c) {
return _emojis.firstWhere(
(Emoji emoji) => emoji.char.contains(c),
orElse: () => null,
) !=
null;
});
}
} }
/// List extension /// List extension
lib/src/message_actions_modal.dart
+2 -4
View File
@@ -164,7 +164,7 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
), ),
Padding( Padding(
padding: EdgeInsets.only( padding: EdgeInsets.only(
right: widget.reverse ? 16 : 0, right: widget.reverse ? 8 : 0,
left: widget.reverse ? 0 : 48, left: widget.reverse ? 0 : 48,
), ),
child: SizedBox( child: SizedBox(
@@ -448,9 +448,7 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
), ),
], ],
), ),
onTap: () { onTap: () => _showFlagDialog(),
_showFlagDialog();
},
); );
} }
lib/src/message_input.dart
+279 -293
View File
@@ -358,31 +358,31 @@ class MessageInputState extends State<MessageInput> {
); );
} }
AnimatedCrossFade _animateSendButton(BuildContext context) { Widget _animateSendButton(BuildContext context) {
return AnimatedCrossFade( return Padding(
crossFadeState: ((_messageIsPresent || _attachments.isNotEmpty) && padding: const EdgeInsets.all(8.0),
_attachments.every((a) => a.uploaded == true)) child: AnimatedCrossFade(
? CrossFadeState.showFirst crossFadeState: ((_messageIsPresent || _attachments.isNotEmpty) &&
: CrossFadeState.showSecond, _attachments.every((a) => a.uploaded == true))
firstChild: _buildSendButton(context), ? CrossFadeState.showFirst
secondChild: _buildIdleSendButton(context), : CrossFadeState.showSecond,
duration: Duration(milliseconds: 300), firstChild: _buildSendButton(context),
alignment: Alignment.center, secondChild: _buildIdleSendButton(context),
duration: Duration(milliseconds: 300),
alignment: Alignment.center,
),
); );
} }
Widget _buildExpandActionsButton() { Widget _buildExpandActionsButton() {
return AnimatedCrossFade( return Padding(
crossFadeState: padding: const EdgeInsets.all(8.0),
_actionsShrunk ? CrossFadeState.showFirst : CrossFadeState.showSecond, child: AnimatedCrossFade(
firstChild: Padding( crossFadeState: _actionsShrunk
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8), ? CrossFadeState.showFirst
child: IconButton( : CrossFadeState.showSecond,
onPressed: () { firstChild: IconButton(
setState(() { onPressed: () => setState(() => _actionsShrunk = false),
_actionsShrunk = false;
});
},
icon: StreamSvgIcon.emptyCircleLeft( icon: StreamSvgIcon.emptyCircleLeft(
color: StreamChatTheme.of(context).colorTheme.accentBlue, color: StreamChatTheme.of(context).colorTheme.accentBlue,
), ),
@@ -393,34 +393,36 @@ class MessageInputState extends State<MessageInput> {
), ),
splashRadius: 24, splashRadius: 24,
), ),
secondChild: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
if (!widget.disableAttachments) _buildAttachmentButton(),
if (widget.editMessage == null &&
StreamChannel.of(context)
.channel
?.config
?.commands
?.isNotEmpty ==
true)
_buildCommandButton(),
].insertBetween(const SizedBox(width: 8)),
),
duration: Duration(milliseconds: 300),
alignment: Alignment.center,
), ),
secondChild: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
if (!widget.disableAttachments) _buildAttachmentButton(),
if (widget.editMessage == null &&
StreamChannel.of(context).channel?.config?.commands?.isNotEmpty ==
true)
_buildCommandButton(),
],
),
duration: Duration(milliseconds: 300),
alignment: Alignment.center,
); );
} }
Expanded _buildTextInput(BuildContext context) { Expanded _buildTextInput(BuildContext context) {
final theme = StreamChatTheme.of(context);
return Expanded( return Expanded(
child: Center( child: Center(
child: Container( child: Container(
clipBehavior: Clip.antiAlias, clipBehavior: Clip.antiAlias,
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24.0), borderRadius: BorderRadius.circular(20.0),
border: Border.all( border: Border.all(color: theme.colorTheme.greyGainsboro),
color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
),
), ),
padding: _attachments.isEmpty ? null : EdgeInsets.all(6.0),
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
@@ -429,52 +431,48 @@ class MessageInputState extends State<MessageInput> {
_buildAttachments(), _buildAttachments(),
LimitedBox( LimitedBox(
maxHeight: widget.maxHeight, maxHeight: widget.maxHeight,
child: TextField( child: SizedBox(
key: Key('messageInputText'), height: 40,
enabled: _inputEnabled, child: TextField(
minLines: null, key: Key('messageInputText'),
maxLines: null, enabled: _inputEnabled,
onSubmitted: (_) { minLines: null,
sendMessage(); maxLines: null,
}, onSubmitted: (_) => sendMessage(),
keyboardType: widget.keyboardType, keyboardType: widget.keyboardType,
controller: textEditingController, controller: textEditingController,
focusNode: _focusNode, focusNode: _focusNode,
style: Theme.of(context).textTheme.bodyText2, style: theme.textTheme.body,
autofocus: false, autofocus: false,
textAlignVertical: TextAlignVertical.center, textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration( decoration: InputDecoration(
isDense: true, isDense: true,
hintText: _getHint(), hintText: _getHint(),
prefixText: _commandEnabled ? null : ' ', hintStyle: theme.textTheme.body.copyWith(
border: OutlineInputBorder( color: theme.colorTheme.grey,
borderSide: BorderSide(color: Colors.transparent)), ),
focusedBorder: OutlineInputBorder( border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)), borderSide: BorderSide(color: Colors.transparent)),
enabledBorder: OutlineInputBorder( focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)), borderSide: BorderSide(color: Colors.transparent)),
errorBorder: OutlineInputBorder( enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)), borderSide: BorderSide(color: Colors.transparent)),
disabledBorder: OutlineInputBorder( errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)), borderSide: BorderSide(color: Colors.transparent)),
contentPadding: EdgeInsets.symmetric( disabledBorder: OutlineInputBorder(
horizontal: 16, borderSide: BorderSide(color: Colors.transparent)),
vertical: 13, contentPadding: const EdgeInsets.fromLTRB(16, 12, 13, 11),
), prefixIcon: _commandEnabled
prefixIcon: _commandEnabled ? Container(
? Padding( decoration: BoxDecoration(
padding: borderRadius: BorderRadius.circular(12),
const EdgeInsets.symmetric(horizontal: 8.0), color: theme.colorTheme.accentBlue,
child: Chip( ),
backgroundColor: StreamChatTheme.of(context) height: 24,
.colorTheme margin: const EdgeInsets.all(8.0),
.accentBlue, padding: const EdgeInsets.only(right: 8, left: 4),
padding: EdgeInsets.zero, child: Row(
labelPadding:
EdgeInsets.symmetric(horizontal: 8.0),
label: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
StreamSvgIcon.lightning( StreamSvgIcon.lightning(
color: Colors.white, color: Colors.white,
@@ -484,27 +482,32 @@ class MessageInputState extends State<MessageInput> {
_chosenCommand?.name?.toUpperCase() ?? '', _chosenCommand?.name?.toUpperCase() ?? '',
style: StreamChatTheme.of(context) style: StreamChatTheme.of(context)
.textTheme .textTheme
.footnote .footnoteBold
.copyWith( .copyWith(
color: Colors.white, color: Colors.white,
), ),
), ),
], ],
), ),
), )
) : null,
: null, suffixIcon: _commandEnabled
suffixIcon: _commandEnabled ? IconButton(
? IconButton( icon: StreamSvgIcon.close_small(),
icon: StreamSvgIcon.close_small(), splashRadius: 24,
splashRadius: 24, padding: const EdgeInsets.all(0),
onPressed: () { constraints: BoxConstraints.tightFor(
setState(() => _commandEnabled = false); height: 24,
}, width: 24,
) ),
: null, onPressed: () {
setState(() => _commandEnabled = false);
},
)
: null,
),
textCapitalization: TextCapitalization.sentences,
), ),
textCapitalization: TextCapitalization.sentences,
), ),
) )
], ],
@@ -1515,128 +1518,124 @@ class MessageInputState extends State<MessageInput> {
} }
Widget _buildReplyToMessage() { Widget _buildReplyToMessage() {
if (!_hasQuotedMessage) { if (!_hasQuotedMessage) return Offstage();
return Offstage();
}
final containsUrl = widget.quotedMessage.attachments final containsUrl = widget.quotedMessage.attachments
?.any((element) => element.ogScrapeUrl != null) == ?.any((element) => element.ogScrapeUrl != null) ==
true; true;
return Transform( return Transform(
transform: Matrix4.rotationY(pi), transform: Matrix4.rotationY(pi),
alignment: Alignment.center, alignment: Alignment.center,
child: QuotedMessageWidget( child: Padding(
reverse: true, padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
showBorder: !containsUrl, child: QuotedMessageWidget(
message: widget.quotedMessage, reverse: true,
messageTheme: StreamChatTheme.of(context).otherMessageTheme, showBorder: !containsUrl,
message: widget.quotedMessage,
messageTheme: StreamChatTheme.of(context).otherMessageTheme,
),
), ),
); );
} }
Widget _buildAttachments() { Widget _buildAttachments() {
return _attachments.isEmpty if (_attachments.isEmpty) return Offstage();
? Container() return Column(
: Column( children: [
children: [ if (_attachments.any((e) => e.attachment?.type == 'file'))
if (_attachments.any((e) => e.attachment?.type == 'file')) LimitedBox(
LimitedBox( maxHeight: 136.0,
maxHeight: 136.0, child: ListView(
child: ListView( reverse: true,
reverse: true, shrinkWrap: true,
shrinkWrap: true, children: _attachments.reversed
children: _attachments.reversed .where((e) => e.attachment?.type == 'file')
.where((e) => e.attachment?.type == 'file') .map(
.map( (e) => Padding(
(e) => Padding( padding: const EdgeInsets.symmetric(horizontal: 8.0),
padding: child: ClipRRect(
const EdgeInsets.symmetric(horizontal: 8.0), borderRadius: BorderRadius.circular(10),
child: ClipRRect( clipBehavior: Clip.antiAlias,
borderRadius: BorderRadius.circular(10), child: FileAttachment(
clipBehavior: Clip.antiAlias, attachment: e.attachment,
child: FileAttachment( attachmentType: FileAttachmentType.local,
attachment: e.attachment, file: e.file,
attachmentType: FileAttachmentType.local, size: Size(
file: e.file, MediaQuery.of(context).size.width * 0.65,
size: Size( 56.0,
MediaQuery.of(context).size.width * 0.65, ),
56.0, trailing: Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
child: CircleAvatar(
backgroundColor: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.6),
maxRadius: 12.0,
child: StreamSvgIcon.close(
color: StreamChatTheme.of(context)
.colorTheme
.white,
), ),
trailing: Padding( ),
padding: const EdgeInsets.all(8.0), onTap: () {
child: InkWell( setState(() {
child: CircleAvatar( _attachments.remove(e);
backgroundColor: });
StreamChatTheme.of(context) },
.colorTheme ),
.black ),
.withOpacity(0.6), ),
maxRadius: 12.0, ),
child: StreamSvgIcon.close( ),
color: StreamChatTheme.of(context) )
.colorTheme .toList(),
.white, ),
),
if (_attachments.any((e) => e.attachment?.type != 'file'))
LimitedBox(
maxHeight: 104.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: _attachments
.where((e) => e.attachment?.type != 'file')
.map(
(attachment) => Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
clipBehavior: Clip.antiAlias,
child: Stack(
children: <Widget>[
AspectRatio(
aspectRatio: 1.0,
child: Container(
height: 104,
width: 104,
child: _buildAttachment(attachment),
),
),
_buildRemoveButton(attachment),
attachment.uploaded
? SizedBox()
: Positioned.fill(
child: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: CircularProgressIndicator(),
), ),
), ),
onTap: () {
setState(() {
_attachments.remove(e);
});
},
), ),
), ],
), ),
), ),
), ),
) )
.toList(), .toList(),
), ),
), ),
if (_attachments.any((e) => e.attachment?.type != 'file')) ],
LimitedBox( );
maxHeight: 104.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: _attachments
.where((e) => e.attachment?.type != 'file')
.map(
(attachment) => Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
clipBehavior: Clip.antiAlias,
child: Stack(
children: <Widget>[
AspectRatio(
aspectRatio: 1.0,
child: Container(
height: 104,
width: 104,
child: _buildAttachment(attachment),
),
),
_buildRemoveButton(attachment),
attachment.uploaded
? SizedBox()
: Positioned.fill(
child: Center(
child: Padding(
padding:
const EdgeInsets.all(16.0),
child:
CircularProgressIndicator(),
),
),
),
],
),
),
),
)
.toList(),
),
),
],
);
} }
Positioned _buildRemoveButton(_SendingAttachment attachment) { Positioned _buildRemoveButton(_SendingAttachment attachment) {
@@ -1746,80 +1745,74 @@ class MessageInputState extends State<MessageInput> {
} }
Widget _buildCommandButton() { Widget _buildCommandButton() {
return Padding( return IconButton(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8), icon: StreamSvgIcon.lightning(
child: IconButton( color: _commandsOverlay != null
icon: StreamSvgIcon.lightning( ? StreamChatTheme.of(context).colorTheme.accentBlue
color: _commandsOverlay != null : StreamChatTheme.of(context).colorTheme.grey,
? StreamChatTheme.of(context).colorTheme.accentBlue
: StreamChatTheme.of(context).colorTheme.grey,
),
padding: const EdgeInsets.all(0),
constraints: BoxConstraints.tightFor(
height: 24,
width: 24,
),
splashRadius: 24,
onPressed: () async {
if (_openFilePickerSection) {
setState(() {
_animateContainer = false;
_openFilePickerSection = false;
_filePickerSize = _kMinMediaPickerSize;
});
await Future.delayed(Duration(milliseconds: 300));
}
if (_commandsOverlay == null) {
setState(() {
_commandsOverlay = _buildCommandsOverlayEntry();
Overlay.of(context).insert(_commandsOverlay);
});
} else {
setState(() {
_commandsOverlay?.remove();
_commandsOverlay = null;
});
}
},
), ),
padding: const EdgeInsets.all(0),
constraints: BoxConstraints.tightFor(
height: 24,
width: 24,
),
splashRadius: 24,
onPressed: () async {
if (_openFilePickerSection) {
setState(() {
_animateContainer = false;
_openFilePickerSection = false;
_filePickerSize = _kMinMediaPickerSize;
});
await Future.delayed(Duration(milliseconds: 300));
}
if (_commandsOverlay == null) {
setState(() {
_commandsOverlay = _buildCommandsOverlayEntry();
Overlay.of(context).insert(_commandsOverlay);
});
} else {
setState(() {
_commandsOverlay?.remove();
_commandsOverlay = null;
});
}
},
); );
} }
Widget _buildAttachmentButton() { Widget _buildAttachmentButton() {
return Padding( return IconButton(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8), icon: StreamSvgIcon.attach(
child: IconButton( color: _openFilePickerSection
icon: StreamSvgIcon.attach( ? StreamChatTheme.of(context).colorTheme.accentBlue
color: _openFilePickerSection : StreamChatTheme.of(context).colorTheme.grey,
? StreamChatTheme.of(context).colorTheme.accentBlue
: StreamChatTheme.of(context).colorTheme.grey,
),
padding: const EdgeInsets.all(0),
constraints: BoxConstraints.tightFor(
height: 24,
width: 24,
),
splashRadius: 24,
onPressed: () async {
_emojiOverlay?.remove();
_emojiOverlay = null;
_commandsOverlay?.remove();
_commandsOverlay = null;
_mentionsOverlay?.remove();
_mentionsOverlay = null;
if (_openFilePickerSection) {
setState(() {
_animateContainer = true;
_openFilePickerSection = false;
_filePickerSize = _kMinMediaPickerSize;
});
} else {
showAttachmentModal();
}
},
), ),
padding: const EdgeInsets.all(0),
constraints: BoxConstraints.tightFor(
height: 24,
width: 24,
),
splashRadius: 24,
onPressed: () async {
_emojiOverlay?.remove();
_emojiOverlay = null;
_commandsOverlay?.remove();
_commandsOverlay = null;
_mentionsOverlay?.remove();
_mentionsOverlay = null;
if (_openFilePickerSection) {
setState(() {
_animateContainer = true;
_openFilePickerSection = false;
_filePickerSize = _kMinMediaPickerSize;
});
} else {
showAttachmentModal();
}
},
); );
} }
@@ -2118,31 +2111,24 @@ class MessageInputState extends State<MessageInput> {
} }
Widget _buildIdleSendButton(BuildContext context) { Widget _buildIdleSendButton(BuildContext context) {
return Padding( return StreamSvgIcon(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8), assetName: _getIdleSendIcon(),
child: StreamSvgIcon( color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
assetName: _getIdleSendIcon(),
color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
),
); );
} }
Widget _buildSendButton(BuildContext context) { Widget _buildSendButton(BuildContext context) {
return Padding( return IconButton(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8), onPressed: sendMessage,
child: IconButton( padding: const EdgeInsets.all(0),
onPressed: sendMessage, splashRadius: 24,
visualDensity: VisualDensity.compact, constraints: BoxConstraints.tightFor(
padding: const EdgeInsets.all(0), height: 24,
splashRadius: 24, width: 24,
constraints: BoxConstraints.tightFor( ),
height: 24, icon: StreamSvgIcon(
width: 24, assetName: _getSendIcon(),
), color: StreamChatTheme.of(context).colorTheme.accentBlue,
icon: StreamSvgIcon(
assetName: _getSendIcon(),
color: StreamChatTheme.of(context).colorTheme.accentBlue,
),
), ),
); );
} }
lib/src/message_list_view.dart
+79 -67
View File
@@ -17,6 +17,7 @@ import '../stream_chat_flutter.dart';
import 'date_divider.dart'; import 'date_divider.dart';
import 'stream_channel.dart'; import 'stream_channel.dart';
import 'swipeable.dart'; import 'swipeable.dart';
import 'extension.dart';
typedef MessageBuilder = Widget Function( typedef MessageBuilder = Widget Function(
BuildContext, BuildContext,
@@ -338,9 +339,28 @@ class _MessageListViewState extends State<MessageListView> {
messages.length + 2 + (_isThreadConversation ? 1 : 0), messages.length + 2 + (_isThreadConversation ? 1 : 0),
separatorBuilder: (context, i) { separatorBuilder: (context, i) {
if (i == messages.length) return Offstage(); if (i == messages.length) return Offstage();
if (i == messages.length + 2) return Offstage();
if (i == messages.length + 1) return Offstage();
if (i == 0) return SizedBox(height: 30); if (i == 0) return SizedBox(height: 30);
if (i == messages.length + 1) {
final replyCount = widget.parentMessage.replyCount;
return Container(
decoration: BoxDecoration(
gradient:
StreamChatTheme.of(context).colorTheme.bgGradient,
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'$replyCount ${replyCount == 1 ? 'Reply' : 'Replies'}',
textAlign: TextAlign.center,
style: StreamChatTheme.of(context)
.channelTheme
.channelHeaderTheme
.lastMessageAt,
),
),
);
}
final message = messages[i]; final message = messages[i];
final nextMessage = messages[i - 1]; final nextMessage = messages[i - 1];
if (!Jiffy(message.createdAt.toLocal()).isSame( if (!Jiffy(message.createdAt.toLocal()).isSame(
@@ -385,30 +405,7 @@ class _MessageListViewState extends State<MessageListView> {
widget.parentMessage, widget.parentMessage,
); );
} else { } else {
return Column( return buildParentMessage(widget.parentMessage);
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
buildParentMessage(widget.parentMessage),
Container(
decoration: BoxDecoration(
gradient: StreamChatTheme.of(context)
.colorTheme
.bgGradient,
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'${widget.parentMessage.replyCount} ${widget.parentMessage.replyCount == 1 ? 'Reply' : 'Replies'}',
textAlign: TextAlign.center,
style: StreamChatTheme.of(context)
.channelTheme
.channelHeaderTheme
.lastMessageAt,
),
),
),
],
);
} }
} }
if (i == messages.length + 1) { if (i == messages.length + 1) {
@@ -602,37 +599,38 @@ class _MessageListViewState extends State<MessageListView> {
? streamChannel.queryTopMessages ? streamChannel.queryTopMessages
: streamChannel.queryBottomMessages; : streamChannel.queryBottomMessages;
return StreamBuilder<bool>( return StreamBuilder<bool>(
key: Key('LOADING-INDICATOR'), key: Key('LOADING-INDICATOR'),
stream: stream, stream: stream,
initialData: false, initialData: false,
builder: (context, snapshot) { builder: (context, snapshot) {
if (snapshot.hasError) { if (snapshot.hasError) {
return Container( return Container(
color: StreamChatTheme.of(context) color: StreamChatTheme.of(context)
.colorTheme .colorTheme
.accentRed .accentRed
.withOpacity(.2), .withOpacity(.2),
child: Center( child: Center(
child: Text('Error loading messages'), child: Text('Error loading messages'),
),
);
}
if (!snapshot.data) {
if (direction == QueryDirection.top) {
return Container(
height: 52,
width: double.infinity,
);
}
return Offstage();
}
return Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: const CircularProgressIndicator(),
), ),
); );
}); }
if (!snapshot.data) {
if (!_isThreadConversation && direction == QueryDirection.top) {
return Container(
height: 52,
width: double.infinity,
);
}
return Offstage();
}
return Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: const CircularProgressIndicator(),
),
);
},
);
} }
Widget _buildTopMessage( Widget _buildTopMessage(
@@ -711,6 +709,7 @@ class _MessageListViewState extends State<MessageListView> {
Message message, Message message,
) { ) {
final isMyMessage = message.user.id == StreamChat.of(context).user.id; final isMyMessage = message.user.id == StreamChat.of(context).user.id;
final isOnlyEmoji = message.text.isOnlyEmoji;
return MessageWidget( return MessageWidget(
showThreadReplyIndicator: false, showThreadReplyIndicator: false,
@@ -724,12 +723,7 @@ class _MessageListViewState extends State<MessageListView> {
message: message, message: message,
reverse: isMyMessage, reverse: isMyMessage,
showUsername: !isMyMessage, showUsername: !isMyMessage,
padding: EdgeInsets.only( padding: const EdgeInsets.all(8.0),
top: 8.0,
left: 8.0,
right: 8.0,
bottom: 16.0,
),
showSendingIndicator: false, showSendingIndicator: false,
onThreadTap: _onThreadTap, onThreadTap: _onThreadTap,
borderRadiusGeometry: BorderRadius.only( borderRadiusGeometry: BorderRadius.only(
@@ -738,7 +732,7 @@ class _MessageListViewState extends State<MessageListView> {
topRight: Radius.circular(16), topRight: Radius.circular(16),
bottomRight: Radius.circular(16), bottomRight: Radius.circular(16),
), ),
borderSide: isMyMessage ? BorderSide.none : null, borderSide: isMyMessage || isOnlyEmoji ? BorderSide.none : null,
showUserAvatar: isMyMessage ? DisplayWidget.gone : DisplayWidget.show, showUserAvatar: isMyMessage ? DisplayWidget.gone : DisplayWidget.show,
messageTheme: isMyMessage messageTheme: isMyMessage
? StreamChatTheme.of(context).ownMessageTheme ? StreamChatTheme.of(context).ownMessageTheme
@@ -813,8 +807,19 @@ class _MessageListViewState extends State<MessageListView> {
final showSendingIndicator = final showSendingIndicator =
isMyMessage && (index == 0 || timeDiff >= 1 || !isNextUserSame); isMyMessage && (index == 0 || timeDiff >= 1 || !isNextUserSame);
bool showInChannelIndicator = !_isThreadConversation && isThreadMessage; final showInChannelIndicator = !_isThreadConversation && isThreadMessage;
bool showThreadReplyIndicator = !_isThreadConversation && hasReplies; final showThreadReplyIndicator = !_isThreadConversation && hasReplies;
final isOnlyEmoji = message.text.isOnlyEmoji;
final showMessageBorder =
showThreadReplyIndicator || showInChannelIndicator;
final borderSide = isMyMessage
? !showMessageBorder
? BorderSide.none
: null
: isOnlyEmoji && !showMessageBorder
? BorderSide.none
: null;
Widget child = MessageWidget( Widget child = MessageWidget(
key: ValueKey<String>('MESSAGE-${message.id}'), key: ValueKey<String>('MESSAGE-${message.id}'),
@@ -852,20 +857,27 @@ class _MessageListViewState extends State<MessageListView> {
showDeleteMessage: isMyMessage, showDeleteMessage: isMyMessage,
showThreadReplyMessage: !isThreadMessage, showThreadReplyMessage: !isThreadMessage,
showFlagButton: !isMyMessage, showFlagButton: !isMyMessage,
borderSide: isMyMessage ? BorderSide.none : null, borderSide: borderSide,
onThreadTap: _onThreadTap, onThreadTap: _onThreadTap,
onReplyTap: widget.onReplyTap, onReplyTap: widget.onReplyTap,
attachmentBorderRadiusGeometry: BorderRadius.only( attachmentBorderRadiusGeometry: BorderRadius.only(
topLeft: Radius.circular(attachmentBorderRadius), topLeft: Radius.circular(attachmentBorderRadius),
bottomLeft: Radius.circular( bottomLeft: Radius.circular(
timeDiff >= 1 || !isNextUserSame ? 0 : attachmentBorderRadius), (timeDiff >= 1 || !isNextUserSame) && !(hasReplies || isThreadMessage)
? 0
: attachmentBorderRadius,
),
topRight: Radius.circular(attachmentBorderRadius), topRight: Radius.circular(attachmentBorderRadius),
bottomRight: Radius.circular(attachmentBorderRadius), bottomRight: Radius.circular(attachmentBorderRadius),
), ),
attachmentPadding: const EdgeInsets.all(2), attachmentPadding: const EdgeInsets.all(2),
borderRadiusGeometry: BorderRadius.only( borderRadiusGeometry: BorderRadius.only(
topLeft: Radius.circular(16), topLeft: Radius.circular(16),
bottomLeft: Radius.circular(timeDiff >= 1 || !isNextUserSame ? 0 : 16), bottomLeft: Radius.circular(
(timeDiff >= 1 || !isNextUserSame) && !(hasReplies || isThreadMessage)
? 0
: 16,
),
topRight: Radius.circular(16), topRight: Radius.circular(16),
bottomRight: Radius.circular(16), bottomRight: Radius.circular(16),
), ),
lib/src/message_widget.dart
+28 -16
View File
@@ -272,6 +272,12 @@ class _MessageWidgetState extends State<MessageWidget> {
widget.message.attachments?.any((element) => element.type == 'giphy') == widget.message.attachments?.any((element) => element.type == 'giphy') ==
true; true;
bool get hasNonUrlAttachments =>
widget.message.attachments
?.where((it) => it.ogScrapeUrl == null)
?.isNotEmpty ==
true;
bool get showBottomRow => bool get showBottomRow =>
showThreadReplyIndicator || showThreadReplyIndicator ||
showUsername || showUsername ||
@@ -385,11 +391,8 @@ class _MessageWidgetState extends State<MessageWidget> {
), ),
shape: widget.shape ?? shape: widget.shape ??
RoundedRectangleBorder( RoundedRectangleBorder(
side: isOnlyEmoji && side:
!(showThreadReplyIndicator || widget.borderSide ??
showInChannel)
? BorderSide.none
: widget.borderSide ??
BorderSide( BorderSide(
color: widget color: widget
.messageTheme .messageTheme
@@ -412,8 +415,9 @@ class _MessageWidgetState extends State<MessageWidget> {
children: <Widget>[ children: <Widget>[
if (hasQuotedMessage) if (hasQuotedMessage)
_buildQuotedMessage(), _buildQuotedMessage(),
..._parseAttachments( if (hasNonUrlAttachments)
context), ..._parseAttachments(
context),
if (widget.message.text if (widget.message.text
.trim() .trim()
.isNotEmpty && .isNotEmpty &&
@@ -490,13 +494,21 @@ class _MessageWidgetState extends State<MessageWidget> {
widget.onQuotedMessageTap != null widget.onQuotedMessageTap != null
? () => widget.onQuotedMessageTap(widget.message.quotedMessageId) ? () => widget.onQuotedMessageTap(widget.message.quotedMessageId)
: null; : null;
return QuotedMessageWidget( return Padding(
onTap: onTap, padding: EdgeInsets.only(
message: widget.message.quotedMessage, right: 8,
messageTheme: isMyMessage left: 8,
? StreamChatTheme.of(context).otherMessageTheme top: 8,
: StreamChatTheme.of(context).ownMessageTheme, bottom: hasNonUrlAttachments ? 8 : 0,
reverse: widget.reverse, ),
child: QuotedMessageWidget(
onTap: onTap,
message: widget.message.quotedMessage,
messageTheme: isMyMessage
? StreamChatTheme.of(context).otherMessageTheme
: StreamChatTheme.of(context).ownMessageTheme,
reverse: widget.reverse,
),
); );
} }
@@ -927,7 +939,7 @@ class _MessageWidgetState extends State<MessageWidget> {
? widget.messageTheme.copyWith( ? widget.messageTheme.copyWith(
messageText: messageText:
widget.messageTheme.messageText.copyWith( widget.messageTheme.messageText.copyWith(
fontSize: 40, fontSize: 42,
)) ))
: widget.messageTheme, : widget.messageTheme,
), ),
@@ -942,7 +954,7 @@ class _MessageWidgetState extends State<MessageWidget> {
); );
} }
bool get isOnlyEmoji => textIsOnlyEmoji(widget.message.text); bool get isOnlyEmoji => widget.message.text.isOnlyEmoji;
Color _getBackgroundColor() { Color _getBackgroundColor() {
if (hasQuotedMessage) { if (hasQuotedMessage) {
lib/src/quoted_message_widget.dart
+21 -26
View File
@@ -109,23 +109,20 @@ class QuotedMessageWidget extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return InkWell( return InkWell(
onTap: onTap, onTap: onTap,
child: Padding( child: Row(
padding: const EdgeInsets.only(top: 8, right: 4, left: 8), crossAxisAlignment: CrossAxisAlignment.end,
child: Row( mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end, children: [
mainAxisSize: MainAxisSize.min, Flexible(child: _buildMessage(context)),
children: [ SizedBox(width: 8),
Flexible(child: _buildMessage(context)), _buildUserAvatar(),
SizedBox(width: 4), ],
_buildUserAvatar(),
],
),
), ),
); );
} }
Widget _buildMessage(BuildContext context) { Widget _buildMessage(BuildContext context) {
final isOnlyEmoji = textIsOnlyEmoji(message.text); final isOnlyEmoji = message.text.isOnlyEmoji;
var msg = _hasAttachments && !_containsText var msg = _hasAttachments && !_containsText
? message.copyWith(text: message.attachments.last?.title ?? '') ? message.copyWith(text: message.attachments.last?.title ?? '')
: message; : message;
@@ -145,9 +142,12 @@ class QuotedMessageWidget extends StatelessWidget {
messageTheme: isOnlyEmoji && _containsText messageTheme: isOnlyEmoji && _containsText
? messageTheme.copyWith( ? messageTheme.copyWith(
messageText: messageTheme.messageText.copyWith( messageText: messageTheme.messageText.copyWith(
fontSize: 24, fontSize: 32,
)) ))
: messageTheme, : messageTheme.copyWith(
messageText: messageTheme.messageText.copyWith(
fontSize: 12,
)),
), ),
), ),
), ),
@@ -235,9 +235,7 @@ class QuotedMessageWidget extends StatelessWidget {
ShapeBorder _getDefaultShape(BuildContext context) { ShapeBorder _getDefaultShape(BuildContext context) {
return RoundedRectangleBorder( return RoundedRectangleBorder(
side: BorderSide( side: BorderSide(width: 0.0, color: Colors.transparent),
color: StreamChatTheme.of(context).colorTheme.greyWhisper,
),
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
); );
} }
@@ -246,16 +244,13 @@ class QuotedMessageWidget extends StatelessWidget {
return Transform( return Transform(
transform: Matrix4.rotationY(reverse ? pi : 0), transform: Matrix4.rotationY(reverse ? pi : 0),
alignment: Alignment.center, alignment: Alignment.center,
child: Padding( child: UserAvatar(
padding: const EdgeInsets.symmetric(horizontal: 4.0), user: message.user,
child: UserAvatar( constraints: BoxConstraints.tightFor(
user: message.user, height: 24,
constraints: BoxConstraints.tightFor( width: 24,
height: 24,
width: 24,
),
showOnlineStatus: false,
), ),
showOnlineStatus: false,
), ),
); );
} }
lib/src/utils.dart
+8 -28
View File
@@ -1,4 +1,3 @@
import 'package:emojis/emoji.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:stream_chat/stream_chat.dart'; import 'package:stream_chat/stream_chat.dart';
import 'package:url_launcher/url_launcher.dart'; import 'package:url_launcher/url_launcher.dart';
@@ -38,27 +37,21 @@ Future<bool> showConfirmationDialog(
return Column( return Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
SizedBox( SizedBox(height: 26.0),
height: 26.0,
),
if (icon != null) icon, if (icon != null) icon,
SizedBox( SizedBox(height: 26.0),
height: 26.0,
),
Text( Text(
title, title,
style: StreamChatTheme.of(context).textTheme.headlineBold, style: StreamChatTheme.of(context).textTheme.headlineBold,
), ),
SizedBox( SizedBox(height: 7.0),
height: 7.0, Text(
), question,
Text(question), textAlign: TextAlign.center,
SizedBox(
height: 36.0,
), ),
SizedBox(height: 36.0),
Container( Container(
color: color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
StreamChatTheme.of(context).colorTheme.black.withOpacity(.08),
height: 1.0, height: 1.0,
), ),
Row( Row(
@@ -293,16 +286,3 @@ StreamSvgIcon getFileTypeImage(String type) {
break; break;
} }
} }
final _emojis = Emoji.all();
bool textIsOnlyEmoji(String text) {
return text.trim().characters.isNotEmpty &&
text.trim().characters.every((c) =>
_emojis.firstWhere(
(Emoji emoji) => emoji.char.contains(c),
orElse: () => null,
) !=
null) &&
text.characters.length < 4;
}