Расскажите о rendering pipeline во Flutter.

Rendering Pipeline во Flutter

Renderning pipeline — это последовательность шагов, которые Flutter выполняет для отрисовки пикселей на экране. Понимание этого процесса критично для оптимизации производительности приложения.

Три основных слоя

Флаттер построен на трёх слоях, каждый из которых имеет свой pipeline:

1. Widget слой (Framework)

• Иерархия описания UI (декларативная)
• Создание, обновление, уничтожение виджетов
• Примеры: StatelessWidget, StatefulWidget, InheritedWidget

2. Element слой

• Промежуточное представление между Widget и RenderObject
• Управляет состоянием и жизненным циклом
• Преобразует изменения в Widget в изменения RenderObject

3. Render слой (RenderBox/RenderObject)

• Отвечает за layout и painting
• Работает с координатами, размерами, трансформациями
• Примеры: RenderFlex, RenderPadding, RenderImage

Цикл обновления (Frame cycle)

В каждом кадре (frame) Flutter выполняет:

// 1. BUILD PHASE
// Вызывается build() метод виджетов
// Создаётся/обновляется дерево Widget
widget.build(context);

// 2. LAYOUT PHASE
// Определяются размеры и позиции всех элементов
renderObject.performLayout();
// Каждый RenderObject вычисляет свой размер
// на основе constraints от родителя

// 3. PAINT PHASE
// Рисуются пиксели на canvas
renderObject.paint(context, offset);
// Каждый RenderObject отрисовывает себя
// и вызывает paint() дочерних объектов

// 4. COMPOSITE PHASE
// Слои объединяются в финальное изображение
// (обычно прозрачна для разработчика)

Оптимизация: Dirtyness и Layering

Флаттер оптимизирует перерисовку через систему "грязных" объектов:

markNeedsBuild() — виджет требует перестройки markNeedsLayout() — нужен пересчёт layout markNeedsPaint() — нужна перерисовка

// Плохо: полная перестройка
setState(() => _data = newData);

// Хорошо: используй const виджеты и RepaintBoundary
class MyWidget extends StatelessWidget {
  const MyWidget(); // const конструктор
  
  @override
  Widget build(BuildContext context) {
    return RepaintBoundary(
      child: CustomPaint(
        painter: MyPainter(),
      ),
    );
  }
}

Best Practices

• Используй const конструкторы — избегаешь пересоздания виджетов
• RepaintBoundary — изолирует перерисовку дорогих виджетов
• shouldRebuild() — в InheritedWidget проверяй реальные изменения
• Профилируй — используй DevTools Timeline для анализа фреймов
• Избегай Layout в Paint — это вызывает ребилды

Понимание rendering pipeline позволяет писать производительные приложения, избегая ненужных обновлений и правильно структурируя Widget дерево.