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

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

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

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

OrientationBuilder(
  builder: (context, orientation) {
    return orientation == Orientation.portrait
        ? Text('Portrait Mode')
        : Text('Landscape Mode');
  },
)

1. Использование LayoutBuilder:
   Виджет LayoutBuilder предоставляет информацию о родительских ограничениях и позволяет создавать соответствующие компоненты пользовательского интерфейса. Вот пример использования LayoutBuilder для создания адаптивного контейнера:

LayoutBuilder(
  builder: (context, constraints) {
    return Container(
      width: constraints.maxWidth * 0.8,
      height: constraints.maxHeight * 0.6,
      color: Colors.blue,
    );
  },
)

1. Регулировка на основе соотношения пикселей устройства.
   Класс DevicePixelRatio обеспечивает соотношение между физическими и логическими пикселями на устройстве. Вы можете использовать эту информацию для соответствующего масштабирования элементов пользовательского интерфейса. Вот пример:

double devicePixelRatio = window.devicePixelRatio;
double scaledWidth = screenWidth / devicePixelRatio;
double scaledHeight = screenHeight / devicePixelRatio;

1. Использование AspectRatio и FractionallySizedBox:
   Виджеты AspectRatio и FractionallySizedBox помогают поддерживать пропорции и пропорционально регулировать размеры. Вот пример использования AspectRatio:

AspectRatio(
  aspectRatio: 16 / 9,
  child: Container(
    color: Colors.red,
  ),
)

А вот пример использования FractionallySizedBox:

FractionallySizedBox(
  widthFactor: 0.8,
  heightFactor: 0.5,
  child: Container(
    color: Colors.green,
  ),
)

1. Использование SizedBox:
   Виджет SizedBox позволяет явно ограничить размер виджета. Вот пример:

SizedBox(
  width: 200,
  height: 100,
  child: Container(
    color: Colors.yellow,
  ),
)

В этой статье мы рассмотрели несколько методов и приемов адаптации размера экрана во Flutter. Используя такие инструменты, как MediaQuery, OrientationBuilder, LayoutBuilder, DevicePixelRatio, AspectRatio, FractionallySizedBox и SizedBox, вы можете создавать адаптивные пользовательские интерфейсы, которые легко адаптируются к экранам разных размеров. Имея в своем распоряжении эти методы, вы сможете обеспечить единообразное и приятное взаимодействие с пользователем на различных устройствах.