Display messages images

lib/models/conversation_message.dart

@@ -23,6 +23,9 @@ class ConversationMessage implements Comparable {
         assert(message != null);
 
   DateTime get date => DateTime.fromMillisecondsSinceEpoch(timeInsert * 1000);
+  bool get hasMessage => message != null && message.length > 0;
+  bool get hasImage => imageURL != null;
+
 
   @override
   int compareTo(other) {

lib/ui/tiles/conversation_message_tile.dart

@@ -30,7 +30,7 @@ class ConversationMessageTile extends StatelessWidget {
   /// Build account image
   Widget _buildAccountImage() {
     return Container(
-      margin: EdgeInsets.all(5.0),
+      margin: EdgeInsets.all(10.0),
       child: Material(
         child: CachedNetworkImage(
           imageUrl: userInfo.accountImageURL,
@@ -46,6 +46,39 @@ class ConversationMessageTile extends StatelessWidget {
     );
   }
 
+  /// Build widget image
+  Widget _buildMessageImage() {
+    return Container(
+      margin: EdgeInsets.only(bottom: 2),
+      child: Material(
+        child: CachedNetworkImage(
+          imageUrl: message.imageURL,
+          width: 200.0,
+          height: 200.0,
+          fit: BoxFit.cover,
+          placeholder: (c, s) => Container(
+                width: 200,
+                height: 200,
+                color: Colors.lightBlueAccent,
+                child: Center(
+                  child: CircularProgressIndicator(),
+                ),
+              ),
+          errorWidget: (c, s, o) => Container(
+                width: 200,
+                height: 200,
+                color: Colors.red,
+                child: Center(
+                  child: Icon(Icons.error, color: Colors.white,)
+                ),
+              ),
+        ),
+        borderRadius: BorderRadius.all(Radius.circular(8.0)),
+        clipBehavior: Clip.hardEdge,
+      ),
+    );
+  }
+
   /// Build message date
   Widget _buildMessageDate() {
     return isLastMessage
@@ -63,7 +96,7 @@ class ConversationMessageTile extends StatelessWidget {
   /// Build a message of the current user
   Widget _buildRightMessage() {
     return Container(
-      margin: EdgeInsets.only(right: 5.0, bottom: isLastMessage ? 20.0 : 10.0),
+      margin: EdgeInsets.only(bottom: isLastMessage ? 20.0 : 10.0),
       child: Row(
         mainAxisAlignment: MainAxisAlignment.end,
         children: <Widget>[
@@ -71,19 +104,33 @@ class ConversationMessageTile extends StatelessWidget {
             children: <Widget>[
               Row(
                 children: <Widget>[
+                  Column(
+                    children: <Widget>[
+                      // Text image
+                      Container(
+                        child: message.hasImage ? _buildMessageImage() : null,
+                      ),
+
                       // Text message
                       Container(
+                        child: message.hasMessage
+                            ? Container(
                                 child: Text(
                                   message.message,
                                   textAlign: TextAlign.justify,
                                   style: TextStyle(color: Colors.white),
                                 ),
-                    padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 10.0),
+                                padding:
+                                    EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 10.0),
                                 width: 200.0,
                                 decoration: BoxDecoration(
                                   color: Colors.blueAccent,
                                   borderRadius: BorderRadius.circular(8.0),
                                 ),
+                              )
+                            : null,
+                      ),
+                    ],
                   ),
 
                   // Account image
@@ -107,13 +154,13 @@ 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 : 5.0),
+      margin: EdgeInsets.only(bottom: isLastMessage ? 20.0 : 5.0),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: <Widget>[
           //User name
           Container(
-            margin: EdgeInsets.only(left: 45.0),
+            margin: EdgeInsets.only(left: 55.0),
             child: isFirstMessage
                 ? Text(
                     userInfo.fullName,
@@ -130,18 +177,28 @@ class ConversationMessageTile extends StatelessWidget {
 
               Column(
                 children: <Widget>[
+                  // Text image
+                  Container(
+                    child: message.hasImage ? _buildMessageImage() : null,
+                  ),
+
                   // Text message
                   Container(
+                    child: message.hasMessage
+                        ? Container(
                             child: Text(
                               message.message,
                               textAlign: TextAlign.justify,
                             ),
-                    padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 10.0),
+                            padding:
+                                EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 10.0),
                             width: 200.0,
                             decoration: BoxDecoration(
                               color: Colors.black12,
                               borderRadius: BorderRadius.circular(8.0),
                             ),
+                          )
+                        : null,
                   ),
                 ],
               ),
@@ -150,7 +207,7 @@ class ConversationMessageTile extends StatelessWidget {
 
           // Date
           Container(
-            margin: EdgeInsets.only(left: 45.0),
+            margin: EdgeInsets.only(left: 50.0),
             child: Align(
               alignment: Alignment.topLeft,
               child: _buildMessageDate(),