Merge pull request #17 from GetStream/feature/dateSeparators

add date separators
GetStream · Apr 8, 2020 · 070ee97 · 070ee97
2 parents c13ef72 + 6078266
commit 070ee97
Showing 1 changed file with 90 additions and 17 deletions.
diff --git a/lib/src/message_list_view.dart b/lib/src/message_list_view.dart
@@ -1,6 +1,7 @@
 import 'dart:async';
 
 import 'package:flutter/material.dart';
+import 'package:jiffy/jiffy.dart';
 import 'package:stream_chat/stream_chat.dart';
 import 'package:visibility_detector/visibility_detector.dart';
 
@@ -166,39 +167,111 @@ class _MessageListViewState extends State<MessageListView> {
                 i < _messages.length - 1 ? _messages[i + 1] : null;
             final nextMessage = i > 0 ? _messages[i - 1] : null;
 
+            Widget messageWidget;
+
             if (i == 0) {
-              return _buildBottomMessage(
+              messageWidget = _buildBottomMessage(
                 streamChannel,
                 previousMessage,
                 message,
                 context,
               );
-            }
-
-            if (i == _messages.length - 1) {
-              return _buildTopMessage(
+            } else if (i == _messages.length - 1) {
+              messageWidget = _buildTopMessage(
                 message,
                 nextMessage,
                 streamChannel,
                 context,
               );
+            } else {
+              if (widget.messageBuilder != null) {
+                messageWidget = Builder(
+                  key: ValueKey<String>('MESSAGE-${message.id}'),
+                  builder: (_) => widget.messageBuilder(context, message, i),
+                );
+              } else {
+                messageWidget = MessageWidget(
+                  key: ValueKey<String>('MESSAGE-${message.id}'),
+                  previousMessage: previousMessage,
+                  message: message,
+                  nextMessage: nextMessage,
+                  onThreadTap: _onThreadTap,
+                  showOtherMessageUsername: widget.showOtherMessageUsername,
+                );
+              }
             }
 
-            if (widget.messageBuilder != null) {
-              return Builder(
-                key: ValueKey<String>('MESSAGE-${message.id}'),
-                builder: (_) => widget.messageBuilder(context, message, i),
+            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 {
+                dayInfo = createdAt.format('EEEE').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 MessageWidget(
-              key: ValueKey<String>('MESSAGE-${message.id}'),
-              previousMessage: previousMessage,
-              message: message,
-              nextMessage: nextMessage,
-              onThreadTap: _onThreadTap,
-              showOtherMessageUsername: widget.showOtherMessageUsername,
-            );
+            return messageWidget;
           },
           childCount: _messages.length + 2,
           findChildIndexCallback: (key) {