09 - New: Chat message info;

lib/ui/chat_screen.dart

@@ -5,6 +5,7 @@ import 'package:firebase_auth/firebase_auth.dart';
 import 'package:google_sign_in/google_sign_in.dart';
 import 'dart:io';
 
+import 'package:chat/widgets/chat_message.dart';
 import 'package:chat/widgets/input.dart';
 
 class ChatScreen extends StatefulWidget {
@@ -51,8 +52,11 @@ class _ChatScreenState extends State<ChatScreen> {
 
       ScaffoldMessenger.of(context).removeCurrentSnackBar();
       ScaffoldMessenger.of(context).showSnackBar(snackbar);
+
+      return;
     }
 
+    print(user);
     Map<String, dynamic> data = {
       'senderUid': user.uid,
       'senderName': user.displayName,
@@ -113,9 +117,7 @@ class _ChatScreenState extends State<ChatScreen> {
                       itemCount: documentList.length,
                       reverse: true,
                       itemBuilder: (context, index) {
-                        return ListTile(
-                          title: Text(documentList[index].data()['value']),
-                        );
+                        return ChatMessage(documentList[index].data(), true);
                       },
                     );
                 }

lib/widgets/chat_message.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+
+class ChatMessage extends StatelessWidget {
+  /// Props
+  /// Message info
+  final Map<String, dynamic> data;
+
+  /// Check if message is mine
+  final bool isOwner;
+
+  /// Constructor
+  ChatMessage(this.data, this.isOwner);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: EdgeInsets.symmetric(vertical: 8, horizontal: 8),
+      child: Row(
+        children: [
+          if (!isOwner)
+            Container(
+              padding: EdgeInsets.only(right: 8),
+              child: CircleAvatar(
+                backgroundImage: NetworkImage(data['senderPhotoUrl']),
+              ),
+            ),
+          Expanded(
+            child: Column(
+              crossAxisAlignment:
+                  isOwner ? CrossAxisAlignment.end : CrossAxisAlignment.start,
+              children: [
+                data['imageUrl'] != null
+                    ? Image.network(
+                        data['imageUrl'],
+                        width: 250,
+                      )
+                    : Text(
+                        data['value'],
+                        textAlign: isOwner ? TextAlign.end : TextAlign.start,
+                        style: TextStyle(fontSize: 14),
+                      ),
+                Text(
+                  data['senderName'],
+                  style: TextStyle(fontSize: 10, fontWeight: FontWeight.w300),
+                ),
+              ],
+            ),
+          ),
+          if (isOwner)
+            Container(
+              padding: EdgeInsets.only(left: 8),
+              child: CircleAvatar(
+                backgroundImage: NetworkImage(data['senderPhotoUrl']),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/input.dart

@@ -3,6 +3,7 @@ import 'dart:io';
 import 'package:image_picker/image_picker.dart';
 
 class Input extends StatefulWidget {
+  /// Props
   /// Send message to Firebase
   final Function({String value, File file}) sendMessage;
 

web/index.html

@@ -43,6 +43,7 @@
   <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
   <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-firestore.js"></script>
   <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-storage.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-auth.js"></script>
   <script src="main.dart.js" type="application/javascript"></script>
 </body>
 </html>