В современном мире мобильных устройств создание адаптивных пользовательских интерфейсов имеет решающее значение для обеспечения первоклассного пользовательского опыта. Flutter, популярный кроссплатформенный фреймворк, предоставляет мощные инструменты для создания красивых и адаптивных пользовательских интерфейсов. Одним из таких инструментов являются медиа-запросы, которые позволяют разработчикам настраивать макет и внешний вид своего приложения в зависимости от размера или ориентации экрана устройства. В этой статье мы рассмотрим различные методы использования медиа-запросов во Flutter для создания адаптивного дизайна, который без проблем работает на экранах разных размеров.

Метод 1: использование MediaQuery.of(context)
Самый простой и распространенный способ использования медиа-запросов во Flutter — использование метода MediaQuery.of(context). Этот метод возвращает объект MediaQueryData, который содержит информацию о размере экрана, ориентации и многом другом текущего устройства. Вы можете получить доступ к таким свойствам, как size, orientation, paddingи devicePixelRatio, чтобы соответствующим образом настроить свой пользовательский интерфейс.

Вот пример, демонстрирующий, как изменить размер шрифта в зависимости от ширины экрана устройства:

final mediaQuery = MediaQuery.of(context);
final screenWidth = mediaQuery.size.width;
double fontSize = 16.0;
if (screenWidth > 600) {
  fontSize = 20.0;
}
Text(
  'Responsive Text',
  style: TextStyle(fontSize: fontSize),
);

Метод 2: использование LayoutBuilder
Другой подход к использованию медиазапросов во Flutter — использование виджета LayoutBuilder. Это позволяет вам получить доступ к ограничениям родительского виджета и соответствующим образом построить свой пользовательский интерфейс. Этот метод особенно полезен, когда вам нужно динамически настраивать макет в зависимости от доступного пространства.

Вот пример, демонстрирующий, как изменить количество столбцов в GridViewв зависимости от ширины экрана устройства:

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    final screenWidth = constraints.maxWidth;
    int columnCount = 2;
    if (screenWidth > 600) {
      columnCount = 3;
    }
    return GridView.count(
      crossAxisCount: columnCount,
      // Rest of the GridView configuration
    );
  },
);

Метод 3: использование OrientationBuilder
Виджет OrientationBuilderспециально разработан для обработки изменений ориентации устройства. Он позволяет адаптировать пользовательский интерфейс в зависимости от того, находится ли устройство в портретном или альбомном режиме.

Вот пример, демонстрирующий, как изменить макет виджета Rowв зависимости от ориентации устройства:

OrientationBuilder(
  builder: (BuildContext context, Orientation orientation) {
    if (orientation == Orientation.portrait) {
      return Row(
        children: [
          // Portrait layout
        ],
      );
    } else {
      return Row(
        children: [
          // Landscape layout
        ],
      );
    }
  },
);

Медиа-запросы — это мощный инструмент во Flutter для создания отзывчивых и адаптивных пользовательских интерфейсов. Используя такие методы, как MediaQuery.of(context), LayoutBuilderи OrientationBuilder, вы можете легко настроить макет и внешний вид вашего приложения в зависимости от размера экрана устройства, ориентации и и другие свойства. Такая гибкость позволяет обеспечить удобство работы пользователей на широком спектре устройств, выделяя ваше приложение среди конкурентной среды разработки мобильных приложений.