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

fix reaction ui

Browse Source
This commit is contained in:
Salvatore Giordano
2020-02-26 16:55:14 +01:00
parent c177ec1224
commit 815736285b
1 changed files with 84 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/src/message_widget.dart
+84 -84
View File
@@ -156,7 +156,7 @@ class _MessageWidgetState extends State<MessageWidget>
children: <Widget>[ children: <Widget>[
Column( Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[ children: <Widget>[
attachmentWidget, attachmentWidget,
attachment.title != null attachment.title != null
@@ -224,39 +224,58 @@ class _MessageWidgetState extends State<MessageWidget>
if (widget.message.text.trim().isNotEmpty) { if (widget.message.text.trim().isNotEmpty) {
final topPadding = final topPadding =
widget.message.reactionCounts?.isNotEmpty == true ? 36.0 : 0.0; widget.message.reactionCounts?.isNotEmpty == true ? 2.0 : 0.0;
column.children.add(Stack( column.children.addAll(
overflow: Overflow.visible, <Widget>[
alignment: Alignment.centerRight, Align(
children: <Widget>[ child: _buildReactions(isMyMessage),
Positioned( alignment:
left: isMyMessage ? 0 : null, isMyMessage ? Alignment.centerLeft : Alignment.centerRight,
right: !isMyMessage ? 0 : null, ),
top: 0, Stack(
child: _buildReactions(isMyMessage)), overflow: Overflow.visible,
AnimatedContainer( children: <Widget>[
duration: Duration(milliseconds: 300), widget.message.reactionCounts?.isNotEmpty == true
margin: EdgeInsets.only( ? Positioned(
top: nOfAttachmentWidgets > 0 ? (topPadding) : (topPadding), left: isMyMessage ? 8 : null,
), right: !isMyMessage ? 8 : null,
decoration: _buildBoxDecoration( top: -4,
isMyMessage, isLastUser || nOfAttachmentWidgets > 0), child: CustomPaint(
padding: EdgeInsets.all(10), painter: ReactionBubblePainter(),
constraints: BoxConstraints.loose(Size.fromWidth(300)), ),
child: MarkdownBody( )
data: '${widget.message.text}', : SizedBox(),
onTapLink: (link) { Padding(
_launchURL(link); padding: EdgeInsets.only(
}, right: isMyMessage ? 0.0 : 8.0,
styleSheet: MarkdownStyleSheet.fromTheme(Theme.of(context)), left: isMyMessage ? 8.0 : 0.0,
), ),
child: AnimatedContainer(
duration: Duration(milliseconds: 300),
margin: EdgeInsets.only(
top: nOfAttachmentWidgets > 0 ? (topPadding) : (topPadding),
),
decoration: _buildBoxDecoration(
isMyMessage, isLastUser || nOfAttachmentWidgets > 0),
padding: EdgeInsets.all(10),
constraints: BoxConstraints.loose(Size.fromWidth(300)),
child: MarkdownBody(
data: '${widget.message.text}',
onTapLink: (link) {
_launchURL(link);
},
styleSheet: MarkdownStyleSheet.fromTheme(Theme.of(context)),
),
),
),
],
), ),
], ],
)); );
} }
return GestureDetector( return GestureDetector(
child: column, child: IntrinsicWidth(child: column),
onLongPress: () { onLongPress: () {
_showMessageBottomSheet(context); _showMessageBottomSheet(context);
}); });
@@ -307,61 +326,42 @@ class _MessageWidgetState extends State<MessageWidget>
} }
Widget _buildReactions(bool isMyMessage) { Widget _buildReactions(bool isMyMessage) {
return Padding( return GestureDetector(
padding: const EdgeInsets.symmetric(vertical: 2.0), onTap: () {
child: GestureDetector( _showMessageBottomSheet(context);
onTap: () { },
_showMessageBottomSheet(context); child: Padding(
}, padding: const EdgeInsets.symmetric(vertical: 2.0),
child: Stack( child: AnimatedContainer(
overflow: Overflow.visible, duration: Duration(milliseconds: 300),
children: <Widget>[ curve: Curves.decelerate,
widget.message.reactionCounts?.isNotEmpty == true padding: widget.message.reactionCounts?.isNotEmpty == true
? Positioned( ? const EdgeInsets.all(8)
left: isMyMessage ? 0 : null, : EdgeInsets.zero,
right: !isMyMessage ? 0 : null, decoration: BoxDecoration(
bottom: 2, color: Colors.black,
child: CustomPaint( borderRadius: BorderRadius.all(Radius.circular(14))),
painter: ReactionBubblePainter(), child: (widget.message.reactionCounts != null &&
), widget.message.reactionCounts.isNotEmpty)
) ? Row(
: SizedBox(), mainAxisSize: MainAxisSize.min,
Container( mainAxisAlignment: MainAxisAlignment.start,
transform: Matrix4.translationValues( children:
((widget.message.reactionCounts?.length ?? 0) * 10) * widget.message.reactionCounts.keys.map((reactionType) {
(isMyMessage ? -1.0 : 1.0), return Text(
0, reactionToEmoji[reactionType] ?? '?',
0, ) as Widget; //TODO refactor
), }).toList()
padding: widget.message.reactionCounts?.isNotEmpty == true ..add(Padding(
? const EdgeInsets.all(8) padding: const EdgeInsets.only(left: 4.0),
: EdgeInsets.zero, child: Text(
decoration: BoxDecoration( widget.message.reactionCounts.values
color: Colors.black, .fold(0, (t, v) => v + t)
borderRadius: BorderRadius.all(Radius.circular(14))), .toString(),
child: (widget.message.reactionCounts != null && style: TextStyle(color: Colors.white),
widget.message.reactionCounts.isNotEmpty) ),
? Row( )))
mainAxisSize: MainAxisSize.max, : SizedBox(),
mainAxisAlignment: MainAxisAlignment.start,
children: widget.message.reactionCounts.keys
.map((reactionType) {
return Text(
reactionToEmoji[reactionType] ?? '?',
) as Widget; //TODO refactor
}).toList()
..add(Padding(
padding: const EdgeInsets.only(left: 4.0),
child: Text(
widget.message.reactionCounts.values
.fold(0, (t, v) => v + t)
.toString(),
style: TextStyle(color: Colors.white),
),
)))
: SizedBox(),
),
],
), ),
), ),
); );