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

Метод 1: MediaQuery.of(context).size
Класс MediaQuery во Flutter предоставляет информацию о текущем размере мультимедиа (экрана). Обращаясь к свойству MediaQuery.of(context).size, вы можете получить размеры экрана устройства. Например:

final Size screenSize = MediaQuery.of(context).size;
final double screenWidth = screenSize.width;
final double screenHeight = screenSize.height;

Метод 2: MediaQuery.of(context).orientation
Класс MediaQuery также позволяет получить текущую ориентацию устройства с помощью свойства ориентации. Это может быть полезно для адаптации макета вашего приложения в зависимости от того, находится ли устройство в портретном или альбомном режиме. Вот пример:

final Orientation deviceOrientation = MediaQuery.of(context).orientation;
if (deviceOrientation == Orientation.portrait) {
  // Adjust layout for portrait mode
} else {
  // Adjust layout for landscape mode
}

Метод 3: виджет LayoutBuilder
Виджет LayoutBuilder — еще один мощный инструмент для реализации адаптивного дизайна во Flutter. Он предоставляет ограничения своего родительского виджета, позволяя вам определять различные макеты на основе этих ограничений. Вот пример:

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    if (constraints.maxWidth < 600) {
      // Render a compact layout for smaller screens
    } else {
      // Render a spacious layout for larger screens
    }
  },
);

Метод 4: виджет AspectRatio
Виджет AspectRatio помогает поддерживать соотношение сторон дочернего виджета независимо от размера экрана. Он принимает значение соотношения сторон и автоматически регулирует размеры дочернего виджета. Вот пример:

AspectRatio(
  aspectRatio: 16 / 9,
  child: Container(
    // Child widget
  ),
);

Метод 5: гибкие и расширенные виджеты
Используя гибкие и расширенные виджеты, вы можете создавать гибкие макеты, которые настраиваются в зависимости от доступного места. Назначая гибкие значения дочерним виджетам, вы можете контролировать, как они распределяют доступное пространство. Например:

Row(
  children: [
    Expanded(
      flex: 2,
      child: Container(
        // Widget 1
      ),
    ),
    Expanded(
      flex: 1,
      child: Container(
        // Widget 2
      ),
    ),
  ],
);

Благодаря возможностям медиазапросов Flutter и различным методам, обсуждаемым в этой статье, у вас теперь есть инструменты для создания адаптивных и визуально привлекательных макетов для ваших мобильных приложений. Используя виджеты MediaQuery, LayoutBuilder, AspectRatio и Flex, вы можете эффективно адаптировать пользовательский интерфейс вашего приложения к различным размерам и ориентациям экрана. Используйте адаптивный дизайн во Flutter и обеспечьте удобство использования на всех устройствах.