extract date_divider and reply_indicator widgets
This commit is contained in:
@@ -0,0 +1,91 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:jiffy/jiffy.dart';
|
||||
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
|
||||
|
||||
/// It shows a date divider depending on the date difference
|
||||
class DateDivider extends StatelessWidget {
|
||||
const DateDivider({
|
||||
Key key,
|
||||
@required this.nextMessage,
|
||||
@required this.messageWidget,
|
||||
}) : super(key: key);
|
||||
|
||||
final Message nextMessage;
|
||||
final Widget messageWidget;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final divider = Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8.0),
|
||||
child: Divider(),
|
||||
),
|
||||
);
|
||||
|
||||
final createdAt = Jiffy(nextMessage.createdAt.toLocal());
|
||||
final now = DateTime.now();
|
||||
final hourInfo = createdAt.format('h:mm a');
|
||||
|
||||
String dayInfo;
|
||||
if (Jiffy(createdAt).isSame(now, Units.DAY)) {
|
||||
dayInfo = 'TODAY';
|
||||
} else if (Jiffy(createdAt)
|
||||
.isSame(now.subtract(Duration(days: 1)), Units.DAY)) {
|
||||
dayInfo = 'YESTERDAY';
|
||||
} else if (Jiffy(createdAt).isAfter(
|
||||
now.subtract(Duration(days: 7)),
|
||||
Units.DAY,
|
||||
)) {
|
||||
dayInfo = createdAt.format('EEEE').toUpperCase();
|
||||
} else if (Jiffy(createdAt).isAfter(
|
||||
Jiffy(now).subtract(years: 1),
|
||||
Units.DAY,
|
||||
)) {
|
||||
dayInfo = createdAt.format('dd/MM').toUpperCase();
|
||||
} else {
|
||||
dayInfo = createdAt.format('dd/MM/yyyy').toUpperCase();
|
||||
}
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: <Widget>[
|
||||
messageWidget,
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 24.0),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
divider,
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 32.0),
|
||||
child: Text.rich(
|
||||
TextSpan(
|
||||
children: [
|
||||
TextSpan(
|
||||
text: dayInfo,
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
TextSpan(text: ' AT'),
|
||||
TextSpan(text: ' $hourInfo'),
|
||||
],
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.normal,
|
||||
),
|
||||
),
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
color:
|
||||
Theme.of(context).textTheme.title.color.withOpacity(.5),
|
||||
),
|
||||
),
|
||||
),
|
||||
divider,
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -6,6 +6,7 @@ import 'package:stream_chat/stream_chat.dart';
|
||||
import 'package:visibility_detector/visibility_detector.dart';
|
||||
|
||||
import '../stream_chat_flutter.dart';
|
||||
import 'date_divider.dart';
|
||||
import 'message_widget.dart';
|
||||
import 'stream_channel.dart';
|
||||
|
||||
@@ -225,80 +226,9 @@ class _MessageListViewState extends State<MessageListView> {
|
||||
if (nextMessage != null &&
|
||||
!Jiffy(message.createdAt.toLocal())
|
||||
.isSame(nextMessage.createdAt.toLocal(), Units.DAY)) {
|
||||
final divider = Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8.0),
|
||||
child: Divider(),
|
||||
),
|
||||
);
|
||||
|
||||
final createdAt = Jiffy(nextMessage.createdAt.toLocal());
|
||||
final now = DateTime.now();
|
||||
final hourInfo = createdAt.format('h:mm a');
|
||||
|
||||
String dayInfo;
|
||||
if (Jiffy(createdAt).isSame(now, Units.DAY)) {
|
||||
dayInfo = 'TODAY';
|
||||
} else if (Jiffy(createdAt)
|
||||
.isSame(now.subtract(Duration(days: 1)), Units.DAY)) {
|
||||
dayInfo = 'YESTERDAY';
|
||||
} else if (Jiffy(createdAt).isAfter(
|
||||
now.subtract(Duration(days: 7)),
|
||||
Units.DAY,
|
||||
)) {
|
||||
dayInfo = createdAt.format('EEEE').toUpperCase();
|
||||
} else if (Jiffy(createdAt).isAfter(
|
||||
Jiffy(now).subtract(years: 1),
|
||||
Units.DAY,
|
||||
)) {
|
||||
dayInfo = createdAt.format('dd/MM').toUpperCase();
|
||||
} else {
|
||||
dayInfo = createdAt.format('dd/MM/yyyy').toUpperCase();
|
||||
}
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: <Widget>[
|
||||
messageWidget,
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 24.0),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
divider,
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 32.0),
|
||||
child: Text.rich(
|
||||
TextSpan(
|
||||
children: [
|
||||
TextSpan(
|
||||
text: dayInfo,
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
TextSpan(text: ' AT'),
|
||||
TextSpan(text: ' $hourInfo'),
|
||||
],
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.normal,
|
||||
),
|
||||
),
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
color: Theme.of(context)
|
||||
.textTheme
|
||||
.title
|
||||
.color
|
||||
.withOpacity(.5),
|
||||
),
|
||||
),
|
||||
),
|
||||
divider,
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
return DateDivider(
|
||||
messageWidget: messageWidget,
|
||||
nextMessage: nextMessage,
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
+12
-38
@@ -1,5 +1,4 @@
|
||||
import 'dart:io';
|
||||
import 'dart:math';
|
||||
|
||||
import 'package:cached_network_image/cached_network_image.dart';
|
||||
import 'package:chewie/chewie.dart';
|
||||
@@ -13,6 +12,7 @@ import 'package:stream_chat_flutter/src/full_screen_image.dart';
|
||||
import 'package:stream_chat_flutter/src/message_input.dart';
|
||||
import 'package:stream_chat_flutter/src/message_list_view.dart';
|
||||
import 'package:stream_chat_flutter/src/reaction_picker.dart';
|
||||
import 'package:stream_chat_flutter/src/reply_indicator.dart';
|
||||
import 'package:stream_chat_flutter/src/sending_indicator.dart';
|
||||
import 'package:stream_chat_flutter/src/stream_channel.dart';
|
||||
import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
|
||||
@@ -206,45 +206,19 @@ class _MessageWidgetState extends State<MessageWidget>
|
||||
}
|
||||
|
||||
Widget _buildThreadIndicator(BuildContext context) {
|
||||
var row = [
|
||||
Text(
|
||||
'Replies: ${widget.message.replyCount}',
|
||||
style: _messageTheme.replies,
|
||||
),
|
||||
Transform(
|
||||
transform: Matrix4.rotationY(_isMyMessage ? 0 : pi),
|
||||
alignment: Alignment.center,
|
||||
child: Icon(
|
||||
Icons.subdirectory_arrow_left,
|
||||
color: Theme.of(context).brightness == Brightness.dark
|
||||
? Colors.white12
|
||||
: Colors.black12,
|
||||
),
|
||||
),
|
||||
];
|
||||
|
||||
if (!_isMyMessage) {
|
||||
row = row.reversed.toList();
|
||||
}
|
||||
|
||||
return (widget.message.replyCount ?? 0) > 0
|
||||
? GestureDetector(
|
||||
onTap: () {
|
||||
if (widget.isParent) {
|
||||
return;
|
||||
}
|
||||
if (widget.onThreadTap != null) {
|
||||
if (widget.message?.replyCount != null && widget.message.replyCount > 0) {
|
||||
return ReplyIndicator(
|
||||
onTap: widget.isParent
|
||||
? () {
|
||||
widget.onThreadTap(widget.message);
|
||||
}
|
||||
},
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 2.0),
|
||||
child: Row(
|
||||
children: row,
|
||||
),
|
||||
),
|
||||
)
|
||||
: SizedBox();
|
||||
: null,
|
||||
message: widget.message,
|
||||
messageTheme: _messageTheme,
|
||||
reversed: _isMyMessage,
|
||||
);
|
||||
}
|
||||
return SizedBox();
|
||||
}
|
||||
|
||||
Widget _buildBubble(
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
import 'dart:math';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:stream_chat/stream_chat.dart';
|
||||
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
|
||||
|
||||
class ReplyIndicator extends StatelessWidget {
|
||||
final Message message;
|
||||
final VoidCallback onTap;
|
||||
final bool reversed;
|
||||
final MessageTheme messageTheme;
|
||||
|
||||
const ReplyIndicator({
|
||||
Key key,
|
||||
this.message,
|
||||
this.onTap,
|
||||
this.reversed = false,
|
||||
this.messageTheme,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
var row = [
|
||||
Text(
|
||||
'Replies: ${message.replyCount}',
|
||||
style: messageTheme?.replies,
|
||||
),
|
||||
Transform(
|
||||
transform: Matrix4.rotationY(reversed ? 0 : pi),
|
||||
alignment: Alignment.center,
|
||||
child: Icon(
|
||||
Icons.subdirectory_arrow_left,
|
||||
color: Theme.of(context).brightness == Brightness.dark
|
||||
? Colors.white12
|
||||
: Colors.black12,
|
||||
),
|
||||
),
|
||||
];
|
||||
|
||||
if (!reversed) {
|
||||
row = row.reversed.toList();
|
||||
}
|
||||
|
||||
return GestureDetector(
|
||||
onTap: onTap,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 2.0),
|
||||
child: Row(
|
||||
children: row,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -19,7 +19,7 @@ class SendingIndicator extends StatelessWidget {
|
||||
),
|
||||
child: CircleAvatar(
|
||||
radius: 4,
|
||||
backgroundColor: Theme.of(context).accentColor,
|
||||
backgroundColor: StreamChatTheme.of(context).accentColor,
|
||||
child: Icon(
|
||||
Icons.done,
|
||||
color: Colors.white,
|
||||
|
||||
@@ -6,6 +6,7 @@ export 'src/channel_list_view.dart';
|
||||
export 'src/channel_name.dart';
|
||||
export 'src/channel_preview.dart';
|
||||
export 'src/channels_bloc.dart';
|
||||
export 'src/date_divider.dart';
|
||||
export 'src/message_input.dart';
|
||||
export 'src/message_list_view.dart';
|
||||
export 'src/message_widget.dart';
|
||||
|
||||
Reference in New Issue
Block a user