erfan/ui-3

updated the inbox with dates and the new bubble

lib/widgets/inbox.dart

@@ -4,6 +4,7 @@ import 'package:memri/core/models/item.dart';
 import 'package:memri/providers/inbox_provider.dart';
 import 'package:memri/utilities/helpers/app_helper.dart';
 import 'package:memri/utilities/helpers/responsive_helper.dart';
+import 'package:memri/utilities/helpers/time_helper.dart';
 import 'package:memri/widgets/empty.dart';
 import 'package:memri/widgets/loading_indicator.dart';
 import 'package:memri/widgets/screen_error.dart';
@@ -181,6 +182,8 @@ class InboxState extends State<Inbox> {
     Item item =
         (provider.chats[index].getEdgeTargets('~messageChannel') as List)[0];
     String subtitle = item.get('content') ?? '';
+    String date =
+        DateTimeHelper().getDateString(item.get('dateSent')).toString();
     return Container(
       color: provider.selectedChannel == index
           ? app.colors.background
@@ -211,6 +214,12 @@ class InboxState extends State<Inbox> {
                       style: app.styles.bodyText1.copyWith(fontSize: 15),
                     )
                   : null,
+              trailing: Text(
+                date,
+                style: app.styles.bodyText2.copyWith(
+                  color: app.colors.textGrey,
+                ),
+              ),
             ),
           ),
         ],
@@ -386,40 +395,62 @@ class InboxState extends State<Inbox> {
                   provider.activeChatMessages[index].get('id')];
               if (!provider.isMessageExist(index)) return Empty();
 
-              return ListTile(
-                contentPadding: EdgeInsets.symmetric(horizontal: 50),
-                minLeadingWidth: 15,
-                leading: _buildAvatar(image, name),
-                title: Builder(builder: (context) {
-                  var value = provider.activeChatMessages[index]
-                      .get('content')
-                      ?.toString();
-                  if (value == null) {
-                    return Text('');
-                  } else {
-                    bool isMe = provider.activeChatMessages[index]
-                            .edgeItem('sender')
-                            ?.get('isMe') ??
-                        false;
-                    return Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Container(
-                          padding: EdgeInsets.symmetric(
-                              vertical: 10, horizontal: 15),
-                          decoration: BoxDecoration(
-                            color: isMe
-                                ? app.colors.brandViolet.withOpacity(0.1)
-                                : app.theme.scaffoldBackgroundColor,
-                            borderRadius: BorderRadius.circular(20),
-                          ),
-                          child: _buildMessageInBubble(provider, index),
-                        ),
-                        SizedBox(height: 7),
-                      ],
-                    );
-                  }
-                }),
+              return Padding(
+                padding:
+                    const EdgeInsets.symmetric(horizontal: 50, vertical: 7),
+                child: Row(
+                  crossAxisAlignment: CrossAxisAlignment.end,
+                  children: [
+                    _buildAvatar(image, name),
+                    SizedBox(width: 15),
+                    Expanded(
+                      child: Builder(builder: (context) {
+                        var value = provider.activeChatMessages[index]
+                            .get('content')
+                            ?.toString();
+                        if (value == null) {
+                          return Text('');
+                        } else {
+                          bool isMe = provider.activeChatMessages[index]
+                                  .edgeItem('sender')
+                                  ?.get('isMe') ??
+                              false;
+                          Color bubbleColor = isMe
+                              ? app.colors.brandViolet.withOpacity(0.1)
+                              : app.theme.scaffoldBackgroundColor;
+                          return Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              Container(
+                                width: MediaQuery.of(context).size.width,
+                                padding: EdgeInsets.symmetric(
+                                    vertical: 10, horizontal: 15),
+                                decoration: BoxDecoration(
+                                  color: bubbleColor,
+                                  borderRadius: BorderRadius.circular(20),
+                                ),
+                                child: _buildMessageInBubble(provider, index),
+                              ),
+                              Container(
+                                height: 7,
+                                width: 7,
+                                margin: EdgeInsets.only(left: 30),
+                                decoration: BoxDecoration(
+                                  gradient: LinearGradient(
+                                    stops: const [.5, .5],
+                                    begin: Alignment.topLeft,
+                                    end: Alignment.bottomRight,
+                                    colors: [bubbleColor, Colors.transparent],
+                                  ),
+                                ),
+                              ),
+                            ],
+                          );
+                        }
+                      }),
+                    ),
+                  ],
+                ),
               );
             },
           ),
@@ -460,6 +491,9 @@ class InboxState extends State<Inbox> {
     List<Widget> message = [];
     Item activeMessages = provider.activeChatMessages[index];
     var value = activeMessages.get('content')?.toString();
+    String date = DateTimeHelper()
+        .getDateString(activeMessages.get('dateSent'))
+        .toString();
     String? label;
     List<Item>? labelItem = activeMessages.getEdgeTargets('label');
     if (labelItem != null && labelItem.isNotEmpty) {
@@ -482,14 +516,30 @@ class InboxState extends State<Inbox> {
       message.add(
         Padding(
           padding: EdgeInsets.only(top: photo != null ? 8 : 0),
-          child: Text(
-            value,
-            style: app.styles.bodyText1.copyWith(
-                color: provider.selectedFilter != null &&
-                        label != null &&
-                        provider.selectedFilter == label
-                    ? app.colors.brandOrangeAccent
-                    : app.colors.textGrey),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                value,
+                style: app.styles.bodyText1.copyWith(
+                    color: provider.selectedFilter != null &&
+                            label != null &&
+                            provider.selectedFilter == label
+                        ? app.colors.brandOrangeAccent
+                        : app.colors.textGrey),
+              ),
+              SizedBox(height: 4),
+              SizedBox(
+                width: MediaQuery.of(context).size.width,
+                child: Text(
+                  date,
+                  textAlign: TextAlign.end,
+                  style: app.styles.bodyText2.copyWith(
+                    color: app.colors.textGrey,
+                  ),
+                ),
+              )
+            ],
           ),
         ),
       );

pubspec.yaml

@@ -12,7 +12,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 # In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
 # Read more about iOS versioning at
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
-version: 3.0.21+0
+version: 3.0.22+0
 
 environment:
   sdk: ">=2.12.0 <3.0.0"