Flex

Flex заменяет Row и Column там, где направление раскладки должно зависеть от условия. Ровно то, что нужно адаптивной вёрстке: на широком экране элементы идут в ряд, на узком — в столбец.

flex.png

Как добавить

Перетащите Flex из раздела Layout Elements в палитре виджетов и положите внутрь потомков. В панели свойств задайте условие для Is Horizontal: пока оно истинно, потомки выстраиваются по горизонтали.

Пример — магазин, где недавние заказы идут столбцом на телефоне и рядом на большом экране, чтобы не пропадало место:

Второй пример — форма регистрации, где поля перестраиваются по ширине экрана:

совет
Что учесть
  • Если направление фиксировано, берите Row или Column — Flex здесь лишний.
  • Для длинных наборов данных берите ListView или GridView: они отрисовывают только видимое, а Flex строит всех потомков сразу.
  • Когда содержимое не помещается, включают прокрутку. Если прокрутки быть не должно, а уместить нужно всё, смотрите в сторону Wrap.

Настройки

С выключенным Is Horizontal виджет ведёт себя как Column, с включённым — как Row. Выравнивание по главной оси, по поперечной, прокрутка и расстояния работают так же, как у них.

перевод официальной документации FlutterFlow

обновлено

ESC