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

merge origin/develop into ref/segregate-api-layer

Browse Source 
Signed-off-by: Sahil Kumar <[email protected]>
This commit is contained in:
Sahil Kumar
2021-06-15 17:32:09 +05:30
parent a0f1c76100 fec2e18c23
commit 7c9bc3b950
62 changed files with 2287 additions and 1620 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/stream_chat_flutter/lib/src/attachment/file_attachment.dart
+3 -3
View File
@@ -3,10 +3,10 @@ import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
import 'package:stream_chat_flutter/src/upload_progress_indicator.dart';
import 'package:stream_chat_flutter/src/utils.dart';
import 'package:stream_chat_flutter/src/video_thumbnail_image.dart';
import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
import 'package:stream_chat_flutter/src/upload_progress_indicator.dart';
// ignore: always_use_package_imports
import 'attachment_widget.dart';
@@ -103,7 +103,7 @@ class FileAttachment extends AttachmentWidget {
Widget _getFileTypeImage(BuildContext context) {
if (isImageAttachment) {
return Material(
clipBehavior: Clip.antiAlias,
clipBehavior: Clip.hardEdge,
type: MaterialType.transparency,
shape: _getDefaultShape(context),
child: source.when(
@@ -154,7 +154,7 @@ class FileAttachment extends AttachmentWidget {
if (isVideoAttachment) {
return Material(
clipBehavior: Clip.antiAlias,
clipBehavior: Clip.hardEdge,
type: MaterialType.transparency,
shape: _getDefaultShape(context),
child: source.when(
packages/stream_chat_flutter/lib/src/attachment/giphy_attachment.dart
+1 -1
View File
@@ -53,7 +53,7 @@ class GiphyAttachment extends AttachmentWidget {
Card(
color: StreamChatTheme.of(context).colorTheme.white,
elevation: 2,
clipBehavior: Clip.antiAlias,
clipBehavior: Clip.hardEdge,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(16),
packages/stream_chat_flutter/lib/src/attachment/image_attachment.dart
+6 -6
View File
@@ -74,16 +74,16 @@ class ImageAttachment extends AttachmentWidget {
if (imageUri.host == 'stream-io-cdn.com') {
imageUri = imageUri.replace(queryParameters: {
...imageUri.queryParameters,
'h': '500',
'w': '500',
'h': '400',
'w': '400',
'crop': 'center',
'resize': 'crop',
});
} else if (imageUri.host == 'stream-cloud-uploads.imgix.net') {
imageUri = imageUri.replace(queryParameters: {
...imageUri.queryParameters,
'height': '500',
'width': '500',
'height': '400',
'width': '400',
'fit': 'crop',
});
}
@@ -92,10 +92,10 @@ class ImageAttachment extends AttachmentWidget {
return _buildImageAttachment(
context,
CachedNetworkImage(
cacheKey: imageUri.path,
cacheKey: imageUrl,
height: size?.height,
width: size?.width,
placeholder: (_, __) {
placeholder: (context, __) {
final image = Image.asset(
'images/placeholder.png',
fit: BoxFit.cover,
packages/stream_chat_flutter/lib/src/channel_header.dart
+1 -2
View File
@@ -133,8 +133,7 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
}
return InfoTile(
// ignore: avoid_bool_literals_in_conditional_expressions
showMessage: showConnectionStateTile ? showStatus : false,
showMessage: showConnectionStateTile && showStatus,
message: statusString,
child: AppBar(
textTheme: Theme.of(context).textTheme,
packages/stream_chat_flutter/lib/src/channel_image.dart
+12 -12
View File
@@ -83,26 +83,28 @@ class ChannelImage extends StatelessWidget {
Widget build(BuildContext context) {
final streamChat = StreamChat.of(context);
final channel = this.channel ?? StreamChannel.of(context).channel;
return StreamBuilder<Map<String, dynamic>>(
return BetterStreamBuilder<Map<String, dynamic>>(
stream: channel.extraDataStream,
initialData: channel.extraData,
builder: (context, snapshot) {
builder: (context, data) {
String? image;
final chatThemeData = StreamChatTheme.of(context);
if (snapshot.data!.containsKey('image') == true) {
image = snapshot.data!['image'];
if (data.containsKey('image') == true) {
image = data['image'];
} else if (channel.state?.members.length == 2) {
final otherMember = channel.state?.members
.firstWhere((member) => member.user?.id != streamChat.user?.id);
return StreamBuilder<User>(
stream: streamChat.client.state.usersStream.map(
(users) => users[otherMember?.userId] ?? otherMember!.user!),
return BetterStreamBuilder<User?>(
stream: streamChat.client.state.usersStream
.map((users) =>
users[otherMember?.userId] ?? otherMember!.user!)
.distinct(),
initialData: otherMember!.user,
builder: (context, snapshot) => UserAvatar(
builder: (context, user) => UserAvatar(
borderRadius: borderRadius ??
chatThemeData
.channelPreviewTheme.avatarTheme?.borderRadius,
user: snapshot.data ?? otherMember.user!,
user: user ?? otherMember.user!,
constraints: constraints ??
chatThemeData
.channelPreviewTheme.avatarTheme?.constraints,
@@ -153,9 +155,7 @@ class ChannelImage extends StatelessWidget {
imageUrl: image,
errorWidget: (_, __, ___) => Center(
child: Text(
snapshot.data?.containsKey('name') ?? false
? snapshot.data!['name'][0]
: '',
data.containsKey('name') ? data['name'][0] : '',
style: TextStyle(
color: chatThemeData.colorTheme.white,
fontWeight: FontWeight.bold,
packages/stream_chat_flutter/lib/src/channel_info.dart
+5 -5
View File
@@ -25,14 +25,14 @@ class ChannelInfo extends StatelessWidget {
@override
Widget build(BuildContext context) {
final client = StreamChat.of(context).client;
return StreamBuilder<List<Member>>(
stream: channel.state?.membersStream,
initialData: channel.state?.members,
builder: (context, snapshot) => ConnectionStatusBuilder(
return BetterStreamBuilder<List<Member>>(
stream: channel.state!.membersStream,
initialData: channel.state!.members,
builder: (context, data) => ConnectionStatusBuilder(
statusBuilder: (context, status) {
switch (status) {
case ConnectionStatus.connected:
return _buildConnectedTitleState(context, snapshot.data);
return _buildConnectedTitleState(context, data);
case ConnectionStatus.connecting:
return _buildConnectingTitleState(context);
case ConnectionStatus.disconnected:
packages/stream_chat_flutter/lib/src/channel_list_view.dart
+97 -104
View File
@@ -1,11 +1,10 @@
import 'package:collection/collection.dart' show IterableExtension;
import 'package:collection/collection.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
import 'package:shimmer/shimmer.dart';
import 'package:stream_chat_flutter/src/channel_bottom_sheet.dart';
import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
import 'package:stream_chat_flutter/src/utils.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
@@ -257,10 +256,7 @@ class _ChannelListViewState extends State<ChannelListView> {
}
}
return AnimatedSwitcher(
duration: const Duration(milliseconds: 500),
child: child,
);
return child;
}
Widget _buildEmptyWidget(BuildContext context) => LayoutBuilder(
@@ -477,104 +473,105 @@ class _ChannelListViewState extends State<ChannelListView> {
Widget _listItemBuilder(BuildContext context, int i, List<Channel> channels) {
final channelsBloc = ChannelsBloc.of(context);
final onTap = _getChannelTap(context);
final chatThemeData = StreamChatTheme.of(context);
final backgroundColor = chatThemeData.colorTheme.whiteSmoke;
if (i < channels.length) {
final channel = channels[i];
final onTap = _getChannelTap(context);
final chatThemeData = StreamChatTheme.of(context);
final backgroundColor = chatThemeData.colorTheme.whiteSmoke;
return StreamChannel(
key: ValueKey<String>('CHANNEL-${channel.id}'),
key: ValueKey<String>('CHANNEL-${channel.cid}'),
channel: channel,
child: Builder(
builder: (context) => Slidable(
controller: _slideController,
enabled: widget.swipeToAction,
actionPane: const SlidableBehindActionPane(),
actionExtentRatio: 0.12,
secondaryActions: widget.swipeActions
?.map((e) => IconSlideAction(
color: e.color,
iconWidget: e.iconWidget,
onTap: () {
e.onTap?.call(channel);
},
))
.toList() ??
<Widget>[
child: Slidable(
controller: _slideController,
enabled: widget.swipeToAction,
actionPane: const SlidableBehindActionPane(),
actionExtentRatio: 0.12,
secondaryActions: widget.swipeActions
?.map((e) => IconSlideAction(
color: e.color,
iconWidget: e.iconWidget,
onTap: () {
e.onTap?.call(channel);
},
))
.toList() ??
<Widget>[
IconSlideAction(
color: backgroundColor,
icon: Icons.more_horiz,
onTap: widget.onMoreDetailsPressed != null
? () {
widget.onMoreDetailsPressed!(channel);
}
: () {
showModalBottomSheet(
clipBehavior: Clip.hardEdge,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(32),
topRight: Radius.circular(32),
),
),
context: context,
builder: (context) => StreamChannel(
channel: channel,
child: ChannelBottomSheet(
onViewInfoTap: () {
widget.onViewInfoTap?.call(channel);
},
),
),
);
},
),
if ([
'admin',
'owner',
].contains(channel.state!.members
.firstWhereOrNull(
(m) => m.userId == channel.client.state.user?.id)
?.role))
IconSlideAction(
color: backgroundColor,
icon: Icons.more_horiz,
onTap: widget.onMoreDetailsPressed != null
iconWidget: StreamSvgIcon.delete(
color: chatThemeData.colorTheme.accentRed,
),
onTap: widget.onDeletePressed != null
? () {
widget.onMoreDetailsPressed!(channel);
widget.onDeletePressed!(channel);
}
: () {
showModalBottomSheet(
clipBehavior: Clip.hardEdge,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(32),
topRight: Radius.circular(32),
),
),
context: context,
builder: (context) => StreamChannel(
channel: channel,
child: ChannelBottomSheet(
onViewInfoTap: () {
widget.onViewInfoTap?.call(channel);
},
),
: () async {
final res = await showConfirmationDialog(
context,
title: 'Delete Conversation',
okText: 'DELETE',
question:
// ignore: lines_longer_than_80_chars
'Are you sure you want to delete this conversation?',
cancelText: 'CANCEL',
icon: StreamSvgIcon.delete(
color: chatThemeData.colorTheme.accentRed,
),
);
if (res == true) {
await channel.delete();
}
},
),
if ([
'admin',
'owner',
].contains(channel.state!.members
.firstWhereOrNull(
(m) => m.userId == channel.client.state.user?.id)
?.role))
IconSlideAction(
color: backgroundColor,
iconWidget: StreamSvgIcon.delete(
color: chatThemeData.colorTheme.accentRed,
),
onTap: widget.onDeletePressed != null
? () {
widget.onDeletePressed!(channel);
}
: () async {
final res = await showConfirmationDialog(
context,
title: 'Delete Conversation',
okText: 'DELETE',
question:
// ignore: lines_longer_than_80_chars
'Are you sure you want to delete this conversation?',
cancelText: 'CANCEL',
icon: StreamSvgIcon.delete(
color: chatThemeData.colorTheme.accentRed,
),
);
if (res == true) {
await channel.delete();
}
},
),
],
child: Container(
],
child: DecoratedBox(
decoration: BoxDecoration(
color: chatThemeData.colorTheme.whiteSnow,
child: widget.channelPreviewBuilder?.call(context, channel) ??
ChannelPreview(
onLongPress: widget.onChannelLongPress,
channel: channel,
onImageTap: () => widget.onImageTap?.call(channel),
onTap: (channel) => onTap(channel, widget.channelWidget),
),
),
child: widget.channelPreviewBuilder?.call(context, channel) ??
ChannelPreview(
onLongPress: widget.onChannelLongPress,
channel: channel,
onImageTap: () => widget.onImageTap?.call(channel),
onTap: (channel) => onTap(channel, widget.channelWidget),
),
),
),
);
@@ -648,12 +645,10 @@ class _ChannelListViewState extends State<ChannelListView> {
context,
ChannelsBlocState channelsProvider,
) =>
StreamBuilder<bool>(
BetterStreamBuilder<bool>(
stream: channelsProvider.queryChannelsLoading,
initialData: false,
builder: (context, snapshot) {
if (snapshot.hasError) {
return Container(
errorBuilder: (context, err) => Container(
color: StreamChatTheme.of(context)
.colorTheme
.accentRed
@@ -664,17 +659,15 @@ class _ChannelListViewState extends State<ChannelListView> {
child: Text('Error loading channels'),
),
),
);
}
return snapshot.data!
? const Center(
child: Padding(
padding: EdgeInsets.all(16),
child: CircularProgressIndicator(),
),
)
: const Offstage();
});
),
builder: (context, data) => data
? const Center(
child: Padding(
padding: EdgeInsets.all(16),
child: CircularProgressIndicator(),
),
)
: const Offstage());
Widget _separatorBuilder(context, i) {
final effect = StreamChatTheme.of(context).colorTheme.borderBottom;
packages/stream_chat_flutter/lib/src/channel_name.dart
+3 -3
View File
@@ -26,11 +26,11 @@ class ChannelName extends StatelessWidget {
final client = StreamChat.of(context);
final channel = StreamChannel.of(context).channel;
return StreamBuilder<Map<String, dynamic>>(
return BetterStreamBuilder<Map<String, Object?>>(
stream: channel.extraDataStream,
initialData: channel.extraData,
builder: (context, snapshot) => _buildName(
snapshot.data!,
builder: (context, data) => _buildName(
data,
channel.state?.members,
client,
),
packages/stream_chat_flutter/lib/src/channel_preview.dart
+23 -20
View File
@@ -1,4 +1,5 @@
import 'package:collection/collection.dart' show IterableExtension;
import 'package:collection/collection.dart'
show IterableExtension, ListEquality;
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:jiffy/jiffy.dart';
@@ -69,12 +70,12 @@ class ChannelPreview extends StatelessWidget {
Widget build(BuildContext context) {
final channelPreviewTheme = StreamChatTheme.of(context).channelPreviewTheme;
final streamChatState = StreamChat.of(context);
return StreamBuilder<bool>(
return BetterStreamBuilder<bool>(
stream: channel.isMutedStream,
initialData: channel.isMuted,
builder: (context, snapshot) => Opacity(
opacity: snapshot.data! ? 0.5 : 1,
builder: (context, data) => AnimatedOpacity(
opacity: data ? 0.5 : 1,
duration: const Duration(milliseconds: 300),
child: ListTile(
visualDensity: VisualDensity.compact,
contentPadding: const EdgeInsets.symmetric(
@@ -103,14 +104,16 @@ class ChannelPreview extends StatelessWidget {
textStyle: channelPreviewTheme.title,
),
),
StreamBuilder<List<Member>>(
BetterStreamBuilder<List<Member>?>(
stream: channel.state?.membersStream,
initialData: channel.state?.members,
builder: (context, snapshot) {
if (!snapshot.hasData ||
snapshot.data!.isEmpty ||
!snapshot.data!.any((Member e) =>
e.user!.id == channel.client.state.user?.id)) {
comparator: const ListEquality().equals,
builder: (context, members) {
if (members?.isEmpty == true ||
members?.any((Member e) =>
e.user!.id ==
channel.client.state.user?.id) !=
true) {
return const SizedBox();
}
return UnreadIndicator(
@@ -159,14 +162,14 @@ class ChannelPreview extends StatelessWidget {
));
}
Widget _buildDate(BuildContext context) => StreamBuilder<DateTime?>(
Widget _buildDate(BuildContext context) => BetterStreamBuilder<DateTime?>(
stream: channel.lastMessageAtStream,
initialData: channel.lastMessageAt,
builder: (context, snapshot) {
if (!snapshot.hasData) {
return const SizedBox();
builder: (context, data) {
if (data == null) {
return const Offstage();
}
final lastMessageAt = snapshot.data!.toLocal();
final lastMessageAt = data.toLocal();
String stringDate;
final now = DateTime.now();
@@ -219,12 +222,12 @@ class ChannelPreview extends StatelessWidget {
}
Widget _buildLastMessage(BuildContext context) =>
StreamBuilder<List<Message>?>(
BetterStreamBuilder<List<Message>?>(
stream: channel.state!.messagesStream,
initialData: channel.state!.messages,
builder: (context, snapshot) {
final lastMessage = snapshot.data
?.lastWhereOrNull((m) => m.shadowed != true && !m.isDeleted);
builder: (context, data) {
final lastMessage =
data?.lastWhereOrNull((m) => m.shadowed != true && !m.isDeleted);
if (lastMessage == null) {
return const SizedBox();
}
packages/stream_chat_flutter/lib/src/connection_status_builder.dart
+9 -17
View File
@@ -12,15 +12,11 @@ class ConnectionStatusBuilder extends StatelessWidget {
const ConnectionStatusBuilder({
Key? key,
required this.statusBuilder,
this.initialStatus = ConnectionStatus.disconnected,
this.connectionStatusStream,
this.errorBuilder,
this.loadingBuilder,
}) : super(key: key);
/// The connection status that will be used to create the initial snapshot.
final ConnectionStatus initialStatus;
/// The asynchronous computation to which this builder is currently connected.
final Stream<ConnectionStatus>? connectionStatusStream;
@@ -38,22 +34,18 @@ class ConnectionStatusBuilder extends StatelessWidget {
Widget build(BuildContext context) {
final stream = connectionStatusStream ??
StreamChat.of(context).client.wsConnectionStatusStream;
return StreamBuilder<ConnectionStatus>(
initialData: initialStatus,
final client = StreamChat.of(context).client;
return BetterStreamBuilder<ConnectionStatus>(
initialData: client.wsConnectionStatus,
stream: stream,
builder: (context, snapshot) {
if (snapshot.hasError) {
if (errorBuilder != null) {
return errorBuilder!(context, snapshot.error);
}
return const Offstage();
loadingBuilder: loadingBuilder,
errorBuilder: (context, error) {
if (errorBuilder != null) {
return errorBuilder!(context, error);
}
if (!snapshot.hasData) {
if (loadingBuilder != null) return loadingBuilder!(context);
return const Offstage();
}
return statusBuilder(context, snapshot.data!);
return const Offstage();
},
builder: statusBuilder,
);
}
}
packages/stream_chat_flutter/lib/src/emoji/emoji.dart
+3
View File
@@ -114325,6 +114325,9 @@ class Emoji {
/// Get all Emojis
static List<Emoji> all() => List.unmodifiable(_emojis);
static Iterable<String> chars() =>
_emojis.map((e) => e.char).whereType<String>();
/// Returns Emoji by [char] and character
static Emoji? byChar(String char) {
return _emojis.firstWhereOrNull((Emoji emoji) => emoji.char == char);
packages/stream_chat_flutter/lib/src/extension.dart
+4 -4
View File
@@ -4,7 +4,7 @@ import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/src/emoji/emoji.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
final _emojis = Emoji.all();
final _emojiChars = Emoji.chars();
/// String extension
extension StringExtension on String {
@@ -17,10 +17,10 @@ extension StringExtension on String {
/// 1 to 3 emojis: big size with no text bubble.
/// 4+ emojis or emojis+text: standard size with text bubble.
bool get isOnlyEmoji {
if (isEmpty) return false;
if (length > 3) return false;
final characters = trim().characters;
if (characters.isEmpty) return false;
if (characters.length > 3) return false;
return characters.every((c) => _emojis.map((e) => e.char).contains(c));
return characters.every(_emojiChars.contains);
}
}
packages/stream_chat_flutter/lib/src/message_actions_modal.dart
+174 -124
View File
@@ -27,6 +27,8 @@ class MessageActionsModal extends StatefulWidget {
this.showResendMessage = true,
this.showThreadReplyMessage = true,
this.showFlagButton = true,
this.showPinButton = true,
this.showPinHighlight = false,
this.showUserAvatar = DisplayWidget.show,
this.editMessageInputBuilder,
this.messageShape,
@@ -35,6 +37,7 @@ class MessageActionsModal extends StatefulWidget {
this.customActions = const [],
this.attachmentBorderRadiusGeometry,
this.onCopyTap,
this.textBuilder,
}) : super(key: key);
/// Builder for edit message
@@ -79,6 +82,12 @@ class MessageActionsModal extends StatefulWidget {
/// Flag for showing flag action
final bool showFlagButton;
/// Flag for showing pin action
final bool showPinButton;
/// Display Pin Highlight
final bool showPinHighlight;
/// Flag for reversing message
final bool reverse;
@@ -97,6 +106,9 @@ class MessageActionsModal extends StatefulWidget {
/// List of custom actions
final List<MessageAction> customActions;
/// Customize the MessageWidget textBuilder
final Widget Function(BuildContext context, Message message)? textBuilder;
@override
_MessageActionsModalState createState() => _MessageActionsModalState();
}
@@ -135,6 +147,127 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
widget.message.attachments.any((it) => it.type == 'file') == true;
final streamChatThemeData = StreamChatTheme.of(context);
final numberOfReactions = streamChatThemeData.reactionIcons.length;
final shiftFactor =
numberOfReactions < 5 ? (5 - numberOfReactions) * 0.1 : 0.0;
final child = Center(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8),
child: Column(
crossAxisAlignment: widget.reverse
? CrossAxisAlignment.end
: CrossAxisAlignment.start,
children: <Widget>[
if (widget.showReactions &&
(widget.message.status == MessageSendingStatus.sent))
Align(
alignment: Alignment(
user?.id == widget.message.user?.id
? (divFactor >= 1.0
? -0.2 - shiftFactor
: (1.2 - divFactor))
: (divFactor >= 1.0
? 0.2 + shiftFactor
: -(1.2 - divFactor)),
0),
child: ReactionPicker(
message: widget.message,
),
),
const SizedBox(height: 8),
IgnorePointer(
child: MessageWidget(
key: const Key('MessageWidget'),
reverse: widget.reverse,
attachmentBorderRadiusGeometry: widget
.attachmentBorderRadiusGeometry
?.mirrorBorderIfReversed(reverse: !widget.reverse),
message: widget.message.copyWith(
text: widget.message.text!.length > 200
// ignore: lines_longer_than_80_chars
? '${widget.message.text!.substring(0, 200)}...'
: widget.message.text,
),
messageTheme: widget.messageTheme,
showReactions: false,
showUsername: false,
showReplyMessage: false,
showUserAvatar: widget.showUserAvatar,
attachmentPadding: EdgeInsets.all(
hasFileAttachment ? 4 : 2,
),
showTimestamp: false,
translateUserAvatar: false,
padding: const EdgeInsets.all(0),
textPadding: EdgeInsets.symmetric(
vertical: 8,
horizontal: widget.message.text!.isOnlyEmoji ? 0 : 16.0,
),
showReactionPickerIndicator: widget.showReactions &&
(widget.message.status == MessageSendingStatus.sent),
showSendingIndicator: false,
shape: widget.messageShape,
attachmentShape: widget.attachmentShape,
showPinHighlight: false,
textBuilder: widget.textBuilder,
),
),
const SizedBox(height: 8),
Padding(
padding: EdgeInsets.only(
left: widget.reverse ? 0 : 40,
),
child: SizedBox(
width: mediaQueryData.size.width * 0.75,
child: Material(
color: streamChatThemeData.colorTheme.whiteSnow,
clipBehavior: Clip.hardEdge,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
if (widget.showReplyMessage &&
widget.message.status == MessageSendingStatus.sent)
_buildReplyButton(context),
if (widget.showThreadReplyMessage &&
(widget.message.status ==
MessageSendingStatus.sent) &&
widget.message.parentId == null)
_buildThreadReplyButton(context),
if (widget.showResendMessage)
_buildResendMessage(context),
if (widget.showEditMessage) _buildEditMessage(context),
if (widget.showCopyMessage) _buildCopyButton(context),
if (widget.showFlagButton) _buildFlagButton(context),
if (widget.showPinButton) _buildPinButton(context),
if (widget.showDeleteMessage)
_buildDeleteButton(context),
...widget.customActions
.map((action) => _buildCustomAction(
context,
action,
))
].insertBetween(
Container(
height: 1,
color: streamChatThemeData.colorTheme.greyWhisper,
),
),
),
),
),
),
],
),
),
),
);
return GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () => Navigator.maybePop(context),
@@ -156,132 +289,11 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
tween: Tween(begin: 0, end: 1),
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOutBack,
builder: (context, val, snapshot) => Transform.scale(
builder: (context, val, child) => Transform.scale(
scale: val,
child: Center(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8),
child: Column(
crossAxisAlignment: widget.reverse
? CrossAxisAlignment.end
: CrossAxisAlignment.start,
children: <Widget>[
if (widget.showReactions &&
(widget.message.status ==
MessageSendingStatus.sent))
Align(
alignment: Alignment(
user?.id == widget.message.user?.id
? (divFactor >= 1.0
? -0.2
: (1.2 - divFactor))
: (divFactor >= 1.0
? 0.2
: -(1.2 - divFactor)),
0),
child: ReactionPicker(
message: widget.message,
),
),
const SizedBox(height: 8),
IgnorePointer(
child: MessageWidget(
key: const Key('MessageWidget'),
reverse: widget.reverse,
attachmentBorderRadiusGeometry: widget
.attachmentBorderRadiusGeometry
?.mirrorBorderIfReversed(
reverse: !widget.reverse),
message: widget.message.copyWith(
text: widget.message.text!.length > 200
// ignore: lines_longer_than_80_chars
? '${widget.message.text!.substring(0, 200)}...'
: widget.message.text,
),
messageTheme: widget.messageTheme,
showReactions: false,
showUsername: false,
showReplyMessage: false,
showUserAvatar: widget.showUserAvatar,
attachmentPadding: EdgeInsets.all(
hasFileAttachment ? 4 : 2,
),
showTimestamp: false,
translateUserAvatar: false,
padding: const EdgeInsets.all(0),
textPadding: EdgeInsets.symmetric(
vertical: 8,
horizontal:
widget.message.text!.isOnlyEmoji ? 0 : 16.0,
),
showReactionPickerIndicator:
widget.showReactions &&
(widget.message.status ==
MessageSendingStatus.sent),
showSendingIndicator: false,
shape: widget.messageShape,
attachmentShape: widget.attachmentShape,
),
),
const SizedBox(height: 8),
Padding(
padding: EdgeInsets.only(
left: widget.reverse ? 0 : 40,
),
child: SizedBox(
width: mediaQueryData.size.width * 0.75,
child: Material(
color: streamChatThemeData.colorTheme.whiteSnow,
clipBehavior: Clip.hardEdge,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.stretch,
children: [
if (widget.showReplyMessage &&
widget.message.status ==
MessageSendingStatus.sent)
_buildReplyButton(context),
if (widget.showThreadReplyMessage &&
(widget.message.status ==
MessageSendingStatus.sent) &&
widget.message.parentId == null)
_buildThreadReplyButton(context),
if (widget.showResendMessage)
_buildResendMessage(context),
if (widget.showEditMessage)
_buildEditMessage(context),
if (widget.showCopyMessage)
_buildCopyButton(context),
if (widget.showFlagButton)
_buildFlagButton(context),
if (widget.showDeleteMessage)
_buildDeleteButton(context),
...widget.customActions
.map((action) => _buildCustomAction(
context,
action,
))
].insertBetween(
Container(
height: 1,
color: streamChatThemeData
.colorTheme.greyWhisper,
),
),
),
),
),
),
],
),
),
),
),
child: child,
),
child: child,
),
],
),
@@ -360,6 +372,21 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
}
}
void _togglePin() async {
final channel = StreamChannel.of(context).channel;
Navigator.pop(context);
try {
if (!widget.message.pinned) {
await channel.pinMessage(widget.message);
} else {
await channel.unpinMessage(widget.message);
}
} catch (e) {
_showErrorAlert();
}
}
void _showDeleteDialog() async {
setState(() {
_showActions = false;
@@ -452,6 +479,29 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
);
}
Widget _buildPinButton(BuildContext context) {
final streamChatThemeData = StreamChatTheme.of(context);
return InkWell(
onTap: _togglePin,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 11, horizontal: 16),
child: Row(
children: [
StreamSvgIcon.pin(
color: streamChatThemeData.primaryIconTheme.color,
size: 24,
),
const SizedBox(width: 16),
Text(
'${widget.message.pinned ? 'Unpin from' : 'Pin to'} Conversation',
style: streamChatThemeData.textTheme.body,
),
],
),
),
);
}
Widget _buildDeleteButton(BuildContext context) {
final isDeleteFailed =
widget.message.status == MessageSendingStatus.failed_delete;
packages/stream_chat_flutter/lib/src/message_input.dart
+463 -482
View File
File diff suppressed because it is too large Load Diff
packages/stream_chat_flutter/lib/src/message_list_view.dart
+230 -139
View File
@@ -2,6 +2,7 @@ import 'dart:async';
import 'dart:math';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:jiffy/jiffy.dart';
import 'package:rxdart/rxdart.dart';
@@ -156,8 +157,12 @@ class MessageListView extends StatefulWidget {
this.onMessageTap,
this.onSystemMessageTap,
this.onAttachmentTap,
this.textBuilder,
this.onLinkTap,
this.pinPermissions = const [],
this.textBuilder,
this.usernameBuilder,
this.showFloatingDateDivider = true,
this.threadSeparatorBuilder,
}) : super(key: key);
/// Function used to build a custom message widget
@@ -224,6 +229,9 @@ class MessageListView extends StatefulWidget {
/// Flag for showing tile on header
final bool showConnectionStateTile;
/// Flag for showing the floating date divider
final bool showFloatingDateDivider;
/// Function called when messages are fetched
final Widget Function(BuildContext, List<Message>)? messageListBuilder;
@@ -259,11 +267,20 @@ class MessageListView extends StatefulWidget {
final void Function(Message message, Attachment attachment)? onAttachmentTap;
/// Customize the MessageWidget textBuilder
final void Function(BuildContext context, Message message)? textBuilder;
final Widget Function(BuildContext context, Message message)? textBuilder;
/// Customize the MessageWidget usernameBuilder
final Widget Function(BuildContext context, Message message)? usernameBuilder;
/// Callback for when link is tapped
final void Function(String link)? onLinkTap;
/// A List of user types that have permission to pin messages
final List<String> pinPermissions;
/// Builder used to build the thread separator in case it's a thread view
final WidgetBuilder? threadSeparatorBuilder;
@override
_MessageListViewState createState() => _MessageListViewState();
}
@@ -273,8 +290,10 @@ class _MessageListViewState extends State<MessageListView> {
void Function(Message)? _onThreadTap;
bool _showScrollToBottom = false;
late final ItemPositionsListener _itemPositionListener;
late final Stream<Iterable<ItemPosition>> _itemPositionStream;
int? _messageListLength;
StreamChannelState? streamChannel;
late StreamChatThemeData _streamTheme;
int? get _initialIndex {
if (widget.initialScrollIndex != null) return widget.initialScrollIndex;
@@ -316,37 +335,34 @@ class _MessageListViewState extends State<MessageListView> {
final MessageListController _messageListController = MessageListController();
@override
Widget build(BuildContext context) {
final chatThemeData = StreamChatTheme.of(context);
return MessageListCore(
messageFilter: widget.messageFilter,
loadingBuilder: widget.loadingBuilder ??
(context) => const Center(
child: CircularProgressIndicator(),
),
emptyBuilder: widget.emptyBuilder ??
(context) => Center(
child: Text(
'No chats here yet...',
style: chatThemeData.textTheme.footnote.copyWith(
color: chatThemeData.colorTheme.black.withOpacity(.5)),
Widget build(BuildContext context) => MessageListCore(
messageFilter: widget.messageFilter,
loadingBuilder: widget.loadingBuilder ??
(context) => const Center(
child: CircularProgressIndicator(),
),
),
messageListBuilder:
widget.messageListBuilder ?? (context, list) => _buildListView(list),
messageListController: _messageListController,
parentMessage: widget.parentMessage,
showScrollToBottom: widget.showScrollToBottom,
errorWidgetBuilder: widget.errorWidgetBuilder ??
(BuildContext context, Object error) => Center(
child: Text(
'Something went wrong',
style: chatThemeData.textTheme.footnote.copyWith(
color: chatThemeData.colorTheme.black.withOpacity(.5)),
emptyBuilder: widget.emptyBuilder ??
(context) => Center(
child: Text(
'No chats here yet...',
style: _streamTheme.textTheme.footnote.copyWith(
color: _streamTheme.colorTheme.black.withOpacity(.5)),
),
),
),
);
}
messageListBuilder: widget.messageListBuilder ??
(context, list) => _buildListView(list),
messageListController: _messageListController,
parentMessage: widget.parentMessage,
showScrollToBottom: widget.showScrollToBottom,
errorWidgetBuilder: widget.errorWidgetBuilder ??
(BuildContext context, Object error) => Center(
child: Text(
'Something went wrong',
style: _streamTheme.textTheme.footnote.copyWith(
color: _streamTheme.colorTheme.black.withOpacity(.5)),
),
),
);
Widget _buildListView(List<Message> data) {
messages = data;
@@ -392,8 +408,7 @@ class _MessageListViewState extends State<MessageListView> {
}
return InfoTile(
// ignore: avoid_bool_literals_in_conditional_expressions
showMessage: widget.showConnectionStateTile ? showStatus : false,
showMessage: widget.showConnectionStateTile && showStatus,
tileAnchor: Alignment.topCenter,
childAnchor: Alignment.topCenter,
message: statusString,
@@ -432,29 +447,14 @@ class _MessageListViewState extends State<MessageListView> {
physics: widget.scrollPhysics,
itemScrollController: _scrollController,
reverse: true,
addAutomaticKeepAlives: false,
itemCount:
messages.length + 2 + (_isThreadConversation ? 1 : 0),
separatorBuilder: (context, i) {
if (i == messages.length) return const Offstage();
if (i == 0) return const SizedBox(height: 30);
if (i == messages.length + 1) {
final replyCount = widget.parentMessage!.replyCount;
final chatThemeData = StreamChatTheme.of(context);
return Container(
decoration: BoxDecoration(
gradient: chatThemeData.colorTheme.bgGradient,
),
child: Padding(
padding: const EdgeInsets.all(8),
child: Text(
// ignore: lines_longer_than_80_chars
'$replyCount ${replyCount == 1 ? 'Reply' : 'Replies'}',
textAlign: TextAlign.center,
style: chatThemeData
.channelTheme.channelHeaderTheme.subtitle,
),
),
);
return _buildThreadSeparator();
}
final message = messages[i];
@@ -560,40 +560,73 @@ class _MessageListViewState extends State<MessageListView> {
},
),
if (widget.showScrollToBottom) _buildScrollToBottom(),
Positioned(
top: 20,
child: ValueListenableBuilder<Iterable<ItemPosition>>(
valueListenable: _itemPositionListener.itemPositions,
builder: (context, values, _) {
final items = _itemPositionListener.itemPositions.value;
if (items.isEmpty || messages.isEmpty) {
return const SizedBox();
}
var index = _getTopElement(values)?.index;
if (index == null || index > messages.length) {
return const SizedBox();
}
if (index == messages.length) {
index = max(index - 1, 0);
}
return widget.dateDividerBuilder != null
? widget.dateDividerBuilder!(
messages[index].createdAt.toLocal(),
)
: DateDivider(
dateTime: messages[index].createdAt.toLocal(),
);
},
),
),
if (widget.showFloatingDateDivider) _buildFloatingDateDivider(),
],
);
}
Widget _buildThreadSeparator() {
if (widget.threadSeparatorBuilder != null) {
return widget.threadSeparatorBuilder!.call(context);
}
final replyCount = widget.parentMessage!.replyCount;
return DecoratedBox(
decoration: BoxDecoration(
gradient: _streamTheme.colorTheme.bgGradient,
),
child: Padding(
padding: const EdgeInsets.all(8),
child: Text(
// ignore: lines_longer_than_80_chars
'$replyCount ${replyCount == 1 ? 'Reply' : 'Replies'}',
textAlign: TextAlign.center,
style: _streamTheme.channelTheme.channelHeaderTheme.subtitle,
),
),
);
}
Positioned _buildFloatingDateDivider() => Positioned(
top: 20,
child: BetterStreamBuilder<Iterable<ItemPosition>>(
initialData: _itemPositionListener.itemPositions.value,
stream: _itemPositionStream,
comparator: (a, b) {
if (a == null) {
return false;
}
final aTop = _getTopElement(a)?.index;
final bTop = _getTopElement(b)?.index;
return aTop == bTop;
},
builder: (context, values) {
final items = _itemPositionListener.itemPositions.value;
if (items.isEmpty || messages.isEmpty) {
return const SizedBox();
}
var index = _getTopElement(values)?.index;
if (index == null || index > messages.length) {
return const SizedBox();
}
if (index == messages.length) {
index = max(index - 1, 0);
}
return widget.dateDividerBuilder != null
? widget.dateDividerBuilder!(
messages[index].createdAt.toLocal(),
)
: DateDivider(
dateTime: messages[index].createdAt.toLocal(),
);
},
),
);
Future<void> _paginateData(
StreamChannelState? channel, QueryDirection direction) =>
_messageListController.paginateData!(direction: direction);
@@ -612,8 +645,8 @@ class _MessageListViewState extends State<MessageListView> {
Widget _buildScrollToBottom() => StreamBuilder<Tuple2<bool, int>>(
stream: Rx.combineLatest2(
streamChannel!.channel.state!.isUpToDateStream,
streamChannel!.channel.state!.unreadCountStream,
streamChannel!.channel.state!.isUpToDateStream.distinct(),
streamChannel!.channel.state!.unreadCountStream.distinct(),
(bool isUpToDate, int unreadCount) => Tuple2(isUpToDate, unreadCount),
),
builder: (_, snapshot) {
@@ -631,7 +664,6 @@ class _MessageListViewState extends State<MessageListView> {
final showUnreadCount = unreadCount > 0 &&
streamChannel!.channel.state!.members.any((e) =>
e.userId == streamChannel!.channel.client.state.user!.id);
final chatThemeData = StreamChatTheme.of(context);
return Positioned(
bottom: 8,
right: 8,
@@ -641,7 +673,7 @@ class _MessageListViewState extends State<MessageListView> {
clipBehavior: Clip.none,
children: [
FloatingActionButton(
backgroundColor: chatThemeData.colorTheme.white,
backgroundColor: _streamTheme.colorTheme.white,
onPressed: () {
if (unreadCount > 0) {
streamChannel!.channel.markRead();
@@ -660,7 +692,7 @@ class _MessageListViewState extends State<MessageListView> {
}
},
child: StreamSvgIcon.down(
color: chatThemeData.colorTheme.black,
color: _streamTheme.colorTheme.black,
),
),
if (showUnreadCount)
@@ -691,44 +723,13 @@ class _MessageListViewState extends State<MessageListView> {
Widget _buildLoadingIndicator(
StreamChannelState streamChannel,
QueryDirection direction,
) {
final stream = direction == QueryDirection.top
? streamChannel.queryTopMessages
: streamChannel.queryBottomMessages;
return StreamBuilder<bool>(
key: const Key('LOADING-INDICATOR'),
stream: stream,
initialData: false,
builder: (context, snapshot) {
if (snapshot.hasError) {
return Container(
color: StreamChatTheme.of(context)
.colorTheme
.accentRed
.withOpacity(.2),
child: const Center(
child: Text('Error loading messages'),
),
);
}
if (!snapshot.data!) {
if (!_isThreadConversation && direction == QueryDirection.top) {
return const SizedBox(
height: 52,
width: double.infinity,
);
}
return const Offstage();
}
return const Center(
child: Padding(
padding: EdgeInsets.all(8),
child: CircularProgressIndicator(),
),
);
},
);
}
) =>
_LoadingIndicator(
direction: direction,
streamTheme: _streamTheme,
streamChannel: streamChannel,
isThreadConversation: _isThreadConversation,
);
Widget _buildTopMessage(
BuildContext context,
@@ -795,7 +796,9 @@ class _MessageListViewState extends State<MessageListView> {
}
}
if (mounted) {
setState(() => _showScrollToBottom = !isVisible);
if (_showScrollToBottom == isVisible) {
setState(() => _showScrollToBottom = !isVisible);
}
}
},
child: messageWidget,
@@ -807,8 +810,11 @@ class _MessageListViewState extends State<MessageListView> {
) {
final isMyMessage = message.user!.id == StreamChat.of(context).user!.id;
final isOnlyEmoji = message.text!.isOnlyEmoji;
final currentUser = StreamChat.of(context).user;
final members = StreamChannel.of(context).channel.state?.members ?? [];
final currentUserMember =
members.firstWhere((e) => e.user!.id == currentUser!.id);
final chatThemeData = StreamChatTheme.of(context);
return MessageWidget(
showReplyMessage: false,
showResendMessage: false,
@@ -837,8 +843,8 @@ class _MessageListViewState extends State<MessageListView> {
borderSide: isMyMessage || isOnlyEmoji ? BorderSide.none : null,
showUserAvatar: isMyMessage ? DisplayWidget.gone : DisplayWidget.show,
messageTheme: isMyMessage
? chatThemeData.ownMessageTheme
: chatThemeData.otherMessageTheme,
? _streamTheme.ownMessageTheme
: _streamTheme.otherMessageTheme,
onShowMessage: widget.onShowMessage,
onReturnAction: (action) {
switch (action) {
@@ -857,9 +863,10 @@ class _MessageListViewState extends State<MessageListView> {
}
FocusScope.of(context).unfocus();
},
textBuilder:
widget.textBuilder as Widget Function(BuildContext, Message)?,
textBuilder: widget.textBuilder,
usernameBuilder: widget.usernameBuilder,
onLinkTap: widget.onLinkTap,
showPinButton: widget.pinPermissions.contains(currentUserMember.role),
);
}
@@ -946,7 +953,11 @@ class _MessageListViewState extends State<MessageListView> {
? BorderSide.none
: null;
final chatThemeData = StreamChatTheme.of(context);
final currentUser = StreamChat.of(context).user;
final members = StreamChannel.of(context).channel.state?.members ?? [];
final currentUserMember =
members.firstWhere((e) => e.user!.id == currentUser!.id);
Widget child = MessageWidget(
key: ValueKey<String>('MESSAGE-${message.id}'),
message: message,
@@ -1033,8 +1044,8 @@ class _MessageListViewState extends State<MessageListView> {
horizontal: isOnlyEmoji ? 0 : 16.0,
),
messageTheme: isMyMessage
? chatThemeData.ownMessageTheme
: chatThemeData.otherMessageTheme,
? _streamTheme.ownMessageTheme
: _streamTheme.otherMessageTheme,
readList: readList,
allRead: allRead,
onShowMessage: widget.onShowMessage,
@@ -1056,9 +1067,10 @@ class _MessageListViewState extends State<MessageListView> {
FocusScope.of(context).unfocus();
},
onAttachmentTap: widget.onAttachmentTap,
textBuilder:
widget.textBuilder as Widget Function(BuildContext, Message)?,
textBuilder: widget.textBuilder,
usernameBuilder: widget.usernameBuilder,
onLinkTap: widget.onLinkTap,
showPinButton: widget.pinPermissions.contains(currentUserMember.role),
);
if (!message.isDeleted &&
@@ -1074,7 +1086,7 @@ class _MessageListViewState extends State<MessageListView> {
widget.onMessageSwiped?.call(message);
},
backgroundIcon: StreamSvgIcon.reply(
color: chatThemeData.colorTheme.accentBlue,
color: _streamTheme.colorTheme.accentBlue,
),
child: child,
),
@@ -1084,7 +1096,7 @@ class _MessageListViewState extends State<MessageListView> {
if (!initialMessageHighlightComplete &&
widget.highlightInitialMessage &&
_isInitialMessage(message.id)) {
final colorTheme = chatThemeData.colorTheme;
final colorTheme = _streamTheme.colorTheme;
final highlightColor =
widget.messageHighlightColor ?? colorTheme.highlight;
child = TweenAnimationBuilder<Color?>(
@@ -1114,6 +1126,8 @@ class _MessageListViewState extends State<MessageListView> {
_scrollController = widget.scrollController ?? ItemScrollController();
_itemPositionListener =
widget.itemPositionListener ?? ItemPositionsListener.create();
_itemPositionStream =
_valueListenableToStreamAdapter(_itemPositionListener.itemPositions);
_getOnThreadTap();
super.initState();
@@ -1122,6 +1136,7 @@ class _MessageListViewState extends State<MessageListView> {
@override
void didChangeDependencies() {
final newStreamChannel = StreamChannel.of(context);
_streamTheme = StreamChatTheme.of(context);
if (newStreamChannel != streamChannel) {
streamChannel = newStreamChannel;
@@ -1167,14 +1182,14 @@ class _MessageListViewState extends State<MessageListView> {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => StreamBuilder<Message>(
builder: (_) => BetterStreamBuilder<Message>(
stream: streamChannel!.channel.state!.messagesStream.map(
(messages) =>
messages!.firstWhere((m) => m.id == message.id)),
initialData: message,
builder: (_, snapshot) => StreamChannel(
builder: (_, data) => StreamChannel(
channel: streamChannel!.channel,
child: widget.threadBuilder!(context, snapshot.data),
child: widget.threadBuilder!(context, data),
),
),
),
@@ -1192,3 +1207,79 @@ class _MessageListViewState extends State<MessageListView> {
super.dispose();
}
}
class _LoadingIndicator extends StatelessWidget {
const _LoadingIndicator({
Key? key,
required this.streamTheme,
required this.isThreadConversation,
required this.direction,
required this.streamChannel,
}) : super(key: key);
final StreamChatThemeData streamTheme;
final bool isThreadConversation;
final QueryDirection direction;
final StreamChannelState streamChannel;
@override
Widget build(BuildContext context) {
final stream = direction == QueryDirection.top
? streamChannel.queryTopMessages
: streamChannel.queryBottomMessages;
return BetterStreamBuilder<bool>(
key: Key('LOADING-INDICATOR $direction'),
stream: stream,
initialData: false,
errorBuilder: (context, error) => Container(
color: streamTheme.colorTheme.accentRed.withOpacity(.2),
child: const Center(
child: Text('Error loading messages'),
),
),
builder: (context, data) {
if (!data) {
if (!isThreadConversation && direction == QueryDirection.top) {
return const SizedBox(
height: 52,
width: double.infinity,
);
}
return const Offstage();
}
return const Center(
child: Padding(
padding: EdgeInsets.all(8),
child: CircularProgressIndicator(),
),
);
},
);
}
}
Stream<T> _valueListenableToStreamAdapter<T>(ValueListenable<T> listenable) {
// ignore: close_sinks
late StreamController<T> _controller;
void listener() {
_controller.add(listenable.value);
}
void start() {
listenable.addListener(listener);
}
void end() {
listenable.removeListener(listener);
}
_controller = StreamController<T>(
onListen: start,
onPause: end,
onResume: start,
onCancel: end,
);
return _controller.stream;
}
packages/stream_chat_flutter/lib/src/message_reactions_modal.dart
+107 -95
View File
@@ -23,6 +23,7 @@ class MessageReactionsModal extends StatelessWidget {
this.showUserAvatar = DisplayWidget.show,
this.onUserAvatarTap,
this.attachmentBorderRadiusGeometry,
this.textBuilder,
}) : super(key: key);
/// Message to display reactions of
@@ -52,6 +53,9 @@ class MessageReactionsModal extends StatelessWidget {
/// [BorderRadius] to apply to attachments
final BorderRadius? attachmentBorderRadiusGeometry;
/// Customize the MessageWidget textBuilder
final Widget Function(BuildContext context, Message message)? textBuilder;
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
@@ -73,111 +77,119 @@ class MessageReactionsModal extends StatelessWidget {
final divFactor = message.attachments.isNotEmpty == true
? 1
: (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize));
final hasFileAttachment =
message.attachments.any((it) => it.type == 'file') == true;
return TweenAnimationBuilder<double>(
tween: Tween(begin: 0, end: 1),
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOutBack,
builder: (context, val, snapshot) {
final hasFileAttachment =
message.attachments.any((it) => it.type == 'file') == true;
return GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () => Navigator.maybePop(context),
child: Stack(
children: [
Positioned.fill(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 10,
sigmaY: 10,
),
child: Container(
color: StreamChatTheme.of(context).colorTheme.overlay,
final numberOfReactions = StreamChatTheme.of(context).reactionIcons.length;
final shiftFactor =
numberOfReactions < 5 ? (5 - numberOfReactions) * 0.1 : 0.0;
final child = Center(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
if (showReactions &&
(message.status == MessageSendingStatus.sent))
Align(
alignment: Alignment(
user!.id == message.user!.id
? (divFactor >= 1.0
? -0.2 - shiftFactor
: (1.2 - divFactor))
: (divFactor >= 1.0
? 0.2 + shiftFactor
: -(1.2 - divFactor)),
0),
child: ReactionPicker(
message: message,
),
),
),
Transform.scale(
scale: val,
child: Center(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
if (showReactions &&
(message.status == MessageSendingStatus.sent))
Align(
alignment: Alignment(
user!.id == message.user!.id
? (divFactor >= 1.0
? -0.2
: (1.2 - divFactor))
: (divFactor >= 1.0
? 0.2
: -(1.2 - divFactor)),
0),
child: ReactionPicker(
message: message,
),
),
const SizedBox(height: 8),
IgnorePointer(
child: MessageWidget(
key: const Key('MessageWidget'),
reverse: reverse,
message: message.copyWith(
text: message.text!.length > 200
? '${message.text!.substring(0, 200)}...'
: message.text,
),
messageTheme: messageTheme,
showReactions: false,
showUsername: false,
showUserAvatar: showUserAvatar,
showTimestamp: false,
translateUserAvatar: false,
showSendingIndicator: false,
shape: messageShape,
attachmentShape: attachmentShape,
padding: const EdgeInsets.all(0),
attachmentBorderRadiusGeometry:
attachmentBorderRadiusGeometry
?.mirrorBorderIfReversed(
reverse: !reverse),
attachmentPadding: EdgeInsets.all(
hasFileAttachment ? 4 : 2,
),
textPadding: EdgeInsets.symmetric(
vertical: 8,
horizontal:
message.text!.isOnlyEmoji ? 0 : 16.0,
),
showReactionPickerIndicator: showReactions &&
(message.status == MessageSendingStatus.sent),
),
),
if (message.latestReactions?.isNotEmpty == true) ...[
const SizedBox(height: 8),
_buildReactionCard(context),
]
],
),
),
const SizedBox(height: 8),
IgnorePointer(
child: MessageWidget(
key: const Key('MessageWidget'),
reverse: reverse,
message: message.copyWith(
text: message.text!.length > 200
? '${message.text!.substring(0, 200)}...'
: message.text,
),
messageTheme: messageTheme,
showReactions: false,
showUsername: false,
showUserAvatar: showUserAvatar,
showTimestamp: false,
translateUserAvatar: false,
showSendingIndicator: false,
shape: messageShape,
attachmentShape: attachmentShape,
padding: const EdgeInsets.all(0),
attachmentBorderRadiusGeometry: attachmentBorderRadiusGeometry
?.mirrorBorderIfReversed(reverse: !reverse),
attachmentPadding: EdgeInsets.all(
hasFileAttachment ? 4 : 2,
),
textPadding: EdgeInsets.symmetric(
vertical: 8,
horizontal: message.text!.isOnlyEmoji ? 0 : 16.0,
),
showReactionPickerIndicator: showReactions &&
(message.status == MessageSendingStatus.sent),
textBuilder: textBuilder,
showPinHighlight: false,
),
),
if (message.latestReactions?.isNotEmpty == true) ...[
const SizedBox(height: 8),
_buildReactionCard(
context,
user,
),
]
],
),
);
},
),
),
);
return GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () => Navigator.maybePop(context),
child: Stack(
children: [
Positioned.fill(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 10,
sigmaY: 10,
),
child: DecoratedBox(
decoration: BoxDecoration(
color: StreamChatTheme.of(context).colorTheme.overlay,
),
),
),
),
TweenAnimationBuilder<double>(
tween: Tween(begin: 0, end: 1),
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOutBack,
builder: (context, val, widget) => Transform.scale(
scale: val,
child: widget,
),
child: child,
),
],
),
);
}
Widget _buildReactionCard(BuildContext context) {
final currentUser = StreamChat.of(context).user;
Widget _buildReactionCard(BuildContext context, User? user) {
final chatThemeData = StreamChatTheme.of(context);
return Card(
color: chatThemeData.colorTheme.white,
@@ -204,7 +216,7 @@ class MessageReactionsModal extends StatelessWidget {
children: message.latestReactions!
.map((e) => _buildReaction(
e,
currentUser!,
user!,
context,
))
.toList(),
packages/stream_chat_flutter/lib/src/message_widget.dart
+287 -186
View File
@@ -83,6 +83,8 @@ class MessageWidget extends StatefulWidget {
this.showResendMessage = true,
this.showCopyMessage = true,
this.showFlagButton = true,
this.showPinButton = true,
this.showPinHighlight = true,
this.onUserAvatarTap,
this.onLinkTap,
this.onMessageActions,
@@ -102,6 +104,7 @@ class MessageWidget extends StatefulWidget {
this.onQuotedMessageTap,
this.customActions = const [],
this.onAttachmentTap,
this.usernameBuilder,
}) : attachmentBuilders = {
'image': (context, message, attachments) {
final border = RoundedRectangleBorder(
@@ -265,6 +268,9 @@ class MessageWidget extends StatefulWidget {
/// Widget builder for building text
final Widget Function(BuildContext, Message)? textBuilder;
/// Widget builder for building username
final Widget Function(BuildContext, Message)? usernameBuilder;
/// Function called on long press
final void Function(BuildContext, Message)? onMessageActions;
@@ -367,6 +373,12 @@ class MessageWidget extends StatefulWidget {
/// Show flag action
final bool showFlagButton;
/// Show flag action
final bool showPinButton;
/// Display Pin Highlight
final bool showPinHighlight;
/// Builder for respective attachment types
final Map<String, AttachmentBuilder> attachmentBuilders;
@@ -401,37 +413,39 @@ class _MessageWidgetState extends State<MessageWidget>
bool get showTimeStamp => widget.showTimestamp;
bool get isMessageRead => widget.readList?.isNotEmpty == true;
late final bool isMessageRead = widget.readList?.isNotEmpty == true;
bool get showInChannel => widget.showInChannelIndicator;
bool get hasQuotedMessage => widget.message.quotedMessage != null;
bool get isSendFailed => widget.message.status == MessageSendingStatus.failed;
late final bool isSendFailed =
widget.message.status == MessageSendingStatus.failed;
bool get isUpdateFailed =>
late final bool isUpdateFailed =
widget.message.status == MessageSendingStatus.failed_update;
bool get isDeleteFailed =>
late final bool isDeleteFailed =
widget.message.status == MessageSendingStatus.failed_delete;
bool get isFailedState => isSendFailed || isUpdateFailed || isDeleteFailed;
late final bool isFailedState =
isSendFailed || isUpdateFailed || isDeleteFailed;
bool get isGiphy =>
late final bool isGiphy =
widget.message.attachments.any((element) => element.type == 'giphy') ==
true;
true;
bool get hasNonUrlAttachments =>
widget.message.attachments
late final bool isOnlyEmoji = widget.message.text?.isOnlyEmoji == true;
late final bool hasNonUrlAttachments = widget.message.attachments
.where((it) => it.ogScrapeUrl == null)
.isNotEmpty ==
true;
bool get hasUrlAttachments =>
late final bool hasUrlAttachments =
widget.message.attachments.any((it) => it.ogScrapeUrl != null) == true;
bool get showBottomRow =>
showThreadReplyIndicator ||
late final bool showBottomRow = showThreadReplyIndicator ||
showUsername ||
showTimeStamp ||
showInChannel ||
@@ -441,6 +455,9 @@ class _MessageWidgetState extends State<MessageWidget>
@override
bool get wantKeepAlive => widget.message.attachments.isNotEmpty == true;
late StreamChatThemeData _streamChatTheme;
late StreamChatState _streamChat;
@override
Widget build(BuildContext context) {
super.build(context);
@@ -450,7 +467,12 @@ class _MessageWidgetState extends State<MessageWidget>
widget.showUserAvatar != DisplayWidget.gone ? avatarWidth + 8.5 : 0.5;
return Material(
type: MaterialType.transparency,
type: widget.message.pinned && widget.showPinHighlight
? MaterialType.card
: MaterialType.transparency,
color: widget.message.pinned && widget.showPinHighlight
? _streamChatTheme.colorTheme.highlight
: null,
child: Portal(
child: InkWell(
onTap: () {
@@ -477,148 +499,165 @@ class _MessageWidgetState extends State<MessageWidget>
? AlignmentDirectional.bottomEnd
: AlignmentDirectional.bottomStart,
children: [
Column(
crossAxisAlignment: widget.reverse
? CrossAxisAlignment.end
: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
if (widget.showUserAvatar == DisplayWidget.show &&
widget.message.user != null) ...[
_buildUserAvatar(),
const SizedBox(width: 4),
],
if (widget.showUserAvatar == DisplayWidget.hide)
SizedBox(width: avatarWidth + 4),
Flexible(
child: PortalEntry(
portal: Container(
transform: Matrix4.translationValues(
widget.reverse ? 12 : -12, 0, 0),
constraints: const BoxConstraints(
maxWidth: 22 * 6.0),
child: _buildReactionIndicator(context),
),
portalAnchor:
Alignment(widget.reverse ? 1 : -1, -1),
childAnchor:
Alignment(widget.reverse ? -1 : 1, -1),
child: Stack(
clipBehavior: Clip.none,
children: [
Padding(
padding: widget.showReactions
? EdgeInsets.only(
top: widget
.message
.reactionCounts
?.isNotEmpty ==
true
? 18
: 0,
)
: EdgeInsets.zero,
child: (widget.message.isDeleted &&
!isFailedState)
? Container(
// ignore: lines_longer_than_80_chars
margin: EdgeInsets.symmetric(
horizontal:
Padding(
padding: EdgeInsets.only(
bottom:
isPinned && widget.showPinHighlight ? 8.0 : 0.0,
),
child: Column(
crossAxisAlignment: widget.reverse
? CrossAxisAlignment.end
: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
if (widget.message.pinned &&
widget.message.pinnedBy != null &&
widget.showPinHighlight)
_buildPinnedMessage(widget.message),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
if (widget.showUserAvatar ==
DisplayWidget.show &&
widget.message.user != null) ...[
_buildUserAvatar(),
const SizedBox(width: 4),
],
if (widget.showUserAvatar == DisplayWidget.hide)
SizedBox(width: avatarWidth + 4),
Flexible(
child: PortalEntry(
portal: Container(
transform: Matrix4.translationValues(
widget.reverse ? 12 : -12, 0, 0),
constraints: const BoxConstraints(
maxWidth: 22 * 6.0,
),
child: _buildReactionIndicator(context),
),
portalAnchor:
Alignment(widget.reverse ? 1 : -1, -1),
childAnchor:
Alignment(widget.reverse ? -1 : 1, -1),
child: Stack(
clipBehavior: Clip.none,
children: [
Padding(
padding: widget.showReactions
? EdgeInsets.only(
top: widget
.message
.reactionCounts
?.isNotEmpty ==
true
? 18
: 0,
)
: EdgeInsets.zero,
child: (widget.message.isDeleted &&
!isFailedState)
? Container(
// ignore: lines_longer_than_80_chars
margin: EdgeInsets.symmetric(
horizontal:
// ignore: lines_longer_than_80_chars
widget.showUserAvatar ==
// ignore: lines_longer_than_80_chars
DisplayWidget.gone
? 0
: 4.0),
child: DeletedMessage(
borderRadiusGeometry: widget
.borderRadiusGeometry,
borderSide:
widget.borderSide,
shape: widget.shape,
messageTheme:
widget.messageTheme,
),
)
: Card(
clipBehavior: Clip.hardEdge,
elevation: 0,
margin: EdgeInsets.symmetric(
horizontal: (isFailedState
? 15.0
: 0.0) +
// ignore: lines_longer_than_80_chars
widget.showUserAvatar ==
// ignore: lines_longer_than_80_chars
(widget.showUserAvatar ==
DisplayWidget
.gone
? 0
: 4.0),
child: DeletedMessage(
borderRadiusGeometry: widget
.borderRadiusGeometry,
borderSide: widget.borderSide,
shape: widget.shape,
messageTheme:
widget.messageTheme,
),
)
: Card(
clipBehavior: Clip.antiAlias,
elevation: 0,
margin: EdgeInsets.symmetric(
horizontal: (isFailedState
? 15.0
: 0.0) +
// ignore: lines_longer_than_80_chars
(widget.showUserAvatar ==
DisplayWidget.gone
? 0
: 4.0),
),
shape: widget.shape ??
RoundedRectangleBorder(
side: widget.borderSide ??
BorderSide(
color: widget
// ignore: lines_longer_than_80_chars
.messageTheme
// ignore: lines_longer_than_80_chars
.messageBorderColor ??
Colors.grey,
),
borderRadius: widget
// ignore: lines_longer_than_80_chars
.borderRadiusGeometry ??
BorderRadius.zero,
),
color: _getBackgroundColor(),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.end,
mainAxisSize:
MainAxisSize.min,
children: <Widget>[
if (hasQuotedMessage)
_buildQuotedMessage(),
if (hasNonUrlAttachments)
_parseAttachments(),
if (!isGiphy)
_buildTextBubble(),
],
),
shape: widget.shape ??
RoundedRectangleBorder(
side: widget
.borderSide ??
BorderSide(
color: widget
// ignore: lines_longer_than_80_chars
.messageTheme
// ignore: lines_longer_than_80_chars
.messageBorderColor ??
Colors.grey,
),
borderRadius: widget
// ignore: lines_longer_than_80_chars
.borderRadiusGeometry ??
BorderRadius.zero,
),
color: _getBackgroundColor(),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.end,
mainAxisSize:
MainAxisSize.min,
children: <Widget>[
if (hasQuotedMessage)
_buildQuotedMessage(),
if (hasNonUrlAttachments)
_parseAttachments(),
if (!isGiphy)
_buildTextBubble(),
],
),
),
),
if (widget.showReactionPickerIndicator)
Positioned(
right: widget.reverse ? null : 4,
left: widget.reverse ? 4 : null,
top: -8,
child: CustomPaint(
painter: ReactionBubblePainter(
_streamChatTheme
.colorTheme.white,
Colors.transparent,
Colors.transparent,
tailCirclesSpace: 1,
),
),
if (widget.showReactionPickerIndicator)
Positioned(
right: widget.reverse ? null : 4,
left: widget.reverse ? 4 : null,
top: -8,
child: CustomPaint(
painter: ReactionBubblePainter(
StreamChatTheme.of(context)
.colorTheme
.white,
Colors.transparent,
Colors.transparent,
tailCirclesSpace: 1,
),
),
),
],
],
),
),
),
),
],
),
if (showBottomRow)
SizedBox(height: context.textScaleFactor * 18.0),
],
],
),
if (showBottomRow)
SizedBox(height: context.textScaleFactor * 18.0),
],
),
),
if (showBottomRow)
Padding(
padding: EdgeInsets.only(left: leftPadding),
padding: EdgeInsets.only(
left: leftPadding,
bottom:
isPinned && widget.showPinHighlight ? 6.0 : 0.0,
),
child: _bottomRow,
),
if (isFailedState)
@@ -639,14 +678,20 @@ class _MessageWidgetState extends State<MessageWidget>
);
}
@override
void didChangeDependencies() {
_streamChatTheme = StreamChatTheme.of(context);
_streamChat = StreamChat.of(context);
super.didChangeDependencies();
}
Widget _buildQuotedMessage() {
final isMyMessage =
widget.message.user?.id == StreamChat.of(context).user?.id;
final isMyMessage = widget.message.user?.id == _streamChat.user?.id;
final onTap = widget.message.quotedMessage?.isDeleted != true &&
widget.onQuotedMessageTap != null
? () => widget.onQuotedMessageTap!(widget.message.quotedMessageId)
: null;
final chatThemeData = StreamChatTheme.of(context);
final chatThemeData = _streamChatTheme;
return QuotedMessageWidget(
onTap: onTap,
message: widget.message.quotedMessage!,
@@ -661,7 +706,7 @@ class _MessageWidgetState extends State<MessageWidget>
Widget get _bottomRow {
if (isDeleted) {
final chatThemeData = StreamChatTheme.of(context);
final chatThemeData = _streamChatTheme;
return Row(
mainAxisSize: MainAxisSize.min,
children: [
@@ -721,14 +766,7 @@ class _MessageWidgetState extends State<MessageWidget>
child: Text(msg, style: widget.messageTheme.replies),
),
],
if (showUsername)
Text(
widget.message.user!.name,
maxLines: 1,
key: usernameKey,
style: widget.messageTheme.messageAuthor,
overflow: TextOverflow.ellipsis,
),
if (showUsername) _buildUsername(usernameKey),
if (showTimeStamp)
Text(
Jiffy(widget.message.createdAt.toLocal()).jm,
@@ -791,6 +829,19 @@ class _MessageWidgetState extends State<MessageWidget>
);
}
Widget _buildUsername(Key usernameKey) {
if (widget.usernameBuilder != null) {
return widget.usernameBuilder!(context, widget.message);
}
return Text(
widget.message.user!.name,
maxLines: 1,
key: usernameKey,
style: widget.messageTheme.messageAuthor,
overflow: TextOverflow.ellipsis,
);
}
Widget _buildUrlAttachment() {
final urlAttachment = widget.message.attachments
.firstWhere((element) => element.ogScrapeUrl != null);
@@ -809,36 +860,16 @@ class _MessageWidgetState extends State<MessageWidget>
);
}
Widget _buildThreadParticipantsIndicator(Iterable<User> threadParticipants) {
var padding = 0.0;
return Stack(
children: threadParticipants.map((user) {
padding += 8.0;
return Positioned(
right: padding - 8,
bottom: 0,
top: 0,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: StreamChatTheme.of(context).colorTheme.white,
),
padding: const EdgeInsets.all(1),
child: UserAvatar(
user: user,
constraints: BoxConstraints.loose(const Size.fromRadius(7)),
showOnlineStatus: false,
),
),
);
}).toList(),
);
}
Widget _buildThreadParticipantsIndicator(Iterable<User> threadParticipants) =>
_ThreadParticipants(
streamChatTheme: _streamChatTheme,
threadParticipants: threadParticipants,
);
Widget _buildReactionIndicator(
BuildContext context,
) {
final ownId = StreamChat.of(context).user!.id;
final ownId = _streamChat.user!.id;
final reactionsMap = <String, Reaction>{};
widget.message.latestReactions?.forEach((element) {
if (!reactionsMap.containsKey(element.type) ||
@@ -878,10 +909,11 @@ class _MessageWidgetState extends State<MessageWidget>
showDialog(
context: context,
barrierColor: StreamChatTheme.of(context).colorTheme.overlay,
barrierColor: _streamChatTheme.colorTheme.overlay,
builder: (context) => StreamChannel(
channel: channel,
child: MessageActionsModal(
textBuilder: widget.textBuilder,
onCopyTap: (message) =>
Clipboard.setData(ClipboardData(text: message.text)),
attachmentBorderRadiusGeometry:
@@ -918,6 +950,7 @@ class _MessageWidgetState extends State<MessageWidget>
!isFailedState &&
widget.onThreadTap != null,
showFlagButton: widget.showFlagButton,
showPinButton: widget.showPinButton,
customActions: widget.customActions,
),
));
@@ -927,10 +960,11 @@ class _MessageWidgetState extends State<MessageWidget>
final channel = StreamChannel.of(context).channel;
showDialog(
context: context,
barrierColor: StreamChatTheme.of(context).colorTheme.overlay,
barrierColor: _streamChatTheme.colorTheme.overlay,
builder: (context) => StreamChannel(
channel: channel,
child: MessageReactionsModal(
textBuilder: widget.textBuilder,
attachmentBorderRadiusGeometry:
widget.attachmentBorderRadiusGeometry as BorderRadius?,
showUserAvatar:
@@ -957,7 +991,7 @@ class _MessageWidgetState extends State<MessageWidget>
side: hasFiles
? widget.attachmentBorderSide ??
BorderSide(
color: StreamChatTheme.of(context).colorTheme.greyWhisper,
color: _streamChatTheme.colorTheme.greyWhisper,
)
: BorderSide.none,
borderRadius: widget.attachmentBorderRadiusGeometry ?? BorderRadius.zero,
@@ -967,7 +1001,7 @@ class _MessageWidgetState extends State<MessageWidget>
ShapeBorder _getDefaultShape(BuildContext context) => RoundedRectangleBorder(
side: widget.borderSide ??
BorderSide(
color: StreamChatTheme.of(context).colorTheme.greyWhisper,
color: _streamChatTheme.colorTheme.greyWhisper,
),
borderRadius: widget.borderRadiusGeometry ?? BorderRadius.zero,
);
@@ -1058,7 +1092,7 @@ class _MessageWidgetState extends State<MessageWidget>
Text(
widget.readList!.length.toString(),
style: style.copyWith(
color: StreamChatTheme.of(context).colorTheme.accentBlue,
color: _streamChatTheme.colorTheme.accentBlue,
),
),
const SizedBox(width: 2),
@@ -1113,7 +1147,35 @@ class _MessageWidgetState extends State<MessageWidget>
);
}
bool get isOnlyEmoji => widget.message.text!.isOnlyEmoji;
Widget _buildPinnedMessage(Message message) {
final pinnedBy = message.pinnedBy;
final pinnedByMe = _streamChat.user!.id == pinnedBy!.id;
return Padding(
padding: const EdgeInsets.only(left: 8, right: 8, top: 4, bottom: 8),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
StreamSvgIcon.pin(
size: 16,
),
const SizedBox(
width: 4,
),
Text(
'Pinned by ${pinnedByMe ? 'You' : pinnedBy.name}',
style: TextStyle(
color: _streamChatTheme.colorTheme.grey,
fontSize: 13,
fontWeight: FontWeight.w400,
),
)
],
),
);
}
late final bool isPinned = widget.message.pinned;
Color? _getBackgroundColor() {
if (hasQuotedMessage) {
@@ -1121,7 +1183,7 @@ class _MessageWidgetState extends State<MessageWidget>
}
if (hasUrlAttachments) {
return StreamChatTheme.of(context).colorTheme.blueAlice;
return _streamChatTheme.colorTheme.blueAlice;
}
if (isOnlyEmoji) {
@@ -1153,6 +1215,45 @@ class _MessageWidgetState extends State<MessageWidget>
}
}
class _ThreadParticipants extends StatelessWidget {
const _ThreadParticipants({
Key? key,
required StreamChatThemeData streamChatTheme,
required this.threadParticipants,
}) : _streamChatTheme = streamChatTheme,
super(key: key);
final StreamChatThemeData _streamChatTheme;
final Iterable<User> threadParticipants;
@override
Widget build(BuildContext context) {
var padding = 0.0;
return Stack(
children: threadParticipants.map((user) {
padding += 8.0;
return Positioned(
right: padding - 8,
bottom: 0,
top: 0,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: _streamChatTheme.colorTheme.white,
),
padding: const EdgeInsets.all(1),
child: UserAvatar(
user: user,
constraints: BoxConstraints.loose(const Size.fromRadius(7)),
showOnlineStatus: false,
),
),
);
}).toList(),
);
}
}
class _ThreadReplyPainter extends CustomPainter {
const _ThreadReplyPainter({
this.context,
packages/stream_chat_flutter/lib/src/quoted_message_widget.dart
+3 -3
View File
@@ -1,9 +1,9 @@
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/src/extension.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
import 'package:video_player/video_player.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import 'package:stream_chat_flutter/src/extension.dart';
/// Widget builder for quoted message attachment thumnail
typedef QuotedMessageAttachmentThumbnailBuilder = Widget Function(
@@ -217,7 +217,7 @@ class QuotedMessageWidget extends StatelessWidget {
}
child = AbsorbPointer(child: child);
return Material(
clipBehavior: Clip.antiAlias,
clipBehavior: Clip.hardEdge,
type: MaterialType.transparency,
shape: attachment.type == 'file' ? null : _getDefaultShape(context),
child: child,
packages/stream_chat_flutter/lib/src/reaction_bubble.dart
+7 -8
View File
@@ -5,7 +5,6 @@ import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
import 'package:stream_chat_flutter/src/reaction_icon.dart';
import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
/// Creates reaction bubble widget for displaying over messages
@@ -130,13 +129,13 @@ class ReactionBubble extends StatelessWidget {
horizontal: 4,
),
child: reactionIcon != null
? StreamSvgIcon(
assetName: reactionIcon.assetName,
width: 16,
height: 16,
color: (!highlightOwnReactions || reaction.user?.id == userId)
? chatThemeData.colorTheme.accentBlue
: chatThemeData.colorTheme.black.withOpacity(.5),
? ConstrainedBox(
constraints: BoxConstraints.tight(const Size.square(16)),
child: reactionIcon.builder(
context,
!highlightOwnReactions || reaction.user?.id == userId,
16,
),
)
: Icon(
Icons.help_outline_rounded,
packages/stream_chat_flutter/lib/src/reaction_icon.dart
+8 -2
View File
@@ -1,14 +1,20 @@
import 'package:flutter/material.dart';
/// Reaction icon data
class ReactionIcon {
/// Constructor for creating [ReactionIcon]
ReactionIcon({
required this.type,
required this.assetName,
required this.builder,
});
/// Type of reaction
final String type;
/// Asset to display for reaction
final String assetName;
final Widget Function(
BuildContext,
bool highlighted,
double size,
) builder;
}
packages/stream_chat_flutter/lib/src/reaction_picker.dart
+81 -90
View File
@@ -1,9 +1,6 @@
import 'dart:math';
import 'package:ezanimation/ezanimation.dart';
import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/src/extension.dart';
import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
/// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/reaction_picker.png)
@@ -50,95 +47,89 @@ class _ReactionPickerState extends State<ReactionPicker>
triggerAnimations();
}
return TweenAnimationBuilder<double>(
tween: Tween(begin: 0, end: 1),
curve: Curves.easeInOutBack,
duration: const Duration(milliseconds: 500),
builder: (context, val, wid) => Transform.scale(
scale: val,
child: Material(
borderRadius: BorderRadius.circular(24),
color: chatThemeData.colorTheme.white,
clipBehavior: Clip.hardEdge,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 8,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: reactionIcons
.map<Widget>((reactionIcon) {
final ownReactionIndex = widget.message.ownReactions
?.indexWhere((reaction) =>
reaction.type == reactionIcon.type) ??
-1;
final index = reactionIcons.indexOf(reactionIcon);
final child = Material(
borderRadius: BorderRadius.circular(24),
color: chatThemeData.colorTheme.white,
clipBehavior: Clip.hardEdge,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 8,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: reactionIcons
.map<Widget>((reactionIcon) {
final ownReactionIndex = widget.message.ownReactions
?.indexWhere(
(reaction) => reaction.type == reactionIcon.type) ??
-1;
final index = reactionIcons.indexOf(reactionIcon);
return ConstrainedBox(
constraints: const BoxConstraints.tightFor(
height: 24,
width: 24,
),
child: RawMaterialButton(
elevation: 0,
shape: ContinuousRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
constraints: const BoxConstraints.tightFor(
height: 24,
width: 24,
),
onPressed: () {
if (ownReactionIndex != -1) {
removeReaction(
context,
widget.message
.ownReactions![ownReactionIndex],
);
} else {
sendReaction(
context,
reactionIcon.type,
);
}
},
child: AnimatedBuilder(
animation: animations[index],
builder: (context, val) => Transform.scale(
scale: animations[index].value,
child: StreamSvgIcon(
assetName: reactionIcon.assetName,
height: max(
0,
animations[index].value * 24.0,
),
width: max(
0,
animations[index].value * 24.0,
),
color: ownReactionIndex != -1
? chatThemeData
.colorTheme.accentBlue
: Theme.of(context)
.iconTheme
.color!
.withOpacity(.5),
),
)),
),
);
})
.insertBetween(const SizedBox(
width: 16,
))
.toList(),
final child = reactionIcon.builder(
context,
ownReactionIndex != -1,
24,
);
return ConstrainedBox(
constraints: const BoxConstraints.tightFor(
height: 24,
width: 24,
),
),
),
));
child: RawMaterialButton(
elevation: 0,
shape: ContinuousRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
constraints: const BoxConstraints.tightFor(
height: 24,
width: 24,
),
onPressed: () {
if (ownReactionIndex != -1) {
removeReaction(
context,
widget.message.ownReactions![ownReactionIndex],
);
} else {
sendReaction(
context,
reactionIcon.type,
);
}
},
child: AnimatedBuilder(
animation: animations[index],
builder: (context, child) => Transform.scale(
scale: animations[index].value,
child: child,
),
child: child,
),
),
);
})
.insertBetween(const SizedBox(
width: 16,
))
.toList(),
),
),
);
return TweenAnimationBuilder<double>(
tween: Tween(begin: 0, end: 1),
curve: Curves.easeInOutBack,
duration: const Duration(milliseconds: 500),
builder: (context, val, widget) => Transform.scale(
scale: val,
child: widget,
),
child: child,
);
}
void triggerAnimations() async {
packages/stream_chat_flutter/lib/src/stream_chat_theme.dart
+47 -6
View File
@@ -217,10 +217,11 @@ class StreamChatThemeData {
TextTheme textTheme,
) {
final accentColor = colorTheme.accentBlue;
final iconTheme = IconThemeData(color: colorTheme.black.withOpacity(.5));
return StreamChatThemeData.raw(
textTheme: textTheme,
colorTheme: colorTheme,
primaryIconTheme: IconThemeData(color: colorTheme.black.withOpacity(.5)),
primaryIconTheme: iconTheme,
defaultChannelImage: (context, channel) => const SizedBox(),
defaultUserImage: (context, user) => Center(
child: CachedNetworkImage(
@@ -342,23 +343,63 @@ class StreamChatThemeData {
reactionIcons: [
ReactionIcon(
type: 'love',
assetName: 'Icon_love_reaction.svg',
builder: (context, highlighted, size) {
final theme = StreamChatTheme.of(context);
return StreamSvgIcon.loveReaction(
color: highlighted
? theme.colorTheme.accentBlue
: theme.primaryIconTheme.color!.withOpacity(.5),
size: size,
);
},
),
ReactionIcon(
type: 'like',
assetName: 'Icon_thumbs_up_reaction.svg',
builder: (context, highlighted, size) {
final theme = StreamChatTheme.of(context);
return StreamSvgIcon.thumbsUpReaction(
color: highlighted
? theme.colorTheme.accentBlue
: theme.primaryIconTheme.color!.withOpacity(.5),
size: size,
);
},
),
ReactionIcon(
type: 'sad',
assetName: 'Icon_thumbs_down_reaction.svg',
builder: (context, highlighted, size) {
final theme = StreamChatTheme.of(context);
return StreamSvgIcon.thumbsDownReaction(
color: highlighted
? theme.colorTheme.accentBlue
: theme.primaryIconTheme.color!.withOpacity(.5),
size: size,
);
},
),
ReactionIcon(
type: 'haha',
assetName: 'Icon_LOL_reaction.svg',
builder: (context, highlighted, size) {
final theme = StreamChatTheme.of(context);
return StreamSvgIcon.lolReaction(
color: highlighted
? theme.colorTheme.accentBlue
: theme.primaryIconTheme.color!.withOpacity(.5),
size: size,
);
},
),
ReactionIcon(
type: 'wow',
assetName: 'Icon_wut_reaction.svg',
builder: (context, highlighted, size) {
final theme = StreamChatTheme.of(context);
return StreamSvgIcon.wutReaction(
color: highlighted
? theme.colorTheme.accentBlue
: theme.primaryIconTheme.color!.withOpacity(.5),
size: size,
);
},
),
],
);
packages/stream_chat_flutter/lib/src/stream_svg_icon.dart
+72
View File
@@ -49,6 +49,66 @@ class StreamSvgIcon extends StatelessWidget {
height: size,
);
/// [StreamSvgIcon] type
factory StreamSvgIcon.loveReaction({
double? size,
Color? color,
}) =>
StreamSvgIcon(
assetName: 'Icon_love_reaction.svg',
color: color,
width: size,
height: size,
);
/// [StreamSvgIcon] type
factory StreamSvgIcon.thumbsUpReaction({
double? size,
Color? color,
}) =>
StreamSvgIcon(
assetName: 'Icon_thumbs_up_reaction.svg',
color: color,
width: size,
height: size,
);
/// [StreamSvgIcon] type
factory StreamSvgIcon.thumbsDownReaction({
double? size,
Color? color,
}) =>
StreamSvgIcon(
assetName: 'Icon_thumbs_down_reaction.svg',
color: color,
width: size,
height: size,
);
/// [StreamSvgIcon] type
factory StreamSvgIcon.lolReaction({
double? size,
Color? color,
}) =>
StreamSvgIcon(
assetName: 'Icon_LOL_reaction.svg',
color: color,
width: size,
height: size,
);
/// [StreamSvgIcon] type
factory StreamSvgIcon.wutReaction({
double? size,
Color? color,
}) =>
StreamSvgIcon(
assetName: 'Icon_wut_reaction.svg',
color: color,
width: size,
height: size,
);
/// [StreamSvgIcon] type
factory StreamSvgIcon.smile({
double? size,
@@ -889,6 +949,18 @@ class StreamSvgIcon extends StatelessWidget {
height: size,
);
/// [StreamSvgIcon] type
factory StreamSvgIcon.pin({
double? size,
Color? color,
}) =>
StreamSvgIcon(
assetName: 'icon_pin.svg',
color: color,
width: size,
height: size,
);
/// Name of icon asset
final String? assetName;
packages/stream_chat_flutter/lib/src/typing_indicator.dart
+14 -11
View File
@@ -33,13 +33,22 @@ class TypingIndicator extends StatelessWidget {
Widget build(BuildContext context) {
final channelState =
channel?.state ?? StreamChannel.of(context).channel.state!;
return StreamBuilder<List<User>>(
final altWidget = Align(
key: const Key('alternative'),
alignment: alignment,
child: Container(
child: alternativeWidget ?? const Offstage(),
),
);
return BetterStreamBuilder<List<User>>(
initialData: channelState.typingEvents,
stream: channelState.typingEventsStream,
builder: (context, snapshot) => AnimatedSwitcher(
builder: (context, data) => AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
child: snapshot.data?.isNotEmpty == true
child: data.isNotEmpty == true
? Padding(
key: const Key('main'),
padding: padding,
child: Align(
key: const Key('typings'),
@@ -54,7 +63,7 @@ class TypingIndicator extends StatelessWidget {
),
Text(
// ignore: lines_longer_than_80_chars
' ${snapshot.data![0].name}${snapshot.data!.length == 1 ? '' : ' and ${snapshot.data!.length - 1} more'} ${snapshot.data!.length == 1 ? 'is' : 'are'} typing',
' ${data[0].name}${data.length == 1 ? '' : ' and ${data.length - 1} more'} ${data.length == 1 ? 'is' : 'are'} typing',
maxLines: 1,
style: style,
),
@@ -62,13 +71,7 @@ class TypingIndicator extends StatelessWidget {
),
),
)
: Align(
key: const Key('alternative'),
alignment: alignment,
child: Container(
child: alternativeWidget ?? const Offstage(),
),
),
: altWidget,
),
);
}
packages/stream_chat_flutter/lib/src/unread_indicator.dart
+5 -5
View File
@@ -17,16 +17,16 @@ class UnreadIndicator extends StatelessWidget {
Widget build(BuildContext context) {
final client = StreamChat.of(context).client;
return IgnorePointer(
child: StreamBuilder<int?>(
child: BetterStreamBuilder<int?>(
stream: cid != null
? client.state.channels[cid]?.state?.unreadCountStream
: client.state.totalUnreadCountStream,
initialData: cid != null
? client.state.channels[cid]?.state?.unreadCount
: client.state.totalUnreadCount,
builder: (context, snapshot) {
if (!snapshot.hasData || snapshot.data == 0) {
return const SizedBox();
builder: (context, data) {
if (data == null || data == 0) {
return const Offstage();
}
return Material(
borderRadius: BorderRadius.circular(8),
@@ -42,7 +42,7 @@ class UnreadIndicator extends StatelessWidget {
),
child: Center(
child: Text(
'${snapshot.data! > 99 ? '99+' : snapshot.data}',
'${data > 99 ? '99+' : data}',
style: const TextStyle(
fontSize: 11,
color: Colors.white,
packages/stream_chat_flutter/lib/src/url_attachment.dart
+1 -1
View File
@@ -40,7 +40,7 @@ class UrlAttachment extends StatelessWidget {
children: [
if (urlAttachment.imageUrl != null)
Container(
clipBehavior: Clip.antiAliasWithSaveLayer,
clipBehavior: Clip.hardEdge,
margin: const EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
packages/stream_chat_flutter/lib/src/utils.dart
+3 -1
View File
@@ -1,3 +1,5 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
@@ -332,7 +334,7 @@ Widget wrapAttachmentWidget(
bool reverse,
) =>
Material(
clipBehavior: Clip.antiAlias,
clipBehavior: Clip.hardEdge,
shape: attachmentShape,
type: MaterialType.transparency,
child: attachmentWidget,