MediaQuery — что это, принцип работы и адаптивные макеты

Что такое MediaQuery

MediaQuery — это виджет и класс Flutter, который предоставляет данным о медиа-окружении приложения. MediaQuery оборачивает всё приложение в корневой виджет MaterialApp или CupertinoApp, и любой дочерний виджет может получить доступ к этим данным через MediaQuery.of(context).

Когда Flutter запускает приложение, он создаёт экземпляр MediaQueryData, содержащий все метрики текущего устройства. Эти данные обновляются автоматически при изменениях: повороте устройства, изменении размера окна (на десктопе), появлении клавиатуры или изменении системных настроек доступности. MediaQuery перестраивает поддерево виджетов при любом изменении данных, обеспечивая реактивную адаптацию интерфейса.

MediaQueryData включает: size (размер экрана), devicePixelRatio (плотность пикселей), textScaleFactor (масштаб шрифта из системных настроек), viewInsets (область, перекрытая клавиатурой), viewPadding (системные отступы), orientation (ориентация) и platformBrightness (светлая или тёмная тема).

Вывод: MediaQuery — центральный источник информации об устройстве во Flutter. Доступ к MediaQuery.of(context) — первый шаг в построении любого адаптивного интерфейса.

Основные свойства MediaQueryData

MediaQueryData содержит десятки свойств, но наиболее часто используются те, которые влияют на построение макета. Рассмотрим ключевые из них.

Size — размер экрана

MediaQuery.of(context).size возвращает объект Size с шириной и высотой экрана в логических пикселях (device-independent pixels, dip). Эти значения не учитывают системные отступы. Для расчётов адаптивных макетов size — основная метрика: на его основе определяют breakpoints для мобильной, планшетной и десктопной верстки.

ViewPadding — системные отступы

ViewPadding — отступы, которые система резервирует для статус-бара, notch (выреза на экране), системной навигационной панели и индикатора дома (на iOS). Без учёта этих отступов содержимое может оказаться под системными элементами. MediaQuery.of(context).padding возвращает EdgeInsets, который нужно применять как padding к корневому контейнеру страницы.

ViewInsets — область клавиатуры

ViewInsets — область экрана, перекрытая программной клавиатурой. Для полей ввода критично отслеживать viewInsets.bottom, чтобы поднимать содержимое над клавиатурой. Flutter автоматически обрабатывает это в scaffold, но для кастомных макетов нужно использовать MediaQuery.of(context).viewInsets напрямую.

Orientation — ориентация устройства

Orientation — портретная (portrait) или ландшафтная (landscape) ориентация. Определяется сравнением ширины и высоты: если ширина меньше высоты — portrait, иначе — landscape. В production-коде ориентацию используют для переключения между вертикальным и горизонтальным расположением элементов.

Вывод: четыре ключевых свойства — size, viewPadding, viewInsets и orientation — покрывают 90% задач адаптивного дизайна. Остальные свойства (textScaleFactor, platformBrightness, devicePixelRatio) используются для специфических сценариев.

Использование MediaQuery для адаптивных макетов

MediaQuery — основа адаптивного дизайна во Flutter. Через него определяют breakpoints, переключают layout в зависимости от размера экрана и корректируют отступы для разных устройств.

Типичный сценарий: мобильное приложение должно отображать список товаров. На телефоне (ширина < 600dp) — одна колонка. На планшете (ширина 600–900dp) — две колонки. На десктопе (ширина > 900dp) — три колонки. MediaQuery.of(context).size.width позволяет динамически выбирать количество колонок без отдельного экрана для каждого форм-фактора.

Второй сценарий: учёт system gesture insets на современных устройствах. На iPhone с Dynamic Island или Android с gesture navigation системные отступы съедают часть экрана. MediaQuery.of(context).padding возвращает корректные значения для каждого типа устройства, и Scaffold автоматически применяет их через body. Для кастомных виджетов нужно явно передавать padding из MediaQuery.

Третий сценарий: адаптация под системные настройки доступности. MediaQuery.of(context).textScaleFactor показывает, насколько пользователь увеличил шрифт в настройках. При textScaleFactor > 1.3 макет может сломаться — длинные тексты выходят за границы карточек. Адаптивные макеты должны учитывать это и, при необходимости, переключаться на более простую верстку.

Вывод: MediaQuery — не просто источник метрик, а инструмент для построения по-настоящему адаптивных интерфейсов. Используйте его для breakpoints, safe area и учёта доступности.

Примеры кода с MediaQuery

Пример 1 демонстрирует получение размера экрана и применение breakpoints для выбора количества колонок.

int getColumnCount(BuildContext context) {
  final width = MediaQuery.of(context).size.width;
  if (width > 900) return 3;
  if (width > 600) return 2;
  return 1;
}

Пример выше показывает функцию выбора количества колонок на основе ширины экрана. Breakpoints 600 и 900 соответствуют общепринятым стандартам Material Design для телефонов, планшетов и десктопа.

Пример 2 — использование MediaQuery с viewPadding для корректного расположения контента с учётом системных отступов.

Widget build(BuildContext context) {
  final padding = MediaQuery.of(context).padding;

  return Padding(
    padding: EdgeInsets.only(
      top: padding.top,
      left: padding.left,
      right: padding.right,
    ),
    child: const MyContent(),
  );
}

В этом примере padding оборачивает контент в Padding, используя системные отступы. top учитывает статус-бар и notch, left/right — безопасные зоны. bottom не включён, так как Scaffold обычно сам обрабатывает нижнюю навигацию.

Пример 3 — определение ориентации и смена расположения элементов.

Widget build(BuildContext context) {
  final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;

  return isPortrait
      ? const Column(
          children: [HeaderBanner(), ContentList()],
        )
      : const Row(
          children: [HeaderBanner(), ContentList()],
        );
}

В portrait mode элементы расположены вертикально (Column), в landscape — горизонтально (Row). Такой подход даёт наилучшее использование пространства при повороте устройства.

Вывод: MediaQuery — основной инструмент для построения адаптивных макетов. Всегда учитывайте системные отступы, breakpoints и ориентацию при разработке Flutter-интерфейсов.

Типовые ошибки при работе с MediaQuery

Ошибка 1: вызов MediaQuery.of(context) вне контекста, где установлен MediaQuery. Если виджет находится выше MediaQuery в дереве, вызов приводит к ошибке времени выполнения. Решение: всегда вызывать MediaQuery.of(context) внутри виджетов, обёрнутых MaterialApp или CupertinoApp, где MediaQuery установлен корневым виджетом.

Ошибка 2: забывчивость про safe area. Разработчики используют MediaQuery.size для расположения элементов без учёта системных отступов. На устройствах с notch или gesture navigation контент оказывается под статус-баром. Решение: вычитать MediaQuery.of(context).padding из координат позиционирования.

Ошибка 3: жёсткая привязка к размерам. Использование MediaQuery.of(context).size.width для задания точных размеров элементов (width: size.width * 0.3) работает только на устройствах одного форм-фактора. На десктопе или планшете макет выглядит неестественно. Решение: использовать breakpoints в сочетании с Expanded и Flexible для гибкого макета, а не жёсткие проценты.

Ошибка 4: игнорирование textScaleFactor. При увеличении системного шрифта пользователем интерфейс может сломаться — тексты выходят за границы контейнеров. Решение: проверять MediaQuery.of(context).textScaleFactor и при значениях выше 1.3 переключать макет на более простую верстку с прокруткой.

Вывод: MediaQuery — мощный, но тонкий инструмент. Учитывайте системные отступы, ориентацию и настройки доступности, чтобы интерфейс выглядел корректно на всех устройствах.