Как передаются constraint по дереву?

Constraints в Flutter: Как проходят по дереву виджетов

Это одна из самых важных концепций Flutter layout система. Понимание flow constraints — ключ к решению проблем с размерами и расположением виджетов. Объясню как это работает.

1. Что такое Constraint?

Constraint — это набор ограничений размера, который родитель передаёт дочернему виджету. Он содержит четыре параметра:

class BoxConstraints {
  final double minWidth;   // Минимальная ширина
  final double maxWidth;   // Максимальная ширина
  final double minHeight;  // Минимальная высота
  final double maxHeight;  // Максимальная высота
}

Пример:

• BoxConstraints(minWidth: 0, maxWidth: 300, minHeight: 0, maxHeight: 500)
• Это значит: виджет может быть шириной от 0 до 300, высотой от 0 до 500

2. Flow constraints по дереву (Top-Down)

Constraints передаются сверху вниз — от родителя к детям.

MaterialApp
  └─ Scaffold
       └─ Center (получает constraints от Scaffold)
            └─ Container (получает constraints от Center)
                 └─ Text (получает constraints от Container)

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          // Center получает constraints от Scaffold (весь экран)
          // Center говорит своему child: "ты можешь быть до 300х300"
          child: Container(
            width: 300,
            height: 300,
            color: Colors.blue,
            // Container получает constraints: max 300x300
            child: Text('Hello'),
          ),
        ),
      ),
    );
  }
}

3. Как родитель передаёт constraints

Каждый Layout-виджет (Column, Row, Stack и т.д.) применяет свою логику передачи constraints.

Пример 1: Column

Column(
  children: [
    Container(width: 100, height: 50, color: Colors.red),
    Container(width: 100, height: 50, color: Colors.green),
    Container(width: 100, height: 50, color: Colors.blue),
  ],
)

Column говорит каждому child:

• Ширина: максимальная ширина Column
• Высота: ограничена (не вся высота экрана)

Пример 2: Row

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

Row делит ширину между детьми. Expanded заставляет детей занять всю доступную ширину.

4. Точный процесс

Шаг 1: Родитель получает constraints

Scaffold получает от MaterialApp: 
BoxConstraints(minWidth: 0, maxWidth: 411, minHeight: 0, maxHeight: 822)
// Это размер экрана (411x822 - обычный мобильный размер)

Шаг 2: Родитель передаёт constraints детям

Scaffold передаёт Center:
BoxConstraints(minWidth: 0, maxWidth: 411, minHeight: 0, maxHeight: 822)

Шаг 3: Child измеряет себя согласно constraints

Center говорит: "я хочу центрировать, мой размер равен размеру родителя"
Center передаёт Container:
BoxConstraints(minWidth: 0, maxWidth: 411, minHeight: 0, maxHeight: 822)

Шаг 4: Leaf-виджет принимает размер

Container(width: 300, height: 300) говорит:
"мне нужно 300x300, но родитель позволяет мне быть 411x822"
"я возьму 300x300, так как это мой явно заданный размер"

5. Размеры (Size) передаются назад (Bottom-Up)

После того как constraints прошли вниз, размеры проходят вверх:

Text говорит: "мне нужно 45x20"
  ↓
Container получает и говорит: "я беру 300x300 как указано"
  ↓
Center получает 300x300 и центрирует
  ↓
Scaffold получает результат

6. Виджеты, которые расширяются (Tight Constraints)

Некоторые виджеты автоматически занимают весь доступный размер.

Container(
  color: Colors.blue,
  // Без явного width/height Container займет максимально возможный размер
  child: Text('Full size'),
)

Это называется tight constraints — maxWidth == minWidth и maxHeight == minHeight.

7. Практический пример: Отладка constraints

class ConstraintDebugger extends StatelessWidget {
  final Widget child;

  const ConstraintDebugger({required this.child});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      // LayoutBuilder позволяет увидеть constraints
      builder: (context, constraints) {
        print('Constraints: $constraints');
        return child;
      },
    );
  }
}

// Использование
Scaffold(
  body: ConstraintDebugger(
    child: Center(
      child: Container(
        width: 300,
        height: 300,
        color: Colors.blue,
      ),
    ),
  ),
)

Вывод:

Constraints: BoxConstraints(0.0<=w<=411.0, 0.0<=h<=822.0)

8. Problematic patterns

Проблема 1: Бесконечные constraints

// ❌ Ошибка: ListView не знает свой размер
Column(
  children: [
    ListView(
      children: [...]
    ),
  ],
)

Column говорит ListView: "ты можешь быть любой высоты" (unbounded) ListView не может измерить себя и выбросит ошибку.

Решение:

// ✅ Правильно
Column(
  children: [
    Expanded(
      child: ListView(
        children: [...]
      ),
    ),
  ],
)

Expanded говорит ListView: "займи оставшуюся высоту" (bounded).

Проблема 2: Overflow

// ❌ Container больше, чем позволяют constraints
ConstrainedBox(
  constraints: BoxConstraints(maxWidth: 100),
  child: Container(
    width: 200, // Больше чем maxWidth!
    height: 100,
  ),
)

9. Правила распространения constraints

10. Визуализация

Scaffold (maxWidth: 411, maxHeight: 822)
    ↓
Center (maxWidth: 411, maxHeight: 822)
    ↓
Container(width: 300) (maxWidth: 300, maxHeight: 822)
    ↓
Text (maxWidth: 300, maxHeight: 822)

Вывод

Constraints в Flutter:

1. Проходят сверху вниз — parent → child
2. Сообщают child его максимальный размер
3. Child решает как их использовать
4. Size проходит обратно вверх — child → parent

Понимание этого flow критично для:

• Решения проблем с размерами
• Оптимизации производительности
• Создания гибких адаптивных layouts

Когда получишь ошибку типа "RenderBox was not laid out", скорее всего это проблема с constraints!