Расскажи про систему ограничений (constraints) для виджетов во Flutter

«Расскажи про систему ограничений (constraints) для виджетов во Flutter» — вопрос из категории UI и вёрстка, который задают на 36% собеседований Flutter Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Во Flutter система ограничений (constraints) — это фундаментальный механизм лейаута. Родительский виджет передает дочернему BoxConstraints, определяя минимальные и максимальные допустимые размеры по ширине и высоте. Дочерний виджет должен выбрать свой размер в рамках этих ограничений, после чего родитель его позиционирует.

Ключевые принципы:

  1. Ограничения идут сверху вниз. Родитель задает constraints ребенку.
  2. Размер идет снизу вверх. Ребенок выбирает свой размер в заданных рамках и сообщает его родителю.
  3. Виджет не может выйти за переданные ему constraints. Если maxWidth: 200, виджет не может быть шире 200 пикселей.

Пример с ConstrainedBox:

ConstrainedBox(
  constraints: BoxConstraints(
    minWidth: 100,
    maxWidth: 300,
    minHeight: 50,
    maxHeight: 150,
  ),
  child: Container(
    color: Colors.red,
    width: 400, // Это значение будет проигнорировано, т.к. превышает maxWidth:300
    height: 100,
  ),
)

В этом примере Container будет шириной 300px (максимум) и высотой 100px (в пределах min/max).

Особые виджеты:

  • SizedBox: Игнорирует часть constraints, жестко задавая размер.
  • UnconstrainedBox: Временно снимает ограничения для своего ребенка (но может вызвать overflow).
  • LayoutBuilder: Позволяет виджету узнать constraints, переданные от родителя, и динамически строить на их основе свой дочерний widget tree.