falcon

Rules / Style / prefer-dedicated-media-query-methods

prefer-dedicated-media-query-methods

lint/style/prefer-dedicated-media-query-methods
recommendedflutter
Same as prefer_dedicated_media_query_methods · Pyramid Lint

Flags MediaQuery.of(context).size access in favor of MediaQuery.sizeOf.

Reading .width or .height off MediaQuery.of(context).size subscribes the widget to the entire MediaQueryData, so it rebuilds whenever any media property changes — text scale, padding, orientation — not just the screen size. Flutter's dedicated MediaQuery.sizeOf(context) aspect getter subscribes only to size changes, avoiding those spurious rebuilds. Use MediaQuery.sizeOf(context) (and its siblings) instead of pulling fields out of the whole MediaQueryData.

Invalid

example.dartdart
import 'package:flutter/material.dart';

// Bad: using MediaQuery.of(context).size.width
class ResponsiveWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    return SizedBox(width: width);
  }
}

// Bad: using MediaQuery.of(context).size.height
class HeightWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.of(context).size.height;
    return SizedBox(height: height);
  }
}

// Bad: chaining size.width directly
class ContainerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      child: Text('Full width'),
    );
  }
}

// Bad: accessing height in a calculation
class DynamicHeightWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final availableHeight = MediaQuery.of(context).size.height - 100;
    return SizedBox(height: availableHeight);
  }
}

// Bad: using both width and height
class ResponsiveBoxWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final w = MediaQuery.of(context).size.width;
    final h = MediaQuery.of(context).size.height;
    return SizedBox(width: w, height: h);
  }
}
Use MediaQuery.sizeOf(context) instead of MediaQuery.of(context).size.
6 Widget build(BuildContext context) {
7 final width = MediaQuery.of(context).size.width;
Use MediaQuery.sizeOf(context) instead of MediaQuery.of(context).size.
15 Widget build(BuildContext context) {
16 final height = MediaQuery.of(context).size.height;
Use MediaQuery.sizeOf(context) instead of MediaQuery.of(context).size.
25 return Container(
26 width: MediaQuery.of(context).size.width,
Use MediaQuery.sizeOf(context) instead of MediaQuery.of(context).size.
35 Widget build(BuildContext context) {
36 final availableHeight = MediaQuery.of(context).size.height - 100;
Use MediaQuery.sizeOf(context) instead of MediaQuery.of(context).size.
44 Widget build(BuildContext context) {
45 final w = MediaQuery.of(context).size.width;
Use MediaQuery.sizeOf(context) instead of MediaQuery.of(context).size.
45 final w = MediaQuery.of(context).size.width;
46 final h = MediaQuery.of(context).size.height;

Valid

example.dartdart
import 'package:flutter/material.dart';

// Good: using MediaQuery.sizeOf() for width
class ResponsiveWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.sizeOf(context).width;
    return SizedBox(width: width);
  }
}

// Good: using MediaQuery.sizeOf() for height
class HeightWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.sizeOf(context).height;
    return SizedBox(height: height);
  }
}

// Good: using dedicated extension method (if available)
class ContainerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.sizeOf(context).width,
      child: Text('Full width'),
    );
  }
}

// Good: using other MediaQuery methods correctly
class PaddingWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final devicePadding = MediaQuery.of(context).padding;
    return Padding(
      padding: devicePadding,
      child: Text('Safe area'),
    );
  }
}

// Good: using sizeOf for dynamic height calculation
class DynamicHeightWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final availableHeight = MediaQuery.sizeOf(context).height - 100;
    return SizedBox(height: availableHeight);
  }
}

// Good: using sizeOf for both dimensions
class ResponsiveBoxWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.sizeOf(context);
    return SizedBox(width: size.width, height: size.height);
  }
}

// Good: using dedicated MediaQuery methods
class DeviceInfoWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final textScaleFactor = MediaQuery.of(context).textScaleFactor;
    final orientation = MediaQuery.of(context).orientation;
    return Column(
      children: [
        Text('Scale: $textScaleFactor'),
        Text('Orientation: $orientation'),
      ],
    );
  }
}

How to configure

Set the severity of prefer-dedicated-media-query-methods in your falcon.json:

falcon.jsonjson
{
  "linter": {
    "rules": {
      "style": {
        "prefer-dedicated-media-query-methods": "error"
      }
    }
  }
}

Related