Display users account images

2024-11-21 20:39:22 +00:00 · 2019-04-26 11:04:06 +02:00 · 2019-04-26 11:04:06 +02:00 · 6ab75bbacd
commit 6ab75bbacd
parent 051654d7d5
4 changed files with 168 additions and 38 deletions
--- a/lib/ui/screens/conversation_screen.dart
+++ b/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),
            );
          }),
    );
--- a/lib/ui/tiles/conversation_message_tile.dart
+++ b/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
-              Container(
-                child: Text(
-                  message.message,
-                  textAlign: TextAlign.justify,
-                  style: TextStyle(color: Colors.white),
-                ),
-                padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 10.0),
-                width: 200.0,
-                decoration: BoxDecoration(
-                  color: Colors.blueAccent,
-                  borderRadius: BorderRadius.circular(8.0),
-                ),
+              Row(
+                children: <Widget>[
+                  // Text message
+                  Container(
+                    child: Text(
+                      message.message,
+                      textAlign: TextAlign.justify,
+                      style: TextStyle(color: Colors.white),
+                    ),
+                    padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 10.0),
+                    width: 200.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),
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.start,
+      margin: EdgeInsets.only(left: 10.0, bottom: isLastMessage ? 20.0 : 5.0),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
-          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),
-                ),
-              ),
+          //User name
+          Container(
+            margin: EdgeInsets.only(left: 45.0),
+            child: isFirstMessage
+                ? Text(
+                    userInfo.fullName,
+                    textAlign: TextAlign.left,
+                    style: TextStyle(fontSize: 12.0),
+                  )
+                : null,
+          ),

-              // Date
-              _buildMessageDate()
+          Row(
+            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(),
+            ),
+          )
        ],
      ),
    );
--- a/pubspec.lock
+++ b/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:
--- a/pubspec.yaml
+++ b/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