Display users account images

lib/ui/screens/conversation_screen.dart

@@ -79,7 +79,11 @@ class _ConversationScreenState extends State<ConversationScreen> {
       else
         _messages.addAll(messages);
 
+      //Reverse the order of the messages
       _messages.sort();
+      final reverse =_messages.reversed;
+      _messages = ConversationMessagesList();
+      _messages.addAll(reverse);
     });
   }
 
@@ -151,10 +155,16 @@ class _ConversationScreenState extends State<ConversationScreen> {
     });
   }
 
-  // Check if a message is the last message of a user or not
+  /// Check if a message is the last message of a user or not
   bool _isLastMessage(int index) {
     return index == 0 ||
-        (index > 0 && _messages[index - 1].userID == _messages[index].userID);
+        (index > 0 && _messages[index - 1].userID != _messages[index].userID);
+  }
+
+  /// Check if a message is the first message of a user or not
+  bool _isFirstMessage(int index) {
+    return index == _messages.length - 1 ||
+        (index < _messages.length - 1 && _messages[index + 1].userID != _messages[index].userID);
   }
 
   /// Error handling
@@ -166,12 +176,14 @@ class _ConversationScreenState extends State<ConversationScreen> {
   Widget _buildMessagesList() {
     return Expanded(
       child: ListView.builder(
+        reverse: true,
           itemCount: _messages.length,
           itemBuilder: (c, i) {
             return ConversationMessageTile(
               message: _messages.elementAt(i),
               userInfo: _usersInfo.getUser(_messages[i].userID),
               isLastMessage: _isLastMessage(i),
+              isFirstMessage: _isFirstMessage(i),
             );
           }),
     );

lib/ui/tiles/conversation_message_tile.dart

@@ -1,3 +1,4 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:comunic/models/conversation_message.dart';
 import 'package:comunic/models/user.dart';
 import 'package:comunic/utils/account_utils.dart';
@@ -12,17 +13,39 @@ class ConversationMessageTile extends StatelessWidget {
   final ConversationMessage message;
   final User userInfo;
   final bool isLastMessage;
+  final bool isFirstMessage;
 
   const ConversationMessageTile(
       {Key key,
       @required this.message,
       @required this.userInfo,
-      @required this.isLastMessage})
+      @required this.isLastMessage,
+      @required this.isFirstMessage})
       : assert(message != null),
         assert(userInfo != null),
         assert(isLastMessage != null),
+        assert(isFirstMessage != null),
         super(key: key);
 
+  /// Build account image
+  Widget _buildAccountImage() {
+    return Container(
+      margin: EdgeInsets.all(5.0),
+      child: Material(
+        child: CachedNetworkImage(
+          imageUrl: userInfo.accountImageURL,
+          width: 35.0,
+          height: 35.0,
+          fit: BoxFit.cover,
+        ),
+        borderRadius: BorderRadius.all(
+          Radius.circular(18.0),
+        ),
+        clipBehavior: Clip.hardEdge,
+      ),
+    );
+  }
+
   /// Build message date
   Widget _buildMessageDate() {
     return isLastMessage
@@ -31,6 +54,7 @@ class ConversationMessageTile extends StatelessWidget {
             child: Text(
               dateTimeToString(message.date),
               style: TextStyle(color: Colors.black54, fontSize: 12.0),
+              textAlign: TextAlign.center,
             ),
           )
         : Container();
@@ -39,11 +63,13 @@ class ConversationMessageTile extends StatelessWidget {
   /// Build a message of the current user
   Widget _buildRightMessage() {
     return Container(
-      margin: EdgeInsets.only(right: 10.0, bottom: isLastMessage ? 20.0 : 10.0),
+      margin: EdgeInsets.only(right: 5.0, bottom: isLastMessage ? 20.0 : 10.0),
       child: Row(
         mainAxisAlignment: MainAxisAlignment.end,
         children: <Widget>[
           Column(
+            children: <Widget>[
+              Row(
                 children: <Widget>[
                   // Text message
                   Container(
@@ -60,8 +86,16 @@ class ConversationMessageTile extends StatelessWidget {
                     ),
                   ),
 
+                  // Account image
+                  _buildAccountImage()
+                ],
+              ),
+
               // Date
-              _buildMessageDate()
+              Container(
+                child: _buildMessageDate(),
+                margin: EdgeInsets.only(right: 45.0),
+              )
             ],
           ),
         ],
@@ -73,10 +107,27 @@ class ConversationMessageTile extends StatelessWidget {
   /// Build a message of a peer user
   Widget _buildLeftMessage() {
     return Container(
-      margin: EdgeInsets.only(left: 10.0, bottom: isLastMessage ? 20.0 : 10.0),
+      margin: EdgeInsets.only(left: 10.0, bottom: isLastMessage ? 20.0 : 5.0),
-      child: Row(
+      child: Column(
-        mainAxisAlignment: MainAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: <Widget>[
+          //User name
+          Container(
+            margin: EdgeInsets.only(left: 45.0),
+            child: isFirstMessage
+                ? Text(
+                    userInfo.fullName,
+                    textAlign: TextAlign.left,
+                    style: TextStyle(fontSize: 12.0),
+                  )
+                : null,
+          ),
+
+          Row(
+            children: <Widget>[
+              // Account image
+              _buildAccountImage(),
+
               Column(
                 children: <Widget>[
                   // Text message
@@ -92,13 +143,21 @@ class ConversationMessageTile extends StatelessWidget {
                       borderRadius: BorderRadius.circular(8.0),
                     ),
                   ),
-
-              // Date
-              _buildMessageDate()
                 ],
               ),
             ],
           ),
+
+          // Date
+          Container(
+            margin: EdgeInsets.only(left: 45.0),
+            child: Align(
+              alignment: Alignment.topLeft,
+              child: _buildMessageDate(),
+            ),
+          )
+        ],
+      ),
     );
   }
 

pubspec.lock

@@ -15,6 +15,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.4"
+  cached_network_image:
+    dependency: "direct main"
+    description:
+      name: cached_network_image
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.7.0"
   charcode:
     dependency: transitive
     description:
@@ -29,6 +36,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.14.11"
+  convert:
+    dependency: transitive
+    description:
+      name: convert
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.1"
   cookie_jar:
     dependency: transitive
     description:
@@ -36,6 +50,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.0"
+  crypto:
+    dependency: transitive
+    description:
+      name: crypto
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.6"
   cupertino_icons:
     dependency: "direct main"
     description:
@@ -55,11 +76,32 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_cache_manager:
+    dependency: transitive
+    description:
+      name: flutter_cache_manager
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.3.2"
   flutter_test:
     dependency: "direct dev"
     description: flutter
     source: sdk
     version: "0.0.0"
+  http:
+    dependency: transitive
+    description:
+      name: http
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.12.0+2"
+  http_parser:
+    dependency: transitive
+    description:
+      name: http_parser
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.1.3"
   image_picker:
     dependency: "direct main"
     description:
@@ -88,6 +130,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.6.2"
+  path_provider:
+    dependency: transitive
+    description:
+      name: path_provider
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.5.0+1"
   pedantic:
     dependency: transitive
     description:
@@ -177,6 +226,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.1.6"
+  uuid:
+    dependency: transitive
+    description:
+      name: uuid
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.1"
   vector_math:
     dependency: transitive
     description:

pubspec.yaml

@@ -36,6 +36,9 @@ dependencies:
   # The HTTP client is used to make requests on the Comunic API
   dio: ^2.1.2
 
+  # This plugins allows to load remote images
+  cached_network_image: ^0.7.0
+
 dev_dependencies:
   flutter_test:
     sdk: flutter