New Feature:

- Send Images!

lib/chat/chat_page.dart

@@ -1,7 +1,7 @@
 /*
  * @Author       : Linloir
  * @Date         : 2022-10-13 14:03:16
- * @LastEditTime : 2022-10-15 10:54:53
+ * @LastEditTime : 2022-10-20 00:48:43
  * @Description  : 
  */
 
@@ -87,6 +87,7 @@ class ChatPage extends StatelessWidget {
                         else {
                           //Return history tile
                           return Padding(
+                            key: ValueKey(state.chatHistory[index].message.contentmd5),
                             padding: const EdgeInsets.symmetric(
                               horizontal: 24,
                               vertical: 8

lib/chat/cubit/chat_cubit.dart

@@ -1,7 +1,7 @@
 /*
  * @Author       : Linloir
  * @Date         : 2022-10-13 14:03:56
- * @LastEditTime : 2022-10-19 18:00:37
+ * @LastEditTime : 2022-10-20 00:13:18
  * @Description  : 
  */
 
@@ -106,6 +106,9 @@ class ChatCubit extends Cubit<ChatState> {
     );
     var newHistories = [];
     for(var message in fetchedMessages) {
+      if(state.chatHistory.any((element) => element.message.contentmd5 == message.contentmd5)) {
+        continue;
+      }
       var history = ChatHistory(
         message: message,
         type: message.senderID == userID ? ChatHistoryType.income : ChatHistoryType.outcome,

lib/chat/view/common/image_box.dart

@@ -1,7 +1,7 @@
 /*
  * @Author       : Linloir
  * @Date         : 2022-10-14 17:04:20
- * @LastEditTime : 2022-10-14 17:34:12
+ * @LastEditTime : 2022-10-20 00:47:44
  * @Description  : 
  */
 
@@ -22,7 +22,10 @@ class ImageBox extends StatelessWidget {
   Widget build(BuildContext context) {
     return InkWell(
       onTap: (){},
-      child: Image.memory(base64Decode(history.message.contentDecoded))
+      child: Container(
+        constraints: const BoxConstraints(maxWidth: 500, maxHeight: 250),
+        child: Image.memory(base64Decode(history.message.contentDecoded)),
+      ),
     );
   }
 }

lib/chat/view/in_message_box.dart

@@ -1,7 +1,7 @@
 /*
  * @Author       : Linloir
  * @Date         : 2022-10-14 13:49:47
- * @LastEditTime : 2022-10-15 10:24:35
+ * @LastEditTime : 2022-10-19 23:45:16
  * @Description  : 
  */
 
@@ -22,51 +22,67 @@ class InMessageBox extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return AnimatedContainer(
+    return Column(
-      key: ValueKey(history.message.contentmd5),
+      mainAxisSize: MainAxisSize.min,
-      duration: const Duration(milliseconds: 375),
+      crossAxisAlignment: CrossAxisAlignment.start,
-      padding: const EdgeInsets.symmetric(
+      children: [
-        horizontal: 12,
+        AnimatedContainer(
-        vertical: 8
+          key: ValueKey(history.message.contentmd5),
-      ),
+          duration: const Duration(milliseconds: 375),
-      decoration: BoxDecoration(
+          padding: history.message.type == MessageType.image ? 
-        color: Colors.grey[50],
+            const EdgeInsets.all(0) : 
-        borderRadius: const BorderRadius.only(
+            const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
-            topLeft: Radius.circular(8.0),
+          decoration: BoxDecoration(
-            topRight: Radius.circular(8.0),
+            color: Colors.grey[50],
-            bottomLeft: Radius.zero,
+            borderRadius: const BorderRadius.only(
-            bottomRight: Radius.circular(8.0)
+                topLeft: Radius.circular(8.0),
+                topRight: Radius.circular(8.0),
+                bottomLeft: Radius.zero,
+                bottomRight: Radius.circular(8.0)
+            ),
+            boxShadow: [BoxShadow(blurRadius: 5.0, color: Colors.grey.withOpacity(0.3))]
+          ),
+          child: ClipRRect(
+            borderRadius: const BorderRadius.only(
+                topLeft: Radius.circular(8.0),
+                topRight: Radius.circular(8.0),
+                bottomLeft: Radius.zero,
+                bottomRight: Radius.circular(8.0)
+            ),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                if(history.message.type == MessageType.file)
+                  FileBox(history: history),
+                if(history.message.type == MessageType.image)
+                  ImageBox(history: history),
+                if(history.message.type == MessageType.plaintext)
+                  TextBox(history: history),
+                if(history.message.type != MessageType.image)
+                  ...[
+                    const SizedBox(height: 4.0,),
+                    Text(
+                      _getTimeStamp(history.message.timeStamp),
+                      style: TextStyle(
+                        fontSize: 12,
+                        color: Colors.grey[400],
+                      ),
+                    )
+                  ]
+              ],
+            ),
+          )
         ),
-        boxShadow: [BoxShadow(blurRadius: 5.0, color: Colors.grey.withOpacity(0.3))]
+        if(history.message.type == MessageType.image)
-      ),
+          Text(
-      child: ClipRRect(
+            _getTimeStamp(history.message.timeStamp),
-        borderRadius: const BorderRadius.only(
+            style: TextStyle(
-            topLeft: Radius.circular(8.0),
+              fontSize: 12,
-            topRight: Radius.circular(8.0),
+              color: Colors.grey[400],
-            bottomLeft: Radius.zero,
+            ),
-            bottomRight: Radius.circular(8.0)
+          )
-        ),
+      ]
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            if(history.message.type == MessageType.file)
-              FileBox(history: history),
-            if(history.message.type == MessageType.image)
-              ImageBox(history: history),
-            if(history.message.type == MessageType.plaintext)
-              TextBox(history: history),
-            const SizedBox(height: 4.0,),
-            Text(
-              _getTimeStamp(history.message.timeStamp),
-              style: TextStyle(
-                fontSize: 12,
-                color: Colors.grey[400],
-              ),
-            )
-          ],
-        ),
-      )
     );
   }
 

lib/chat/view/input_box/input_box.dart

@@ -1,10 +1,12 @@
 /*
  * @Author       : Linloir
  * @Date         : 2022-10-14 17:54:30
- * @LastEditTime : 2022-10-18 15:30:05
+ * @LastEditTime : 2022-10-19 23:33:25
  * @Description  : 
  */
 
+import 'dart:convert';
+
 import 'package:file_picker/file_picker.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -83,6 +85,24 @@ class InputBox extends StatelessWidget {
               icon: Icon(Icons.attach_file_rounded, color: Colors.grey[700],)
             ),
             const SizedBox(width: 8.0,),
+            IconButton(
+              onPressed: () {
+                var chatCubit = context.read<ChatCubit>();
+                chatCubit.localServiceRepository.pickFile(FileType.image).then((img) async {
+                  if(img != null) {
+                    var newMessage = Message(
+                      userid: (await SharedPreferences.getInstance()).getInt('userid')!,
+                      targetid: chatCubit.userID,
+                      content: base64.encode(await img.readAsBytes()),
+                      contenttype: MessageType.image,
+                    );
+                    chatCubit.addMessage(newMessage);
+                  }
+                });
+              }, 
+              icon: Icon(Icons.photo_rounded, color: Colors.grey[700],)
+            ),
+            const SizedBox(width: 8.0,),
             BlocBuilder<MessageInputCubit, MessageInputState>(
               builder:(context, state) {
                 return IconButton(

lib/chat/view/out_message_box.dart

@@ -1,7 +1,7 @@
 /*
  * @Author       : Linloir
  * @Date         : 2022-10-14 13:49:28
- * @LastEditTime : 2022-10-15 10:23:43
+ * @LastEditTime : 2022-10-19 23:47:20
  * @Description  : 
  */
 
@@ -22,51 +22,70 @@ class OutMessageBox extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return AnimatedContainer(
+    return Column(
-      key: ValueKey(history.message.contentmd5),
+      mainAxisSize: MainAxisSize.min,
-      duration: const Duration(milliseconds: 375),
+      crossAxisAlignment: CrossAxisAlignment.end,
-      padding: const EdgeInsets.symmetric(
+      children: [
-        horizontal: 12,
+        AnimatedContainer(
-        vertical: 8
+          key: ValueKey(history.message.contentmd5),
-      ),
+          duration: const Duration(milliseconds: 375),
-      decoration: BoxDecoration(
+          padding: history.message.type == MessageType.image ? 
-        color: Colors.blue,
+            const EdgeInsets.all(0) : 
-        borderRadius: const BorderRadius.only(
+            const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
-            topLeft: Radius.circular(8.0),
+          decoration: BoxDecoration(
-            topRight: Radius.circular(8.0),
+            color: Colors.blue,
-            bottomLeft: Radius.circular(8.0),
+            borderRadius: const BorderRadius.only(
-            bottomRight: Radius.zero
+                topLeft: Radius.circular(8.0),
+                topRight: Radius.circular(8.0),
+                bottomLeft: Radius.circular(8.0),
+                bottomRight: Radius.zero
+            ),
+            boxShadow: [BoxShadow(blurRadius: 5.0, color: Colors.grey.withOpacity(0.2))]
+          ),
+          child: ClipRRect(
+            borderRadius: const BorderRadius.only(
+                topLeft: Radius.circular(8.0),
+                topRight: Radius.circular(8.0),
+                bottomLeft: Radius.circular(8.0),
+                bottomRight: Radius.zero
+            ),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.end,
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                if(history.message.type == MessageType.file)
+                  FileBox(history: history),
+                if(history.message.type == MessageType.image)
+                  ImageBox(history: history),
+                if(history.message.type == MessageType.plaintext)
+                  TextBox(history: history),
+                if(history.message.type != MessageType.image)
+                  ...[
+                    const SizedBox(height: 4.0,),
+                    Text(
+                      _getTimeStamp(history.message.timeStamp),
+                      style: TextStyle(
+                        fontSize: 12,
+                        color: Colors.grey[200],
+                      ),
+                    )
+                  ],
+              ],
+            ),
+          )
         ),
-        boxShadow: [BoxShadow(blurRadius: 5.0, color: Colors.grey.withOpacity(0.2))]
+        if(history.message.type == MessageType.image)
-      ),
+          ...[
-      child: ClipRRect(
-        borderRadius: const BorderRadius.only(
-            topLeft: Radius.circular(8.0),
-            topRight: Radius.circular(8.0),
-            bottomLeft: Radius.circular(8.0),
-            bottomRight: Radius.zero
-        ),
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            if(history.message.type == MessageType.file)
-              FileBox(history: history),
-            if(history.message.type == MessageType.image)
-              ImageBox(history: history),
-            if(history.message.type == MessageType.plaintext)
-              TextBox(history: history),
             const SizedBox(height: 4.0,),
             Text(
               _getTimeStamp(history.message.timeStamp),
               style: TextStyle(
                 fontSize: 12,
-                color: Colors.grey[200],
+                color: Colors.grey[800],
               ),
-            )
+            ),
-          ],
+          ]
-        ),
+      ]
-      )
     );
   }
 

lib/home/view/message_page/view/message_tile.dart

@@ -1,7 +1,7 @@
 /*
  * @Author       : Linloir
  * @Date         : 2022-10-13 13:17:52
- * @LastEditTime : 2022-10-18 11:25:40
+ * @LastEditTime : 2022-10-20 00:52:14
  * @Description  : 
  */
 
@@ -106,7 +106,7 @@ class MessageTile extends StatelessWidget {
                         ),
                         child: IgnorePointer(
                           child: Text(
-                            message?.contentDecoded ?? '',
+                            message?.type == MessageType.image ? '[Image]' : message?.contentDecoded ?? '',
                             maxLines: 1,
                             overflow: TextOverflow.ellipsis,
                             style: const TextStyle(