Вы хотите создать адаптивный пользовательский интерфейс (UI) в своем приложении Flutter? Одна важная концепция, которую необходимо освоить, — это пропорциональный размер. В этой статье мы углубимся в различные методы и приемы достижения пропорциональных размеров во Flutter, а также приведем примеры кода, которые помогут вам реализовать их в своих проектах. Итак, начнем!

1. Использование расширенного виджета.
   Развернутый виджет – это мощный инструмент для достижения пропорциональных размеров. Это позволяет дочернему виджету сгибаться и занимать доступное пространство в зависимости от его коэффициента гибкости. Например:

Row(
  children: [
    Expanded(
      flex: 2,
      child: Container(
        color: Colors.blue,
      ),
    ),
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.red,
      ),
    ),
  ],
)

В этом фрагменте кода синий контейнер займет в два раза больше горизонтального пространства, чем красный контейнер.

1. Виджет FractionallySizedBox:
   Виджет FractionallySizedBox позволяет указать ширину и высоту дочернего виджета как долю доступного пространства. Например:

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

Здесь зеленый контейнер будет занимать 70 % доступной ширины и 50 % доступной высоты.

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

Container(
  width: MediaQuery.of(context).size.width * 0.8,
  height: MediaQuery.of(context).size.height * 0.3,
  color: Colors.yellow,
)

Желтый контейнер будет занимать 80 % ширины экрана и 30 % высоты экрана.

1. Виджет AspectRatio:
   Виджет AspectRatio позволяет вам установить соотношение сторон дочернего виджета. Это полезно, если вы хотите сохранить определенное соотношение ширины и высоты. Например:

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

Здесь фиолетовый контейнер сохранит соотношение сторон 16:9.

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