AspectRatio

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

Берите его там, где форма должна быть предсказуемой: превью медиа, плеер, обложка, одинаковые карточки в сетке.

В дереве виджетов AspectRatio оборачивает ровно одного потомка — обычно Image или видеоплеер:

Container
    └── AspectRatio
        └── Image

AspectRatio задаёт габаритную рамку, а потомок её заполняет.

Как задать пропорцию

Выделите виджет и найдите в панели свойств раздел Aspect Ratio с выпадающим списком Ratio.

Готовые пропорции

Семь пресетов покрывают почти все случаи:

Пропорция	Число	Для чего
1:1	1.0	аватары, квадратные превью
4:3	1.333	обычные фотографии, карточки товаров
3:2	1.5	фотосъёмка, редакционные карточки
16:9	1.778	видео, превью с YouTube, широкие баннеры
9:16	0.563	вертикальное видео — Reels, Shorts, сторис
3:4	0.75	портретные фото, обложки книг
2:3	0.667	постеры, вертикальные карточки

Своё значение

Если ни один пресет не подходит, выберите Custom — появится поле Value для десятичного числа.

Считается просто: ширина, делённая на высоту.

5:4 → 1.25
21:9 (сверхширокий) → 2.333
4:5 (портрет для Instagram) → 0.8

Пропорция из переменной

Поле Value принимает переменную, то есть пропорцию можно вычислять на лету.

Пример: в ленте перемешаны горизонтальные видео и вертикальные фотографии. Храните пропорцию в поле типа double рядом с самим медиа и привяжите Value к нему — каждая карточка примет свою форму сама, без разветвлений в вёрстке.

Предупреждение об ограничениях

Если родитель уже жёстко задал и ширину, и высоту, виджет покажет предупреждение.

Почему. AspectRatio берёт доступную ширину и вычисляет высоту по пропорции. Когда высота уже зафиксирована родителем, вычислять нечего: пропорция игнорируется, потомок просто заполняет заданный родителем прямоугольник.

Когда это случается:

AspectRatio лежит в Container с заданными шириной и высотой;
AspectRatio стоит в Row без обёртки в Expanded или SizedBox;
AspectRatio стоит в Column, где настройки MainAxisSize не оставляют свободного места.

Что делать:

убрать фиксированную высоту у родительского Container — пусть её считает AspectRatio;
внутри Row обернуть AspectRatio в Expanded, чтобы он сначала получил ширину.