Спросите помощника

0/400

Вопрос обрабатывается ИИ-сервисом и сохраняется для улучшения ответов. Не вводите персональные данные.

Flexible

Отдаёт ребёнку долю свободного места в Row или Column . В отличие от Expanded , ребёнок не обязан занимать выделенное место целиком : при fit:loose (по умолчанию) он выбирает свой размер, но не больше доли.

Тип: single-child

Row
  Flexible flex:2
    ColoredBox color:#4f46e5
      Center
        Text "2×"
  Flexible
    ColoredBox color:#7c3aed
      Center
        Text "1×"

Параметры

Параметр	Тип	Default	Описание
`flex`	int	1	Вес: свободное место делится между детьми пропорционально `flex`
`fit`	string	loose	`loose` — ребёнок может быть меньше выделенной доли; `tight` — обязан занять её целиком (так ведёт себя `Expanded` )

Работает только непосредственно внутри Row , Column или Flex .

Примеры

Подпись, которая не распирает строку

Длинный текст сжимается и переносится, не вытесняя иконку; короткий остаётся своего размера:

Row spacing:8
  Icon star
  Flexible
    Text "Очень длинное название, которое не должно выталкивать соседние элементы за край"
  Icon chevron_right

Строгие доли

SizedBox height:60
  Row
    Flexible flex:1 fit:tight
      ColoredBox color:#4f46e5
    Flexible flex:3 fit:tight
      ColoredBox color:#059669

Различия между приложением и сайтом

fit:tight на сайте ведёт себя как Expanded : растёт по весу.
fit:loose на сайте не растёт : ребёнок остаётся своего размера и может сжиматься, flex при этом ничего не делит.

Bad practices

Flexible вне Row/Column

// BAD — Flexible работает только внутри Row, Column или Flex
Padding
  #padding all 8
  Flexible
    Text "Не сработает"

// GOOD
Row
  Flexible
    Text "Сработает"

Best practices

Нужно занять всё оставшееся место — берите Expanded , он короче и однозначнее.
Нужно, чтобы длинный текст сжимался, а короткий — нет — это Flexible с fit:loose .
Невидимый разделитель с долей — Spacer .