Replace usages of MediaQuery.of(context).property with MediaQuery.propertyOf(context) (#184211)

AbdeMohlbi · web-flow · commit 16b4ae45a8a1 · 2026-04-01T21:29:49.000Z
This change replaces the following usages: - `MediaQuery.of(context).size.width` with `MediaQuery.widthOf(context)` - `MediaQuery.of(context).size.height` with `MediaQuery.heightOf(context)` ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [AI contribution guidelines] and understand my responsibilities, or I am not using AI tools. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [ ] I signed the [CLA]. - [ ] I listed at least one issue that this PR fixes in the description above. - [ ] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord]. **Note**: The Flutter team is currently trialing the use of [Gemini Code Assist for GitHub](https://developers.google.com/gemini-code-assist/docs/review-github-code). Comments from the `gemini-code-assist` bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed.  [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [AI contribution guidelines]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#ai-contribution-guidelines [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md
diff --git a/dev/benchmarks/macrobenchmarks/lib/src/large_image_changer.dart b/dev/benchmarks/macrobenchmarks/lib/src/large_image_changer.dart
@@ -24,8 +24,8 @@ class _LargeImageChangerState extends State<LargeImageChangerPage> {
     super.didChangeDependencies();
     currentImage = ResizeImage(
       const ExactAssetImage('assets/999x1000.png'),
-      width: (MediaQuery.of(context).size.width * 2).toInt() + imageIndex,
-      height: (MediaQuery.of(context).size.height * 2).toInt() + imageIndex,
+      width: (MediaQuery.widthOf(context) * 2).toInt() + imageIndex,
+      height: (MediaQuery.heightOf(context) * 2).toInt() + imageIndex,
       allowUpscaling: true,
     );
     _timer?.cancel();
@@ -35,8 +35,8 @@ class _LargeImageChangerState extends State<LargeImageChangerPage> {
           imageIndex = (imageIndex + 1) % 6;
           currentImage = ResizeImage(
             const ExactAssetImage('assets/999x1000.png'),
-            width: (MediaQuery.of(context).size.width * 2).toInt() + imageIndex,
-            height: (MediaQuery.of(context).size.height * 2).toInt() + imageIndex,
+            width: (MediaQuery.widthOf(context) * 2).toInt() + imageIndex,
+            height: (MediaQuery.heightOf(context) * 2).toInt() + imageIndex,
             allowUpscaling: true,
           );
         });
diff --git a/dev/benchmarks/macrobenchmarks/lib/src/multi_widget_construction.dart b/dev/benchmarks/macrobenchmarks/lib/src/multi_widget_construction.dart
@@ -60,7 +60,7 @@ class _MultiWidgetConstructTableState extends State<MultiWidgetConstructTable>
       builder: (BuildContext context, _) {
         final int totalLength = widget.rowCount * widget.columnCount;
         final int widgetCounter = counter * totalLength;
-        final double height = MediaQuery.of(context).size.height / widget.rowCount;
+        final double height = MediaQuery.heightOf(context) / widget.rowCount;
         final double colorPosition = _controller.value;
         final int c1Position = colorPosition.floor();
         final Color c1 = colorList[c1Position % colorList.length][900]!;
diff --git a/dev/benchmarks/macrobenchmarks/lib/src/very_long_picture_scrolling.dart b/dev/benchmarks/macrobenchmarks/lib/src/very_long_picture_scrolling.dart
@@ -24,6 +24,7 @@ class VeryLongPictureScrollingPerfState extends State<VeryLongPictureScrollingPe
 
   @override
   Widget build(BuildContext context) {
+    final Size size = MediaQuery.sizeOf(context);
     return Scaffold(
       appBar: AppBar(
         actions: <Widget>[
@@ -52,9 +53,8 @@ class VeryLongPictureScrollingPerfState extends State<VeryLongPictureScrollingPe
         ],
       ),
       backgroundColor: Colors.transparent,
-      body: SizedBox(
-        width: MediaQuery.of(context).size.width,
-        height: MediaQuery.of(context).size.height,
+      body: SizedBox.fromSize(
+        size: size,
         child: useList
             ? ListView.builder(
                 key: const ValueKey<String>('vlp_list_view_scrollable'),
@@ -74,8 +74,8 @@ class VeryLongPictureScrollingPerfState extends State<VeryLongPictureScrollingPe
                 key: const ValueKey<String>('vlp_single_child_scrollable'),
                 scrollDirection: Axis.horizontal,
                 child: SizedBox(
-                  width: MediaQuery.of(context).size.width * 20,
-                  height: MediaQuery.of(context).size.height,
+                  width: size.width * 20,
+                  height: size.height,
                   child: RepaintBoundary(
                     child: CustomPaint(
                       isComplex: true,
diff --git a/dev/integration_tests/flutter_gallery/lib/demo/pesto_demo.dart b/dev/integration_tests/flutter_gallery/lib/demo/pesto_demo.dart
@@ -335,7 +335,7 @@ class _RecipePageState extends State<RecipePage> {
     height: 24.0 / 15.0,
   );
 
-  double _getAppBarHeight(BuildContext context) => MediaQuery.of(context).size.height * 0.3;
+  double _getAppBarHeight(BuildContext context) => MediaQuery.heightOf(context) * 0.3;
 
   @override
   Widget build(BuildContext context) {
diff --git a/dev/integration_tests/flutter_gallery/lib/demo/shrine/supplemental/asymmetric_view.dart b/dev/integration_tests/flutter_gallery/lib/demo/shrine/supplemental/asymmetric_view.dart
@@ -26,7 +26,7 @@ class AsymmetricView extends StatelessWidget {
     // helpers for creating the index of the product list that will correspond
     // to the index of the list of columns.
     return List<SizedBox>.generate(_listItemCount(products!.length), (int index) {
-      double width = .59 * MediaQuery.of(context).size.width;
+      double width = .59 * MediaQuery.widthOf(context);
       Widget column;
       if (index.isEven) {
         /// Even cases
diff --git a/dev/integration_tests/new_gallery/lib/pages/category_list_item.dart b/dev/integration_tests/new_gallery/lib/pages/category_list_item.dart
@@ -167,7 +167,7 @@ class _CategoryHeader extends StatelessWidget {
         color: colorScheme.onBackground,
         clipBehavior: Clip.antiAlias,
         child: SizedBox(
-          width: MediaQuery.of(context).size.width,
+          width: MediaQuery.widthOf(context),
           child: InkWell(
             // Makes integration tests possible.
             key: ValueKey<String>('${category.name}CategoryHeader'),
diff --git a/dev/integration_tests/new_gallery/lib/pages/home.dart b/dev/integration_tests/new_gallery/lib/pages/home.dart
@@ -697,7 +697,7 @@ class _MobileCarouselState extends State<_MobileCarousel>
     super.didChangeDependencies();
     // The viewPortFraction is calculated as the width of the device minus the
     // padding.
-    final double width = MediaQuery.of(context).size.width;
+    final double width = MediaQuery.widthOf(context);
     const double padding = _carouselItemMobileMargin * 2;
     _controller = PageController(
       initialPage: _currentPage.value,
diff --git a/dev/integration_tests/new_gallery/lib/studies/rally/home.dart b/dev/integration_tests/new_gallery/lib/studies/rally/home.dart
@@ -311,7 +311,7 @@ class _RallyTabState extends State<_RallyTab> with SingleTickerProviderStateMixi
     // units and dividing it into the screen width. Each unexpanded tab is 1
     // unit, and there is always 1 expanded tab which is 1 unit + any extra
     // space determined by the multiplier.
-    final double width = MediaQuery.of(context).size.width;
+    final double width = MediaQuery.widthOf(context);
     const expandedTitleWidthMultiplier = 2;
     final double unitWidth = width / (tabCount + expandedTitleWidthMultiplier);
 
diff --git a/dev/integration_tests/new_gallery/lib/studies/reply/adaptive_nav.dart b/dev/integration_tests/new_gallery/lib/studies/reply/adaptive_nav.dart
@@ -559,8 +559,8 @@ class _MobileNavState extends State<_MobileNav> with TickerProviderStateMixin {
               child: FadeTransition(
                 opacity: _drawerCurve,
                 child: Container(
-                  height: MediaQuery.of(context).size.height,
-                  width: MediaQuery.of(context).size.width,
+                  height: MediaQuery.heightOf(context),
+                  width: MediaQuery.widthOf(context),
                   color: Theme.of(context).bottomSheetTheme.modalBackgroundColor,
                 ),
               ),
diff --git a/dev/integration_tests/new_gallery/lib/studies/shrine/login.dart b/dev/integration_tests/new_gallery/lib/studies/shrine/login.dart
@@ -18,10 +18,7 @@ import 'theme.dart';
 const double _horizontalPadding = 24.0;
 
 double desktopLoginScreenMainAreaWidth({required BuildContext context}) {
-  return min(
-    360 * reducedTextScale(context),
-    MediaQuery.of(context).size.width - 2 * _horizontalPadding,
-  );
+  return min(360 * reducedTextScale(context), MediaQuery.widthOf(context) - 2 * _horizontalPadding);
 }
 
 class LoginPage extends StatelessWidget {
diff --git a/dev/integration_tests/new_gallery/lib/studies/shrine/supplemental/asymmetric_view.dart b/dev/integration_tests/new_gallery/lib/studies/shrine/supplemental/asymmetric_view.dart
@@ -65,7 +65,7 @@ class MobileAsymmetricView extends StatelessWidget {
       // to the index of the list of columns.
 
       return List<SizedBox>.generate(_listItemCount(products.length), (int index) {
-        double width = _cardToScreenWidthRatio * MediaQuery.of(context).size.width;
+        double width = _cardToScreenWidthRatio * MediaQuery.widthOf(context);
         Widget column;
         if (index.isEven) {
           /// Even cases
@@ -91,7 +91,7 @@ class MobileAsymmetricView extends StatelessWidget {
       return <SizedBox>[
         for (final Product product in products)
           SizedBox(
-            width: _cardToScreenWidthRatio * MediaQuery.of(context).size.width,
+            width: _cardToScreenWidthRatio * MediaQuery.widthOf(context),
             child: Padding(
               padding: const EdgeInsets.symmetric(horizontal: 16),
               child: OneProductCardColumn(product: product, reverse: false),
@@ -166,7 +166,7 @@ class DesktopAsymmetricView extends StatelessWidget {
     final num minimumBoundaryWidth = 84 * paddingScaleFactor;
     final double columnWidth = 186 * imageScaleFactor;
     final double columnGapWidth = 24 * imageScaleFactor;
-    final double windowWidth = MediaQuery.of(context).size.width;
+    final double windowWidth = MediaQuery.widthOf(context);
 
     final int idealColumnCount = max(
       1,
diff --git a/dev/integration_tests/ui/lib/keyboard_textfield.dart b/dev/integration_tests/ui/lib/keyboard_textfield.dart
@@ -67,7 +67,7 @@ class _MyHomePageState extends State<MyHomePage> {
               key: const ValueKey<String>(keys.kListView),
               controller: _controller,
               children: <Widget>[
-                Container(height: MediaQuery.of(context).size.height),
+                Container(height: MediaQuery.heightOf(context)),
                 const TextField(key: ValueKey<String>(keys.kDefaultTextField)),
               ],
             ),
diff --git a/dev/manual_tests/lib/text.dart b/dev/manual_tests/lib/text.dart
@@ -1120,7 +1120,7 @@ class _PaintingState extends State<Painting> with SingleTickerProviderStateMixin
     setState(() {
       final buffer = StringBuffer();
       final int targetLength =
-          _random.nextInt(20) + (_ellipsize ? MediaQuery.of(context).size.width.round() : 1);
+          _random.nextInt(20) + (_ellipsize ? MediaQuery.widthOf(context).round() : 1);
       for (var index = 0; index < targetLength; index += 1) {
         if (_random.nextInt(5) > 0) {
           buffer.writeCharCode(randomCharacter(_random));
diff --git a/examples/api/lib/material/color_scheme/dynamic_content_color.0.dart b/examples/api/lib/material/color_scheme/dynamic_content_color.0.dart
@@ -249,8 +249,8 @@ class _DynamicColorExampleState extends State<DynamicColorExample> {
     List<ImageProvider> images,
     ColorScheme colorScheme,
   ) {
-    final double windowHeight = MediaQuery.of(context).size.height;
-    final double windowWidth = MediaQuery.of(context).size.width;
+    final double windowHeight = MediaQuery.heightOf(context);
+    final double windowWidth = MediaQuery.widthOf(context);
     return Padding(
       padding: const .all(8.0),
       child: LayoutBuilder(
diff --git a/examples/api/lib/material/navigation_drawer/navigation_drawer.0.dart b/examples/api/lib/material/navigation_drawer/navigation_drawer.0.dart
@@ -175,7 +175,7 @@ class _NavigationDrawerExampleState extends State<NavigationDrawerExample> {
   @override
   void didChangeDependencies() {
     super.didChangeDependencies();
-    showNavigationDrawer = MediaQuery.of(context).size.width >= 450;
+    showNavigationDrawer = MediaQuery.widthOf(context) >= 450;
   }
 
   @override
diff --git a/examples/api/lib/widgets/basic/flow.0.dart b/examples/api/lib/widgets/basic/flow.0.dart
@@ -58,7 +58,7 @@ class _FlowMenuState extends State<FlowMenu>
 
   Widget flowMenuItem(IconData icon) {
     final double buttonDiameter =
-        MediaQuery.of(context).size.width / menuItems.length;
+        MediaQuery.widthOf(context) / menuItems.length;
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: 8.0),
       child: RawMaterialButton(
diff --git a/examples/api/lib/widgets/implicit_animations/animated_padding.0.dart b/examples/api/lib/widgets/implicit_animations/animated_padding.0.dart
@@ -39,6 +39,7 @@ class _AnimatedPaddingExampleState extends State<AnimatedPaddingExample> {
 
   @override
   Widget build(BuildContext context) {
+    final Size size = MediaQuery.sizeOf(context);
     return Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: <Widget>[
@@ -47,8 +48,8 @@ class _AnimatedPaddingExampleState extends State<AnimatedPaddingExample> {
           duration: const Duration(seconds: 2),
           curve: Curves.easeInOut,
           child: Container(
-            width: MediaQuery.of(context).size.width,
-            height: MediaQuery.of(context).size.height / 5,
+            width: size.width,
+            height: size.height / 5,
             color: Colors.blue,
           ),
         ),
diff --git a/examples/api/lib/widgets/overlay/overlay.0.dart b/examples/api/lib/widgets/overlay/overlay.0.dart
@@ -76,7 +76,7 @@ class _OverlayExampleState extends State<OverlayExample> {
                   const Text('Tap here for'),
                   Builder(builder: builder),
                   SizedBox(
-                    width: MediaQuery.of(context).size.width / 3,
+                    width: MediaQuery.widthOf(context) / 3,
                     height: 80.0,
                     child: Center(
                       child: Container(
diff --git a/examples/api/lib/widgets/sliver/decorated_sliver.1.dart b/examples/api/lib/widgets/sliver/decorated_sliver.1.dart
@@ -86,7 +86,7 @@ class _DecoratedSliverClipExampleState
                 left: 0,
                 right: 0,
                 child: SizedBox(
-                  height: MediaQuery.of(context).size.height - _height,
+                  height: MediaQuery.heightOf(context) - _height,
                   width: double.infinity,
                 ),
               ),
diff --git a/examples/layers/widgets/media_query.dart b/examples/layers/widgets/media_query.dart
@@ -62,7 +62,7 @@ class AdaptiveContainer extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    if (MediaQuery.of(context).size.width < _kGridViewBreakpoint) {
+    if (MediaQuery.widthOf(context) < _kGridViewBreakpoint) {
       return ListView(
         itemExtent: _kListItemExtent,
         children: names.map<Widget>((String name) => AdaptedListItem(name: name)).toList(),
diff --git a/examples/multiple_windows/lib/app/window_settings_dialog.dart b/examples/multiple_windows/lib/app/window_settings_dialog.dart
@@ -81,14 +81,15 @@ class _WindowSettingsEditorState extends State<_WindowSettingsEditor> {
 
   @override
   Widget build(BuildContext context) {
+    final Size size = MediaQuery.sizeOf(context);
     return SimpleDialog(
       contentPadding: const EdgeInsets.all(4),
       titlePadding: const EdgeInsets.fromLTRB(24, 10, 24, 0),
       title: const Center(child: Text('Window Settings')),
       children: [
         SizedBox(
-          width: MediaQuery.of(context).size.width * 0.7,
-          height: MediaQuery.of(context).size.height * 0.8,
+          width: size.width * 0.7,
+          height: size.height * 0.8,
           child: Column(
             children: [
               Expanded(
diff --git a/packages/flutter/test/material/dropdown_menu_test.dart b/packages/flutter/test/material/dropdown_menu_test.dart
@@ -1442,7 +1442,7 @@ void main() {
           body: StatefulBuilder(
             builder: (BuildContext context, StateSetter setState) {
               return DropdownMenu<TestMenu>(
-                width: MediaQuery.of(context).size.width,
+                width: MediaQuery.widthOf(context),
                 dropdownMenuEntries: menuChildren,
               );
             },
diff --git a/packages/flutter/test/material/flexible_space_bar_test.dart b/packages/flutter/test/material/flexible_space_bar_test.dart
@@ -1697,7 +1697,7 @@ class _SubCategoryScreenViewState extends State<SubCategoryScreenView>
         slivers: <Widget>[
           SliverAppBar(
             leading: const SizedBox(),
-            expandedHeight: MediaQuery.of(context).size.width / 1.7,
+            expandedHeight: MediaQuery.widthOf(context) / 1.7,
             collapsedHeight: 0,
             toolbarHeight: 0,
             titleSpacing: 0,
