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,29 +63,39 @@ 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>[
-              // Text message
+              Row(
-              Container(
+                children: <Widget>[
-                child: Text(
+                  // Text message
-                  message.message,
+                  Container(
-                  textAlign: TextAlign.justify,
+                    child: Text(
-                  style: TextStyle(color: Colors.white),
+                      message.message,
-                ),
+                      textAlign: TextAlign.justify,
-                padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 10.0),
+                      style: TextStyle(color: Colors.white),
-                width: 200.0,
+                    ),
-                decoration: BoxDecoration(
+                    padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 10.0),
-                  color: Colors.blueAccent,
+                    width: 200.0,
-                  borderRadius: BorderRadius.circular(8.0),
+                    decoration: BoxDecoration(
-                ),
+                      color: Colors.blueAccent,
+                      borderRadius: BorderRadius.circular(8.0),
+                    ),
+                  ),
+
+                  // Account image
+                  _buildAccountImage()
+                ],
               ),
 
               // Date
-              _buildMessageDate()
+              Container(
+                child: _buildMessageDate(),
+                margin: EdgeInsets.only(right: 45.0),
+              )
             ],
           ),
         ],
@@ -73,30 +107,55 @@ 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>[
-          Column(
+          //User name
-            children: <Widget>[
+          Container(
-              // Text message
+            margin: EdgeInsets.only(left: 45.0),
-              Container(
+            child: isFirstMessage
-                child: Text(
+                ? Text(
-                  message.message,
+                    userInfo.fullName,
-                  textAlign: TextAlign.justify,
+                    textAlign: TextAlign.left,
-                ),
+                    style: TextStyle(fontSize: 12.0),
-                padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 10.0),
+                  )
-                width: 200.0,
+                : null,
-                decoration: BoxDecoration(
+          ),
-                  color: Colors.black12,
-                  borderRadius: BorderRadius.circular(8.0),
-                ),
-              ),
 
-              // Date
+          Row(
-              _buildMessageDate()
+            children: <Widget>[
+              // Account image
+              _buildAccountImage(),
+
+              Column(
+                children: <Widget>[
+                  // Text message
+                  Container(
+                    child: Text(
+                      message.message,
+                      textAlign: TextAlign.justify,
+                    ),
+                    padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 10.0),
+                    width: 200.0,
+                    decoration: BoxDecoration(
+                      color: Colors.black12,
+                      borderRadius: BorderRadius.circular(8.0),
+                    ),
+                  ),
+                ],
+              ),
             ],
           ),
+
+          // 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