From f10d47ff78847fb78942df3cc0710f5ae8345941 Mon Sep 17 00:00:00 2001 From: sherlock Date: Thu, 15 Feb 2024 15:35:02 +0700 Subject: [PATCH] improve perf: change MediaQuery.of to sizeOf to reduce rebuild --- lib/config/themes.dart | 2 +- lib/pages/chat/chat.dart | 2 +- lib/pages/chat/chat_emoji_picker.dart | 4 ++-- lib/pages/chat/chat_loading_view.dart | 16 ++++++++-------- lib/pages/chat/events/message/message_style.dart | 2 +- .../chat/input_bar/context_menu_input_bar.dart | 2 +- lib/pages/chat_blank/chat_blank_style.dart | 2 +- lib/pages/chat_draft/draft_chat_view.dart | 2 +- lib/pages/chat_draft/draft_chat_view_style.dart | 2 +- lib/pages/dialer/dialer.dart | 11 +++++------ lib/pages/image_viewer/image_viewer.dart | 2 +- .../widget/contacts_selection_list.dart | 2 +- .../widget/selected_participants_list.dart | 2 +- lib/utils/adaptive_bottom_sheet.dart | 2 +- lib/utils/extension/build_context_extension.dart | 8 ++++---- lib/utils/responsive/responsive_utils.dart | 2 +- lib/widgets/context_menu/twake_context_menu.dart | 8 ++++---- 17 files changed, 35 insertions(+), 36 deletions(-) diff --git a/lib/config/themes.dart b/lib/config/themes.dart index 5119e118ac..4f9cec6b6d 100644 --- 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 index 0187d9b5ca..835f4fec07 100644 --- a/lib/pages/chat/chat.dart +++ b/lib/pages/chat/chat.dart @@ -1418,7 +1418,7 @@ class ChatController extends State 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 index 5e5f2f78f3..455ecb4a4b 100644 --- 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 index 8188cef5ff..eb46ef9953 100644 --- 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 index ff556c0ed8..0ebce83e8c 100644 --- 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 index 89fe103889..dc5f988b63 100644 --- 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 index 147ee65777..0c883284fd 100644 --- 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(MediaQuery.of(context).size.width, ChatBlankStyle.minWidth) / + min(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 index 87aab1c16c..a465f5a373 100644 --- 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 index bae4f938f4..6a6fff8c7c 100644 --- 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 index ec11d2570b..c1a5cfd739 100644 --- a/lib/pages/dialer/dialer.dart +++ b/lib/pages/dialer/dialer.dart @@ -248,18 +248,17 @@ class MyCallingPage extends State { 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 index e5cc957e18..b42c4783d5 100644 --- a/lib/pages/image_viewer/image_viewer.dart +++ b/lib/pages/image_viewer/image_viewer.dart @@ -75,7 +75,7 @@ class ImageViewerController extends State { 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 index 80e73b9a9b..347c99c496 100644 --- 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 index d5e35998fa..6ded008627 100644 --- 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 { 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 index 98676df50d..adbb327a63 100644 --- a/lib/utils/adaptive_bottom_sheet.dart +++ b/lib/utils/adaptive_bottom_sheet.dart @@ -17,7 +17,7 @@ Future showAdaptiveBottomSheet({ 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 index f0abf7de53..6785c2aa79 100644 --- 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 index 8832f9de2d..136f6a16cb 100644 --- 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 index d7b34b4e2f..ead60ea258 100644 --- 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 { 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;