Flexible

This page has not been translated into English yet. The Russian original is below.

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

Тип: single-child

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

Параметры

Работает только непосредственно внутри 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 .

See also

• Expanded — то же с обязательным заполнением
• Spacer — пустое гибкое место
• Row , Column