Создание адаптивного интерфейса во
Flutter часто сводится к использованию
MediaQuery и расчетам на основе размеров экрана. Но есть два менее известных, но исключительно мощных виджета, которые решают специфичные задачи адаптивности на уровне композиции, без сложной математики.
FractionallySizedBox и
FittedBox - это не просто обертки, а точные инструменты контроля пропорций и масштабирования.
FractionallySizedBox - размер в процентах:
Этот виджет задает размер дочернего элемента как долю от родителя. Например, кнопка на 80% ширины контейнера:
FractionallySizedBox(
widthFactor: 0.8,
child: ElevatedButton(...),
)
Главное условие: родитель должен иметь конкретный размер. Не будет работать в
Column без
Expanded, где ширина не ограничена.
FittedBox - умное масштабирование:
Когда контент не помещается,
FittedBox масштабирует его, сохраняя пропорции. Типичный случай - крупный заголовок в маленькой карточке:
FittedBox(
child: Text('Заголовок', style: TextStyle(fontSize: 40)),
)
Это предотвращает
OverflowError и автоматически подбирает размер.
В чем разница между FractionallySizedBox и FittedBox:
- FractionallySizedBox управляет контейнером (задает его размер как процент от родителя).
- FittedBox управляет содержимым (масштабирует виджет внутри существующего контейнера).
Когда что использовать:
- Используйте FractionallySizedBox для: кнопок фиксированной ширины, прогресс-баров, колонок сетки.
- Используйте FittedBox для: текста в ограниченной области, иконок в CircleAvatar, изображений-превью.
Вывод:
Изучение адаптивности во
Flutter не должно начинаться и заканчиваться на
MediaQuery.of(context).size.width. Такие виджеты, как
FractionallySizedBox и
FittedBox, предлагают декларативный и композиционный подход к решению распространенных проблем верстки. Они смещают фокус с реактивного программирования («посчитай размер экрана и обнови») на декларативное описание отношений между элементами интерфейса («этот элемент занимает половину родителя, а его содержимое подстраивается под доступное пространство»).
Внедрение этих виджетов в повседневную практику сокращает количество кастомных расчетов, делает код чище и предсказуемее, а главное - создает по-настоящему гибкий интерфейс, который корректно ведет себя не только на разных размерах экрана, но и в сложных, вложенных layout-структурах. Это следующий уровень мастерства после освоения
Row,
Column и
Flex.
