feat: increased image performance

Added resizing to images which dramatically increased efficiency.

Drastically decreased
memory usages.

Imporved cached images loading time.

Fixed PostMedia carousel rebuilding. Previously, PostView always used InViewNotifier. That caused widget inside of the InViewNotifier widget to constantly rebuild. However, we need to track whether the widget is in view only if it is video. We shouldn't have wrapped images with InViewNotifierWidget.

Fixed send duplicated attachments issue.

Author: itsezlife

lib/auth/login/view/login_page.dart

@@ -56,11 +56,29 @@ class LoginView extends StatelessWidget {
                     ),
                   ),
                   const Align(child: SignInButton()),
-                  const Padding(
-                    padding: EdgeInsets.symmetric(
-                      vertical: AppSpacing.md,
-                    ),
-                    child: AppDivider(withText: true),
+                  Row(
+                    children: <Widget>[
+                      const Expanded(
+                        child: AppDivider(
+                          endIndent: AppSpacing.sm,
+                          indent: AppSpacing.md,
+                          color: AppColors.white,
+                          height: 36,
+                        ),
+                      ),
+                      Text(
+                        'OR',
+                        style: context.titleMedium,
+                      ),
+                      const Expanded(
+                        child: AppDivider(
+                          color: AppColors.white,
+                          indent: AppSpacing.sm,
+                          endIndent: AppSpacing.md,
+                          height: 36,
+                        ),
+                      ),
+                    ],
                   ),
                   Align(
                     child: AuthProviderSignInButton(

lib/chats/chat/view/chat_page.dart

@@ -456,10 +456,11 @@ class ChatAppBar extends StatelessWidget implements PreferredSizeWidget {
         title: Text(participant.displayUsername),
         subtitle: Text(context.l10n.onlineText),
         leading: UserStoriesAvatar(
+          resizeHeight: 156,
           author: participant,
           enableInactiveBorder: false,
           withAdaptiveBorder: false,
-          radius: 26,
+          radius: 22,
         ),
       ),
       bottom: const PreferredSize(

lib/chats/chat/widgets/message_content.dart

@@ -236,13 +236,7 @@ class MessageSharedPost extends StatelessWidget {
               ),
               Stack(
                 children: [
-                  AspectRatio(
-                    aspectRatio: 1,
-                    child: ImageAttachmentThumbnail(
-                      image: Attachment(imageUrl: sharedPost.firstMediaUrl),
-                      fit: BoxFit.cover,
-                    ),
-                  ),
+                  MessageSharedPostImage(sharedPost: sharedPost),
                   Positioned(
                     top: AppSpacing.sm,
                     right: AppSpacing.sm,
@@ -329,6 +323,31 @@ class MessageSharedPost extends StatelessWidget {
   }
 }
 
+class MessageSharedPostImage extends StatelessWidget {
+  const MessageSharedPostImage({
+    required this.sharedPost,
+    super.key,
+  });
+
+  final PostBlock sharedPost;
+
+  @override
+  Widget build(BuildContext context) {
+    final screenWidth = (context.screenWidth * .85) - AppSpacing.md * 2;
+    final pixelRatio = context.devicePixelRatio;
+
+    final thumbnailWidth = (screenWidth * pixelRatio) ~/ 1;
+    return AspectRatio(
+      aspectRatio: 1,
+      child: ImageAttachmentThumbnail(
+        resizeHeight: thumbnailWidth,
+        image: Attachment(imageUrl: sharedPost.firstMediaUrl),
+        fit: BoxFit.cover,
+      ),
+    );
+  }
+}
+
 class MessageSharedReel extends StatelessWidget {
   const MessageSharedReel({
     required this.sharedPost,

lib/chats/chat/widgets/message_input_controller.dart

@@ -144,26 +144,11 @@ class MessageInputController extends ValueNotifier<Message> {
     attachments = [...attachments, attachment];
   }
 
-  /// Adds a new attachment at the specified [index].
-  void addAttachmentAt(int index, Attachment attachment) {
-    attachments = [...attachments]..insert(index, attachment);
-  }
-
   /// Removes the specified [attachment] from the message.
   void removeAttachment(Attachment attachment) {
     attachments = [...attachments]..remove(attachment);
   }
 
-  /// Remove the attachment with the given [attachmentId].
-  void removeAttachmentById(String attachmentId) {
-    attachments = [...attachments]..removeWhere((it) => it.id == attachmentId);
-  }
-
-  /// Removes the attachment at the given [index].
-  void removeAttachmentAt(int index) {
-    attachments = [...attachments]..removeAt(index);
-  }
-
   /// Clears the message attachments.
   void clearAttachments() {
     attachments = [];
@@ -242,17 +227,12 @@ class MessageInputController extends ValueNotifier<Message> {
     if (attachments
         .map((e) => e.type.toAttachmentType)
         .contains(AttachmentType.urlPreview)) {
-      attachments.retainWhere(
-        (e) => e.type.toAttachmentType == AttachmentType.urlPreview,
-      );
-      attachments = [...attachments]
-        ..remove(attachment)
-        ..insert(0, attachment);
-    } else {
-      attachments = [...attachments]
-        ..remove(attachment)
-        ..insert(0, attachment);
+      attachments = attachments
+        ..removeWhere(
+          (e) => e.type.toAttachmentType == AttachmentType.urlPreview,
+        );
     }
+    addAttachment(attachment);
     _ogAttachment = attachment;
   }
 

lib/chats/chat/widgets/replied_message_bubble.dart

@@ -56,6 +56,7 @@ class RepliedMessageBubble extends StatelessWidget {
           children: [
             if (!repliedMessageSharedPostDeleted) ...[
               ImageAttachmentThumbnail(
+                resizeHeight: 138,
                 image: Attachment(imageUrl: replyMessageAttachmentUrl),
                 fit: BoxFit.cover,
                 borderRadius: 4,

lib/chats/widgets/chat_inbox_tile.dart

@@ -37,6 +37,7 @@ class ChatInboxTile extends StatelessWidget {
             .add(ChatsDeleteChatRequested(chatId: chat.id, userId: user.id)),
       ),
       leading: UserStoriesAvatar(
+        resizeHeight: 156,
         author: participant,
         enableInactiveBorder: false,
         withAdaptiveBorder: false,

lib/comments/comment/view/comment_view.dart

@@ -77,6 +77,7 @@ class CommentGroup extends StatelessWidget {
           ),
           avatarBuilder: (context, author, onAvatarTap, radius) =>
               UserStoriesAvatar(
+            resizeHeight: 108,
             author: author,
             onAvatarTap: onAvatarTap,
             radius: radius,

lib/feed/post/view/post_view.dart

@@ -135,6 +135,7 @@ class PostLargeView extends StatelessWidget {
       likersInFollowings: likersInFollowings,
       postAuthorAvatarBuilder: (context, author, onAvatarTap) {
         return UserStoriesAvatar(
+          resizeHeight: 108,
           author: author.toUser,
           onAvatarTap: onAvatarTap,
           enableInactiveBorder: false,

lib/feed/post/widgets/post_popup_dialog.dart

@@ -100,6 +100,7 @@ class PopupDialogHeader extends StatelessWidget {
       ),
       horizontalTitleGap: AppSpacing.sm,
       leading: UserProfileAvatar(
+        resizeHeight: 108,
         avatarUrl: block.author.avatarUrl,
         isLarge: false,
         enableBorder: false,
@@ -134,13 +135,7 @@ class PopupDialogBody extends StatelessWidget {
       alignment: Alignment.center,
       children: [
         if (block.firstMedia is ImageMedia)
-          AspectRatio(
-            aspectRatio: 1,
-            child: ImageAttachmentThumbnail(
-              image: Attachment(imageUrl: block.firstMediaUrl),
-              fit: BoxFit.cover,
-            ),
-          )
+          PostPopupImage(block: block)
         else
           InlineVideo(
             videoSettings: VideoSettings.build(
@@ -172,6 +167,32 @@ class PopupDialogBody extends StatelessWidget {
   }
 }
 
+class PostPopupImage extends StatelessWidget {
+  const PostPopupImage({
+    required this.block,
+    super.key,
+  });
+
+  final PostBlock block;
+
+  @override
+  Widget build(BuildContext context) {
+    final screenWidth = (context.screenWidth) - AppSpacing.md * 2;
+    final pixelRatio = context.devicePixelRatio;
+
+    final thumbnailWidth = (screenWidth * pixelRatio) ~/ 1;
+
+    return AspectRatio(
+      aspectRatio: 1,
+      child: ImageAttachmentThumbnail(
+        resizeWidth: thumbnailWidth,
+        image: Attachment(imageUrl: block.firstMediaUrl),
+        fit: BoxFit.cover,
+      ),
+    );
+  }
+}
+
 class PopupDialogFooter extends StatelessWidget {
   const PopupDialogFooter({
     required this.likeButtonKey,

lib/feed/post/widgets/share_post.dart

@@ -526,6 +526,7 @@ class UsersListView extends StatelessWidget {
                             Stack(
                               children: [
                                 UserProfileAvatar(
+                                  resizeHeight: 252,
                                   avatarUrl: user.avatarUrl,
                                   enableBorder: false,
                                 ),