improve perf: change MediaQuery.of to sizeOf to reduce rebuild

linagora · Feb 15, 2024 · f10d47f · f10d47f
1 parent 88fa22b
commit f10d47f
Show file tree

Hide file tree

Showing 17 changed files with 35 additions and 36 deletions.
diff --git a/lib/config/themes.dart b/lib/config/themes.dart
@@ -14,7 +14,7 @@ abstract class TwakeThemes {
   static bool isColumnModeByWidth(double width) => width > columnWidth * 2 + 64;
 
   static bool isColumnMode(BuildContext context) =>
-      isColumnModeByWidth(MediaQuery.of(context).size.width);
+      isColumnModeByWidth(MediaQuery.sizeOf(context).width);
 
   static bool getDisplayNavigationRail(BuildContext context) =>
       !(GoRouterState.of(context).path?.startsWith('/settings') == true);

diff --git a/lib/pages/chat/chat.dart b/lib/pages/chat/chat.dart
@@ -1418,7 +1418,7 @@ class ChatController extends State<Chat>
     Event event,
     TapDownDetails tapDownDetails,
   ) {
-    final screenSize = MediaQuery.of(context).size;
+    final screenSize = MediaQuery.sizeOf(context);
     final offset = tapDownDetails.globalPosition;
     final position = RelativeRect.fromLTRB(
       offset.dx,

diff --git a/lib/pages/chat/chat_emoji_picker.dart b/lib/pages/chat/chat_emoji_picker.dart
@@ -15,8 +15,8 @@ class ChatEmojiPicker extends StatelessWidget {
         return AnimatedContainer(
           duration: TwakeThemes.animationDuration,
           curve: TwakeThemes.animationCurve,
-          width: MediaQuery.of(context).size.width,
-          height: showEmojiPicker ? MediaQuery.of(context).size.height / 3 : 0,
+          width: MediaQuery.sizeOf(context).width,
+          height: showEmojiPicker ? MediaQuery.sizeOf(context).height / 3 : 0,
           child: showEmojiPicker
               ? EmojiPicker(
                   onEmojiSelected: controller.onEmojiSelected,

diff --git a/lib/pages/chat/chat_loading_view.dart b/lib/pages/chat/chat_loading_view.dart
@@ -45,13 +45,13 @@ class ChatLoadingView extends StatelessWidget {
                           lineStyle: SkeletonLineStyle(
                             randomLength: true,
                             width: _random(
-                              MediaQuery.of(context).size.width ~/ 2,
-                              MediaQuery.of(context).size.width ~/ 0.25,
+                              MediaQuery.sizeOf(context).width ~/ 2,
+                              MediaQuery.sizeOf(context).width ~/ 0.25,
                             ).toDouble(),
                             height: _random(56, 96).toDouble(),
                             borderRadius: BorderRadius.circular(16),
-                            minLength: MediaQuery.of(context).size.width / 4,
-                            maxLength: MediaQuery.of(context).size.width / 0.25,
+                            minLength: MediaQuery.sizeOf(context).width / 4,
+                            maxLength: MediaQuery.sizeOf(context).width / 0.25,
                           ),
                         ),
                       ),
@@ -83,13 +83,13 @@ class ChatLoadingView extends StatelessWidget {
                             alignment: AlignmentDirectional.centerEnd,
                             randomLength: true,
                             width: _random(
-                              MediaQuery.of(context).size.width ~/ 2,
-                              MediaQuery.of(context).size.width ~/ 0.25,
+                              MediaQuery.sizeOf(context).width ~/ 2,
+                              MediaQuery.sizeOf(context).width ~/ 0.25,
                             ).toDouble(),
                             height: _random(56, 96).toDouble(),
                             borderRadius: BorderRadius.circular(16),
-                            minLength: MediaQuery.of(context).size.width / 4,
-                            maxLength: MediaQuery.of(context).size.width / 0.25,
+                            minLength: MediaQuery.sizeOf(context).width / 4,
+                            maxLength: MediaQuery.sizeOf(context).width / 0.25,
                           ),
                         ),
                       ),

diff --git a/lib/pages/chat/events/message/message_style.dart b/lib/pages/chat/events/message/message_style.dart
@@ -68,7 +68,7 @@ class MessageStyle {
       desktop: messageBubbleDesktopMaxWidth,
       tablet: context.width * messageBubbleTabletRatioMaxWidth,
       mobile:
-          MediaQuery.of(context).size.width * messageBubbleMobileRatioMaxWidth,
+          MediaQuery.sizeOf(context).width * messageBubbleMobileRatioMaxWidth,
     );
   }
 

diff --git a/lib/pages/chat/input_bar/context_menu_input_bar.dart b/lib/pages/chat/input_bar/context_menu_input_bar.dart
@@ -34,7 +34,7 @@ class ContextMenuInputBar extends StatelessWidget {
             event.buttons == kSecondaryMouseButton) {
           // FIXME: the contextMenuBuilder.editable can do this but its style in web is not customizable
           // currently this is only solution
-          final screenSize = MediaQuery.of(context).size;
+          final screenSize = MediaQuery.sizeOf(context);
           final offset = event.position;
           final position = RelativeRect.fromLTRB(
             offset.dx,

diff --git a/lib/pages/chat_blank/chat_blank_style.dart b/lib/pages/chat_blank/chat_blank_style.dart
@@ -6,7 +6,7 @@ import 'package:linagora_design_flutter/linagora_design_flutter.dart';
 class ChatBlankStyle {
   static const double minWidth = 200;
   static double width(BuildContext context) =>
-      min<double>(MediaQuery.of(context).size.width, ChatBlankStyle.minWidth) /
+      min<double>(MediaQuery.sizeOf(context).width, ChatBlankStyle.minWidth) /
       2;
   static const EdgeInsets elementsPadding =
       EdgeInsets.only(top: 32.0, bottom: 12.0);

diff --git a/lib/pages/chat_draft/draft_chat_view.dart b/lib/pages/chat_draft/draft_chat_view.dart
@@ -309,7 +309,7 @@ class DraftChatView extends StatelessWidget {
                         child: AnimatedContainer(
                           duration: TwakeThemes.animationDuration,
                           curve: TwakeThemes.animationCurve,
-                          width: MediaQuery.of(context).size.width,
+                          width: MediaQuery.sizeOf(context).width,
                           height: DraftChatViewStyle.animatedContainerHeight(
                             context,
                             controller.showEmojiPicker == true,

diff --git a/lib/pages/chat_draft/draft_chat_view_style.dart b/lib/pages/chat_draft/draft_chat_view_style.dart
@@ -18,7 +18,7 @@ class DraftChatViewStyle {
     BuildContext context,
     bool isShowEmojiPicker,
   ) =>
-      isShowEmojiPicker ? MediaQuery.of(context).size.height / 3 : 0;
+      isShowEmojiPicker ? MediaQuery.sizeOf(context).height / 3 : 0;
 
   static int get minLinesInputBar => 1;
 

diff --git a/lib/pages/dialer/dialer.dart b/lib/pages/dialer/dialer.dart
@@ -248,18 +248,17 @@ class MyCallingPage extends State<Calling> {
 
   void _resizeLocalVideo(Orientation orientation) {
     final shortSide = min(
-      MediaQuery.of(context).size.width,
-      MediaQuery.of(context).size.height,
+      MediaQuery.sizeOf(context).width,
+      MediaQuery.sizeOf(context).height,
     );
     _localVideoMargin = remoteStream != null
         ? const EdgeInsets.only(top: 20.0, right: 20.0)
         : EdgeInsets.zero;
-    _localVideoWidth = remoteStream != null
-        ? shortSide / 3
-        : MediaQuery.of(context).size.width;
+    _localVideoWidth =
+        remoteStream != null ? shortSide / 3 : MediaQuery.sizeOf(context).width;
     _localVideoHeight = remoteStream != null
         ? shortSide / 4
-        : MediaQuery.of(context).size.height;
+        : MediaQuery.sizeOf(context).height;
   }
 
   void _handleCallState(CallState state) {

diff --git a/lib/pages/image_viewer/image_viewer.dart b/lib/pages/image_viewer/image_viewer.dart
@@ -75,7 +75,7 @@ class ImageViewerController extends State<ImageViewer> {
   void onInteractionEnds(ScaleEndDetails endDetails) {
     if (PlatformInfos.usesTouchscreen == false) {
       if (endDetails.velocity.pixelsPerSecond.dy >
-          MediaQuery.of(context).size.height * maxScaleFactor) {
+          MediaQuery.sizeOf(context).height * maxScaleFactor) {
         Navigator.of(context, rootNavigator: false).pop();
       }
     }

diff --git a/lib/pages/new_group/widget/contacts_selection_list.dart b/lib/pages/new_group/widget/contacts_selection_list.dart
@@ -130,7 +130,7 @@ class _ContactItem extends StatelessWidget {
             },
       borderRadius: BorderRadius.circular(16.0),
       child: SizedBox(
-        width: MediaQuery.of(context).size.width,
+        width: MediaQuery.sizeOf(context).width,
         child: Padding(
           padding: EdgeInsets.only(
             left: 8.0,

diff --git a/lib/pages/new_group/widget/selected_participants_list.dart b/lib/pages/new_group/widget/selected_participants_list.dart
@@ -31,7 +31,7 @@ class _SelectedParticipantsListState extends State<SelectedParticipantsList> {
       alignment: Alignment.bottomCenter,
       duration: const Duration(milliseconds: 250),
       child: SizedBox(
-        width: MediaQuery.of(context).size.width,
+        width: MediaQuery.sizeOf(context).width,
         child: ListenableBuilder(
           listenable: contactsNotifier,
           builder: (context, Widget? child) {

diff --git a/lib/utils/adaptive_bottom_sheet.dart b/lib/utils/adaptive_bottom_sheet.dart
@@ -17,7 +17,7 @@ Future<T?> showAdaptiveBottomSheet<T>({
       isDismissible: isDismissible,
       isScrollControlled: isScrollControlled,
       constraints: BoxConstraints(
-        maxHeight: MediaQuery.of(context).size.height - 128,
+        maxHeight: MediaQuery.sizeOf(context).height - 128,
         maxWidth: TwakeThemes.columnWidth * 1.5,
       ),
       clipBehavior: Clip.hardEdge,

diff --git a/lib/utils/extension/build_context_extension.dart b/lib/utils/extension/build_context_extension.dart
@@ -3,15 +3,15 @@ import 'package:go_router/go_router.dart';
 import 'package:matrix/matrix.dart';
 
 extension ContextExtensionss on BuildContext {
-  /// The same of [MediaQuery.of(context).size]
-  Size get mediaQuerySize => MediaQuery.of(this).size;
+  /// The same of [MediaQuery.sizeOf(context)]
+  Size get mediaQuerySize => MediaQuery.sizeOf(this);
 
-  /// The same of [MediaQuery.of(context).size.height]
+  /// The same of [MediaQuery.sizeOf(context).height]
   /// Note: updates when you rezise your screen (like on a browser or
   /// desktop window)
   double get height => mediaQuerySize.height;
 
-  /// The same of [MediaQuery.of(context).size.width]
+  /// The same of [MediaQuery.sizeOf(context).width]
   /// Note: updates when you rezise your screen (like on a browser or
   /// desktop window)
   double get width => mediaQuerySize.width;

diff --git a/lib/utils/responsive/responsive_utils.dart b/lib/utils/responsive/responsive_utils.dart
@@ -73,7 +73,7 @@ class ResponsiveUtils {
   }
 
   bool isHeightShortest(BuildContext context) {
-    return MediaQuery.of(context).size.shortestSide < heightShortest;
+    return MediaQuery.sizeOf(context).shortestSide < heightShortest;
   }
 
   bool hasLeftMenuDrawerActive(BuildContext context) {

diff --git a/lib/widgets/context_menu/twake_context_menu.dart b/lib/widgets/context_menu/twake_context_menu.dart
@@ -53,20 +53,20 @@ class TwakeContextMenuState extends State<TwakeContextMenu> {
     final heightsNotAvailable = children.length - _heights.length;
     height += heightsNotAvailable * _kMinTileHeight;
 
-    if (height > MediaQuery.of(context).size.height) {
-      height = MediaQuery.of(context).size.height;
+    if (height > MediaQuery.sizeOf(context).height) {
+      height = MediaQuery.sizeOf(context).height;
     }
 
     double paddingLeft = widget.position.dx;
     double paddingTop = widget.position.dy;
     double paddingRight =
-        MediaQuery.of(context).size.width - widget.position.dx - widget.width;
+        MediaQuery.sizeOf(context).width - widget.position.dx - widget.width;
     if (paddingRight < 0) {
       paddingLeft -= widget.width;
       paddingRight = widget.width + paddingRight;
     }
     double paddingBottom =
-        MediaQuery.of(context).size.height - widget.position.dy - height;
+        MediaQuery.sizeOf(context).height - widget.position.dy - height;
     if (paddingBottom < 0) {
       paddingTop += paddingBottom;
       paddingBottom = 0;