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

fix reaction modal ui

Browse Source
This commit is contained in:
Salvatore Giordano
2020-10-16 12:50:58 +02:00
parent c4a890d069
commit b0ad9c673e
8 changed files with 175 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/ios/Flutter/.last_build_id
+1 -1
View File
@@ -1 +1 @@
06fe8d0d3d89937a6d33b1033e75ae96
0289cdadbd29bab804f275e3c5907d07
example/ios/Podfile.lock
+4 -4
View File
@@ -38,10 +38,10 @@ PODS:
- Firebase/Messaging (6.26.0):
- Firebase/CoreOnly
- FirebaseMessaging (~> 4.4.1)
- firebase_core (0.5.0):
- firebase_core (0.5.0-1):
- Firebase/CoreOnly (~> 6.26.0)
- Flutter
- firebase_messaging (7.0.2):
- firebase_messaging (7.0.3):
- Firebase/CoreOnly (~> 6.26.0)
- Firebase/Messaging (~> 6.26.0)
- firebase_core
@@ -233,8 +233,8 @@ SPEC CHECKSUMS:
DKPhotoGallery: fdfad5125a9fdda9cc57df834d49df790dbb4179
file_picker: 3e6c3790de664ccf9b882732d9db5eaf6b8d4eb1
Firebase: 7cf5f9c67f03cb3b606d1d6535286e1080e57eb6
firebase_core: 3134fe79d257d430f163b558caf52a10a87efe8a
firebase_messaging: 2844c37f9ce87c0904b38fe435223161b1a71528
firebase_core: 00e54a4744164a6b5a250b96dd1ad5afaba7a342
firebase_messaging: 666d9994651b1ecf8c582b52dd913f3fa58c17ef
FirebaseAnalyticsInterop: 3f86269c38ae41f47afeb43ebf32a001f58fcdae
FirebaseCore: f42e5e5f382cdcf6b617ed737bf6c871a6947b17
FirebaseCoreDiagnostics: 770ac5958e1372ce67959ae4b4f31d8e127c3ac1
example/pubspec.yaml
+1 -1
View File
@@ -1,7 +1,7 @@
name: example
description: A new Flutter project.
version: 1.0.29+31
version: 1.0.30+32
environment:
sdk: ">=2.2.2 <3.0.0"
lib/src/channel_bottom_sheet.dart
+1 -1
View File
@@ -154,7 +154,7 @@ class ChannelBottomSheet extends StatelessWidget {
height: 83,
child: ListView(
padding: EdgeInsets.only(
left: (MediaQuery.of(context).size.width / 2) - 48,
left: (MediaQuery.of(context).size.width / 2) - 80,
),
scrollDirection: Axis.horizontal,
children: snapshot.data.map((m) {
lib/src/message_actions_modal.dart
+1
View File
@@ -1,5 +1,6 @@
import 'dart:ui';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:stream_chat/stream_chat.dart';
import 'package:stream_chat_flutter/src/reaction_picker.dart';
lib/src/message_reactions_modal.dart
+110 -68
View File
@@ -22,6 +22,7 @@ class MessageReactionsModal extends StatelessWidget {
final bool showReply;
final bool reverse;
final ShapeBorder messageShape;
final void Function(User) onUserAvatarTap;
const MessageReactionsModal({
Key key,
@@ -35,6 +36,7 @@ class MessageReactionsModal extends StatelessWidget {
this.editMessageInputBuilder,
this.messageShape,
this.reverse,
this.onUserAvatarTap,
}) : super(key: key);
@override
@@ -87,79 +89,119 @@ class MessageReactionsModal extends StatelessWidget {
),
),
SizedBox(
height: 8,
height: 16,
),
if (message.latestReactions.isNotEmpty)
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
),
child: Card(
clipBehavior: Clip.hardEdge,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
child: GridView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(16.0),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
crossAxisSpacing: 16,
childAspectRatio: 0.8,
mainAxisSpacing: 22,
),
itemCount: message.latestReactions.length,
itemBuilder: (context, i) {
final reaction = message.latestReactions[i];
final isCurrentUser =
reaction.user.id == StreamChat.of(context).user.id;
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Stack(
children: [
UserAvatar(
user: reaction.user,
constraints: BoxConstraints.tightFor(
height: 64,
width: 64,
),
borderRadius: BorderRadius.circular(32),
),
Positioned(
child: ReactionBubble(
reactions: [reaction],
borderColor: isCurrentUser
? messageTheme.ownReactionsBorderColor
: messageTheme.otherReactionsBorderColor,
backgroundColor: isCurrentUser
? messageTheme.ownReactionsBackgroundColor
: messageTheme
.otherReactionsBackgroundColor,
flipTail: !isCurrentUser,
),
bottom: 0,
left: isCurrentUser ? 0 : null,
right: isCurrentUser ? 0 : null,
),
],
),
Text(
reaction.user.name,
style: Theme.of(context).textTheme.subtitle2,
textAlign: TextAlign.center,
),
],
);
},
),
),
)
Container(
constraints: BoxConstraints.loose(Size.fromHeight(400)),
child: _buildReactionCard(context),
),
],
),
],
);
}
Padding _buildReactionCard(BuildContext context) {
final currentUser = StreamChat.of(context).user;
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
),
child: Card(
clipBehavior: Clip.hardEdge,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
'Message Reactions',
style: Theme.of(context).textTheme.headline6,
),
),
Flexible(
child: Padding(
padding: const EdgeInsets.only(
left: 16.0,
right: 16,
bottom: 16,
),
child: GridView.builder(
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
crossAxisSpacing: 16,
childAspectRatio: 0.75,
mainAxisSpacing: 22,
),
itemCount: message.latestReactions.length,
itemBuilder: (context, i) {
final reaction = message.latestReactions[i];
return _buildReaction(
reaction,
currentUser,
context,
);
},
),
),
),
],
),
),
);
}
Column _buildReaction(
Reaction reaction,
User currentUser,
BuildContext context,
) {
final isCurrentUser = reaction.user.id == currentUser.id;
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Stack(
children: [
UserAvatar(
onTap: onUserAvatarTap,
user: reaction.user,
constraints: BoxConstraints.tightFor(
height: 64,
width: 64,
),
borderRadius: BorderRadius.circular(32),
),
Positioned(
child: ReactionBubble(
reactions: [reaction],
borderColor: isCurrentUser
? messageTheme.ownReactionsBorderColor
: messageTheme.otherReactionsBorderColor,
backgroundColor: isCurrentUser
? messageTheme.ownReactionsBackgroundColor
: messageTheme.otherReactionsBackgroundColor,
flipTail: !isCurrentUser,
),
bottom: 0,
left: isCurrentUser ? 0 : null,
right: isCurrentUser ? 0 : null,
),
],
),
Text(
reaction.user.name,
style: Theme.of(context).textTheme.subtitle2,
textAlign: TextAlign.center,
),
],
);
}
}
lib/src/message_widget.dart
+1
View File
@@ -485,6 +485,7 @@ class _MessageWidgetState extends State<MessageWidget> {
return StreamChannel(
channel: channel,
child: MessageReactionsModal(
onUserAvatarTap: widget.onUserAvatarTap,
messageTheme: widget.messageTheme,
messageShape: widget.shape ?? _getDefaultShape(context),
reverse: widget.reverse,
lib/src/reaction_picker.dart
+56 -37
View File
@@ -1,4 +1,7 @@
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/src/reaction_bubble.dart';
import '../stream_chat_flutter.dart';
@@ -23,44 +26,60 @@ class ReactionPicker extends StatelessWidget {
@override
Widget build(BuildContext context) {
final reactionAssets = StreamChatTheme.of(context).reactionIcons;
return Material(
color: messageTheme.ownReactionsBackgroundColor,
clipBehavior: Clip.hardEdge,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: reactionAssets.map((reactionIcon) {
final ownReactionIndex = message.ownReactions?.indexWhere(
(reaction) => reaction.type == reactionIcon.type) ??
-1;
return IconButton(
iconSize: 24,
icon: Icon(
reactionIcon.iconData,
color: ownReactionIndex != -1
? StreamChatTheme.of(context).accentColor
: Theme.of(context).iconTheme.color,
return Stack(
fit: StackFit.passthrough,
children: [
Material(
color: messageTheme.ownReactionsBackgroundColor,
clipBehavior: Clip.hardEdge,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: reactionAssets.map((reactionIcon) {
final ownReactionIndex = message.ownReactions?.indexWhere(
(reaction) => reaction.type == reactionIcon.type) ??
-1;
return IconButton(
iconSize: 24,
icon: Icon(
reactionIcon.iconData,
color: ownReactionIndex != -1
? StreamChatTheme.of(context).accentColor
: Theme.of(context).iconTheme.color,
),
onPressed: () {
if (ownReactionIndex != -1) {
removeReaction(
context,
message.ownReactions[ownReactionIndex],
);
} else {
sendReaction(
context,
reactionIcon.type,
);
}
},
);
}).toList(),
),
),
Positioned(
right: 14,
bottom: 0,
child: CustomPaint(
painter: ReactionBubblePainter(
messageTheme.ownReactionsBackgroundColor,
messageTheme.ownReactionsBorderColor,
2,
),
onPressed: () {
if (ownReactionIndex != -1) {
removeReaction(
context,
message.ownReactions[ownReactionIndex],
);
} else {
sendReaction(
context,
reactionIcon.type,
);
}
},
);
}).toList(),
),
),
),
],
);
}