Media query fix

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [4.1.1] - July 05, 2023
+- Optimized rebuild for MediaQuery property dependent widgets
+- Replaced MediaQuery.of(context).size with MediaQuery.sizeOf(context)
+- Replaced MediaQuery.of(context).viewInsets with MediaQuery.viewInsetsOf(context)
+- Fix dropdown button test
+- Replace properties of mediaquery data of context extension
+
 ## [4.1.0] - May 29, 2023
 
 - [New] VxAdaptive widget for responsive screen adaption and scaling.

example/pubspec.lock

@@ -376,7 +376,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "4.1.0"
+    version: "4.1.1"
   vxstate:
     dependency: transitive
     description:

lib/src/extensions/context_ext.dart

@@ -52,19 +52,19 @@ extension VxContextExtensions on BuildContext {
   MediaQueryData get mq => MediaQuery.of(this);
 
   /// Get MediaQuery Screen Size
-  Size get screenSize => mq.size;
+  Size get screenSize => MediaQuery.sizeOf(this);
 
   /// Get MediaQuery Screen Density
-  double get screenDensity => mq.devicePixelRatio;
+  double get screenDensity => MediaQuery.devicePixelRatioOf(this);
 
   /// Get MediaQuery Screen Padding
-  EdgeInsets get screenPadding => mq.padding;
+  EdgeInsets get screenPadding => MediaQuery.paddingOf(this);
 
   /// Get MediaQuery Screen Width
-  double get screenWidth => mq.size.width;
+  double get screenWidth => screenSize.width;
 
   /// Get MediaQuery Screen Height
-  double get screenHeight => mq.size.height;
+  double get screenHeight => screenSize.height;
 
   /// Get MediaQuery Screen Width in percentage
   double get percentWidth => screenWidth / 100;
@@ -73,10 +73,10 @@ extension VxContextExtensions on BuildContext {
   double get percentHeight => screenHeight / 100;
 
   /// Get MediaQuery safearea padding horizontally
-  double get _safeAreaHorizontal => mq.padding.left + mq.padding.right;
+  double get _safeAreaHorizontal => screenPadding.left + screenPadding.right;
 
   /// Get MediaQuery safearea padding vertically
-  double get _safeAreaVertical => mq.padding.top + mq.padding.bottom;
+  double get _safeAreaVertical => screenPadding.top + screenPadding.bottom;
 
   /// Get MediaQuery Screen Width in percentage including safe area calculation.
   double get safePercentWidth => (screenWidth - _safeAreaHorizontal) / 100;
@@ -123,7 +123,7 @@ extension VxContextExtensions on BuildContext {
   FlutterView? get maybeView => View.maybeOf(this);
 
   ///Returns Orientation using [MediaQuery]
-  Orientation get orientation => mq.orientation;
+  Orientation get orientation => MediaQuery.orientationOf(this);
 
   /// Returns if Orientation is landscape
   bool get isLandscape => orientation == Orientation.landscape;

lib/src/flutter/bottom_sheet.dart

@@ -35,7 +35,7 @@ mixin VxBottomSheet {
         return SafeArea(
           bottom: isSafeAreaFromBottom,
           child: AnimatedPadding(
-            padding: MediaQuery.of(context).viewInsets,
+            padding: MediaQuery.viewInsetsOf(context),
             duration: const Duration(milliseconds: 100),
             child: _VxBottomSheetOptions(
               list: option,
@@ -85,7 +85,7 @@ mixin VxBottomSheet {
         return SafeArea(
           bottom: isSafeAreaFromBottom,
           child: AnimatedPadding(
-            padding: MediaQuery.of(context).viewInsets,
+            padding: MediaQuery.viewInsetsOf(context),
             duration: const Duration(milliseconds: 100),
             child: _VxBottomSheetView(
               maxHeight: maxHeight,
@@ -142,8 +142,8 @@ class _VxBottomSheetOptions extends StatelessWidget {
 
     return Container(
       constraints: BoxConstraints(
-        maxHeight: MediaQuery.of(context).size.height * (maxHeight ?? 0.8),
-        minHeight: MediaQuery.of(context).size.height * (minHeight ?? 0.1),
+        maxHeight: MediaQuery.sizeOf(context).height * (maxHeight ?? 0.8),
+        minHeight: MediaQuery.sizeOf(context).height * (minHeight ?? 0.1),
       ),
       child: SingleChildScrollView(
         child: Column(children: children),
@@ -194,8 +194,8 @@ class _VxBottomSheetView extends StatelessWidget {
   Widget build(BuildContext context) {
     return ConstrainedBox(
       constraints: BoxConstraints(
-        maxHeight: MediaQuery.of(context).size.height * (maxHeight ?? 0.8),
-        minHeight: MediaQuery.of(context).size.height * (minHeight ?? 0.1),
+        maxHeight: MediaQuery.sizeOf(context).height * (maxHeight ?? 0.8),
+        minHeight: MediaQuery.sizeOf(context).height * (minHeight ?? 0.1),
       ),
       child: IntrinsicHeight(child: child),
     );

lib/src/flutter/common/velocity_ensure_visible.dart

@@ -97,8 +97,8 @@ class VxEnsureVisibleWhenFocusedState extends State<VxEnsureVisibleWhenFocused>
   ///
   Future<void> _keyboardToggled() async {
     if (mounted) {
-      final EdgeInsets edgeInsets = MediaQuery.of(context).viewInsets;
-      while (mounted && MediaQuery.of(context).viewInsets == edgeInsets) {
+      final EdgeInsets edgeInsets = MediaQuery.viewInsetsOf(context);
+      while (mounted && MediaQuery.viewInsetsOf(context) == edgeInsets) {
         await Future.delayed(const Duration(milliseconds: 10));
       }
     }

lib/src/flutter/routes.dart

@@ -48,7 +48,7 @@ extension VxRoutesWidgetsExtension on Widget {
   }
 
   Tween<RelativeRect> _createTween(BuildContext context) {
-    final windowSize = MediaQuery.of(context).size;
+    final windowSize = MediaQuery.sizeOf(context);
     final box = context.findRenderObject() as RenderBox;
     final rect = box.localToGlobal(Offset.zero) & box.size;
     final relativeRect = RelativeRect.fromSize(rect, windowSize);

lib/src/flutter/shapes.dart

@@ -77,8 +77,8 @@ class VxCircle extends StatelessWidget with VxShadowMixin<VxCircle> {
     }
 
     return AnimatedContainer(
-      height: radius ?? MediaQuery.of(context).size.shortestSide / 2,
-      width: radius ?? MediaQuery.of(context).size.shortestSide / 2,
+      height: radius ?? MediaQuery.sizeOf(context).shortestSide / 2,
+      width: radius ?? MediaQuery.sizeOf(context).shortestSide / 2,
       duration: kThemeChangeDuration,
       decoration: customDecoration ??
           BoxDecoration(
@@ -165,14 +165,14 @@ class VxCapsule extends StatelessWidget with VxShadowMixin<VxCapsule> {
     }
 
     return AnimatedContainer(
-      height: height ?? MediaQuery.of(context).size.shortestSide / 4,
-      width: width ?? MediaQuery.of(context).size.shortestSide,
+      height: height ?? MediaQuery.sizeOf(context).shortestSide / 4,
+      width: width ?? MediaQuery.sizeOf(context).shortestSide,
       duration: kThemeChangeDuration,
       decoration: customDecoration ??
           BoxDecoration(
               border: border,
               borderRadius: BorderRadius.circular(
-                  MediaQuery.of(context).size.shortestSide / 2),
+                  MediaQuery.sizeOf(context).shortestSide / 2),
               color: effectiveBackgroundColor,
               shape: BoxShape.rectangle,
               gradient: gradient,
@@ -239,8 +239,8 @@ class VxEllipse extends StatelessWidget with VxShadowMixin<VxEllipse> {
 
   @override
   Widget build(BuildContext context) {
-    final width0 = width ?? MediaQuery.of(context).size.shortestSide;
-    final height0 = height ?? MediaQuery.of(context).size.shortestSide / 4;
+    final width0 = width ?? MediaQuery.sizeOf(context).shortestSide;
+    final height0 = height ?? MediaQuery.sizeOf(context).shortestSide / 4;
     assert(debugCheckHasMediaQuery(context));
     final ThemeData theme = Theme.of(context);
     Color? effectiveBackgroundColor = backgroundColor;
@@ -326,8 +326,8 @@ class VxBevel extends StatelessWidget with VxShadowMixin<VxBevel> {
 
   @override
   Widget build(BuildContext context) {
-    final width0 = width ?? MediaQuery.of(context).size.shortestSide;
-    final height0 = height ?? MediaQuery.of(context).size.shortestSide / 4;
+    final width0 = width ?? MediaQuery.sizeOf(context).shortestSide;
+    final height0 = height ?? MediaQuery.sizeOf(context).shortestSide / 4;
     assert(debugCheckHasMediaQuery(context));
     final ThemeData theme = Theme.of(context);
     Color? effectiveBackgroundColor = backgroundColor;
@@ -415,8 +415,8 @@ class VxContinuousRectangle extends StatelessWidget
 
   @override
   Widget build(BuildContext context) {
-    final width0 = width ?? MediaQuery.of(context).size.shortestSide;
-    final height0 = height ?? MediaQuery.of(context).size.shortestSide / 4;
+    final width0 = width ?? MediaQuery.sizeOf(context).shortestSide;
+    final height0 = height ?? MediaQuery.sizeOf(context).shortestSide / 4;
     assert(debugCheckHasMediaQuery(context));
     final ThemeData theme = Theme.of(context);
     Color? effectiveBackgroundColor = backgroundColor;
@@ -483,8 +483,8 @@ class VxTriangle extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final width0 = width ?? MediaQuery.of(context).size.shortestSide / 2;
-    final height0 = height ?? MediaQuery.of(context).size.shortestSide / 2;
+    final width0 = width ?? MediaQuery.sizeOf(context).shortestSide / 2;
+    final height0 = height ?? MediaQuery.sizeOf(context).shortestSide / 2;
     assert(debugCheckHasMediaQuery(context));
     final ThemeData theme = Theme.of(context);
     Color? effectiveBackgroundColor = backgroundColor;
@@ -548,8 +548,8 @@ class VxTicket extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final width0 = width ?? MediaQuery.of(context).size.shortestSide;
-    final height0 = height ?? MediaQuery.of(context).size.shortestSide / 4;
+    final width0 = width ?? MediaQuery.sizeOf(context).shortestSide;
+    final height0 = height ?? MediaQuery.sizeOf(context).shortestSide / 4;
     assert(debugCheckHasMediaQuery(context));
     final ThemeData theme = Theme.of(context);
     Color? effectiveBackgroundColor = backgroundColor;

lib/src/flutter/swiper.dart

@@ -367,7 +367,7 @@ class VxSwiperState extends State<VxSwiper> with TickerProviderStateMixin {
               distortionValue = Curves.easeOut.transform(distortionRatio);
             }
             final double height = widget.height ??
-                MediaQuery.of(context).size.width * (1 / widget.aspectRatio);
+                MediaQuery.sizeOf(context).width * (1 / widget.aspectRatio);
 
             if (widget.scrollDirection == Axis.horizontal) {
               return Center(
@@ -376,8 +376,7 @@ class VxSwiperState extends State<VxSwiper> with TickerProviderStateMixin {
             } else {
               return Center(
                   child: SizedBox(
-                      width:
-                          distortionValue * MediaQuery.of(context).size.width,
+                      width: distortionValue * MediaQuery.sizeOf(context).width,
                       child: child));
             }
           },

lib/src/flutter/toast.dart

@@ -188,7 +188,7 @@ class _VxToastViewState extends State<_VxToastView>
       opacity: _controller!,
       child: Container(
         padding: const EdgeInsets.symmetric(horizontal: 40),
-        width: MediaQuery.of(context).size.width,
+        width: MediaQuery.sizeOf(context).width,
         alignment: Alignment.center,
         child: _buildToastWidget(),
       ),
@@ -267,11 +267,11 @@ class _VxToastViewState extends State<_VxToastView>
   dynamic buildToastPosition(context) {
     dynamic backResult;
     if (widget.toastPosition == VxToastPosition.top) {
-      backResult = MediaQuery.of(context).size.height * 1 / 6;
+      backResult = MediaQuery.sizeOf(context).height * 1 / 6;
     } else if (widget.toastPosition == VxToastPosition.center) {
-      backResult = MediaQuery.of(context).size.height * 1 / 2;
+      backResult = MediaQuery.sizeOf(context).height * 1 / 2;
     } else {
-      backResult = MediaQuery.of(context).size.height * 0.9;
+      backResult = MediaQuery.sizeOf(context).height * 0.9;
     }
     return backResult;
   }

pubspec.yaml

@@ -1,6 +1,6 @@
 name: velocity_x
 description: A minimalist Flutter framework for rapidly building custom designs.
-version: 4.1.0
+version: 4.1.1
 homepage: https://velocityx.dev
 repository: https://github.com/iampawan/VelocityX
 documentation: https://velocityx.dev

test/flutter/drop_down_button_test.dart

@@ -26,8 +26,8 @@ void main() {
           child: ['HELLO', 'HEY', 'HOLA']
               .textDropDown(
                 selectedValue: value,
-                onChanged: (value) {
-                  value = value;
+                onChanged: (cvalue) {
+                  value = cvalue;
                 },
               )
               .make()
@@ -38,11 +38,13 @@ void main() {
 
     // Expects one widget with Text HEY
     expect(find.text('HEY'), findsOneWidget);
-
+    await tester.pumpAndSettle(const Duration(seconds: 1));
     // Tap at the HEY to open drop down
     await tester.tap(find.text('HEY'));
     await tester.pumpAndSettle(const Duration(seconds: 1));
 
+    // Expects one widget with Text HEY
+    expect(find.text('HELLO'), findsOneWidget);
     // Select the value by tapping HELLO
     await tester.tap(find.text('HELLO').last);
     await tester.pumpAndSettle();