Expanded vs Flexible в Flutter

В Flutter, и Expanded, и Flexible используются внутри таких виджетов компоновки, как Row, Column и Flex, чтобы управлять пространством, занимаемым дочерними элементами. Они довольно похожи, но есть несколько отличий:

1. Виджет Expanded:

• Expanded заставляет дочерний виджет занять все доступное пространство внутри родительского виджета (например, Row или Column), разделяя его пропорционально, если присутствуют другие виджеты Expanded.
• Не позволяет дочернему элементу самостоятельно уменьшаться или увеличиваться. Он обязан заполнить оставшееся пространство.

Пример использования:

Row(
  children: [
    Expanded(
      child: Container(
        color: Colors.red,
        child: Text('Expanded widget'),
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
        child: Text('Another Expanded widget'),
      ),
    ),
  ],
)

В этом примере оба виджета Expanded займут половину доступного горизонтального пространства, так как оно делится между ними поровну.

2. Виджет Flexible:

• Flexible предоставляет больше контроля, чем Expanded. Он позволяет дочернему виджету занять доступное пространство, но при этом может уменьшаться или увеличиваться в зависимости от ограничений родительского виджета.

• Flexible может работать в двух режимах: Flexible(fit: FlexFit.loose) и Flexible(fit: FlexFit.tight).

• FlexFit.tight похож на Expanded (заставляет дочерний элемент заполнить всё доступное пространство).

• FlexFit.loose позволяет дочернему элементу занять столько места, сколько ему необходимо, но не заставляет его заполнять всё пространство.

Пример использования (с loose fit):

Row(
  children: [
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.blue,
        width: 100, // Займёт только 100 пикселей по ширине, даже если доступно больше пространства.
        child: Text('Flexible loose'),
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.orange,
        child: Text('Expanded'),
      ),
    ),
  ],
)

В этом примере виджет Flexible займёт только 100 пикселей, которые ему нужны, в то время как виджет Expanded заполнит оставшееся доступное пространство.

Основные отличия:

• Expanded: Заставляет дочерний виджет заполнить всё доступное пространство.
• Flexible: Позволяет дочернему виджету занять либо всё доступное пространство (tight), либо только столько, сколько нужно (loose).

Используйте Expanded, когда хотите, чтобы виджет занимал всё доступное пространство, и используйте Flexible, когда нужен более точный контроль над занимаемым пространством.