Widget — что это, виды и композиция в Flutter

Что такое Widget во Flutter

Widget во Flutter — это неизменяемое (immutable) описание части пользовательского интерфейса. Каждый Widget содержит конфигурационные свойства: размер, цвет, положение, текст, обработчики событий и дочерние Widget. Сами Widget не отрисовываются напрямую — они являются рецептами (blueprints), на основе которых Flutter Engine создаёт RenderObject — реальный графический объект на экране.

Философия Flutter гласит: "Everything is a Widget". Это означает, что не только видимые элементы (Text, Image, Button) являются Widget, но и структурные блоки (Padding, Center, Column, Stack), поведенческие блоки (GestureDetector, AnimatedBuilder) и даже само приложение (MaterialApp, CupertinoApp). Такой подход обеспечивает единообразие: любой элемент экрана можно комбинировать с любым другим через простое вложение.

По данным Google I/O 2024 — Flutter Widgets Deep Dive, среднее приложение на Flutter содержит от 200 до 1500 Widget в один момент времени. Несмотря на такое количество, Flutter поддерживает 60 FPS даже на бюджетных устройствах благодаря оптимизациям на уровне C++ Skia/Impeller engine. Widget — это лёгкие объекты (40–80 байт каждый), поэтому их создание не является узким местом производительности.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

Три дерева Flutter: Widget, Element и RenderObject

Чтобы понять, как работает Widget, нужно разобраться с архитектурой Flutter, состоящей из трёх взаимосвязанных деревьев. Первое — Widget tree — описывает конфигурацию UI. Это лёгкое дерево, которое может полностью перестраиваться при каждом кадре (сборщик мусора удаляет старые Widget и создаёт новые). Widget неизменяемы (immutable): если изменился цвет текста — создаётся новый Widget Text с новым цветом, старый отбрасывается.

Второе дерево — Element tree — связующее звено между Widget и RenderObject. Element содержит ссылку на Widget (конфигурацию) и на RenderObject (отрисовку). Когда Widget меняется, Flutter сравнивает новый Widget со старым Element и решает: обновить существующий RenderObject (если Widget того же типа) или создать новый (если тип Widget изменился). Этот процесс называется Reconciliation и является аналогом React Virtual DOM.

Третье дерево — RenderObject tree — отвечает за реальную отрисовку на экране. RenderObject содержит конкретные размеры, позиции и методы paint. Flutter Engine (C++ Skia или Impeller) проходит по RenderObject tree и отрисовывает каждый узел. RenderObject tree — самое тяжёлое дерево, поэтому Flutter минимизирует его изменения, переиспользуя RenderObject при смене Widget одного типа.

StatelessWidget vs StatefulWidget

Flutter делит Widget на два фундаментальных типа: StatelessWidget и StatefulWidget. StatelessWidget — это виджет, который не содержит изменяемого состояния. Внешний вид StatelessWidget полностью определяется его конструктором и не может измениться после отрисовки. Примеры: Text, Icon, Divider, Padding. Все свойства StatelessWidget объявляются как final в конструкторе и доступны только для чтения.

StatefulWidget — виджет с изменяемым состоянием. Он состоит из двух классов: сам Widget (неизменяемая конфигурация, как и StatelessWidget) и State (изменяемое состояние). Отделение Widget от State — ключевое архитектурное решение Flutter. Widget пересоздаётся при каждой сборке (build), но объект State остаётся жить на протяжении всего жизненного цикла виджета в дереве, сохраняя своё состояние.

Когда вызывается setState(), Flutter помечает State как "грязный" и в следующем кадре вызывает метод build() для перестроения поддерева. Важно: setState() не пересоздаёт сам Widget — он только триггерит вызов build() у существующего State. Это означает, что StatefulWidget может обновлять UI без потери состояния дочерних Widget, пока ключи (Key) дочерних элементов остаются стабильными.

// StatelessWidget — appearance never changes
class GreetingWidget extends StatelessWidget {
  const GreetingWidget({super.key, required this.name});
  final String name;

  @override
  Widget build(BuildContext context) {
    return Text('Hello, $name');
  }
}

// StatefulWidget — counter with mutable state
class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $_count'),
        ElevatedButton(
          onPressed: () => setState(() => _count++),
          child: const Text('Increment'),
        ),
      ],
    );
  }
}

Виды Widget: layout, painting, interactive

Все Widget во Flutter можно разделить на три основные категории по функциональному назначению. Layout Widget — отвечают за расположение дочерних элементов на экране. Row и Column размещают детей в линию, Stack накладывает один поверх другого, Expanded и Flexible распределяют доступное пространство. Layout Widget не имеют собственного визуального представления — они управляют положением и размером дочерних виджетов.

Painting Widget — отвечают за визуальное оформление. Container объединяет декорации (цвет, градиент, тень, границу) с layout-свойствами. Padding добавляет отступы, DecoratedBox рисует фон, Transform применяет трансформации (поворот, масштаб). Painting Widget являются строительными блоками визуального стиля и часто используются в паре с layout Widget для достижения нужного внешнего вида.

Interactive Widget — обрабатывают пользовательский ввод. GestureDetector определяет жесты (tap, swipe, pinch), InkWell добавляет ripple-эффект Material, TextField принимает текстовый ввод, Slider и Switch предоставляют стандартные элементы управления. Interactive Widget поднимают события через callback-функции, которые передаются в конструктор или обрабатываются через провайдеры состояния.

По данным Flutter Widget of the Week (Google, 2025), сообщество Flutter активно использует комбинацию layout + painting + interactive Widget для построения практически любого интерфейса. Например, кнопка: InkWell (interactive) + Container (painting) + Text (static) + Padding (layout). Такая модульность позволяет переиспользовать стандартные блоки в разных контекстах без дублирования кода.

Композиция Widget и BuildContext

Композиция Widget — это процесс построения UI через вложение одних Widget в другие. В отличие от классического наследования (extends), где дочерний класс наследует поведение родителя, Flutter использует агрегацию: каждый Widget содержит другие Widget через параметр child (для одного) или children (для нескольких). Такой подход даёт большую гибкость и переиспользование.

BuildContext — это второй важнейший концепт после Widget. BuildContext — это дескриптор позиции Widget в дереве элементов. Через BuildContext Widget может обращаться к Ancestor-виджетам (Theme.of(context), MediaQuery.of(context), Navigator.of(context)). BuildContext передаётся в метод build() и используется для взаимодействия с родительскими и дочерними элементами. Каждый Widget имеет ровно один BuildContext, который уникально идентифицирует его позицию в дереве.

По данным Flutter Architectural Overview (Google, 2025), BuildContext является основой для InheritedWidget — механизма, который позволяет передавать данные вниз по дереву без явной передачи через конструкторы. Theme, MediaQuery, Navigator и Provider используют InheritedWidget под капотом. Любой deep-вложенный Widget может получить доступ к данным предка через BuildContext.dependOnInheritedWidgetOfExactType, что делает BuildContext ключом к реактивной архитектуре Flutter.

// Widget composition via nesting
Scaffold(
  appBar: AppBar(title: const Text('My App')),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Text('Welcome to Flutter',
          style: TextStyle(fontSize: 24)),
        const SizedBox(height: 16),
        ElevatedButton(
          onPressed: () { /* nav */ },
          child: const Text('Get Started'),
        ),
      ],
    ),
  ),
)

// Access themes via BuildContext
Text(
  'Styled Text',
  style: Theme.of(context).textTheme.headlineMedium,
)

Типичные ошибки с Widget

Первая и самая частая ошибка — использование StatefulWidget там, где достаточно StatelessWidget. Многие начинающие Flutter-разработчики создают StatefulWidget для всех виджетов, даже если состояние хранится во внешнем провайдере (Provider, Riverpod, BLoC). Это избыточно и ухудшает производительность. Правило: используйте StatelessWidget, если состояние управляется извне или если виджет не имеет собственного изменяемого состояния.

Вторая ошибка — создание Widget внутри метода build без const-конструктора. Каждый Widget, созданный без const, аллоцируется заново при каждой сборке. Если внутри build() создавать Widget с const-конструктором, Flutter может переиспользовать один и тот же экземпляр, снижая нагрузку на сборщик мусора. Добавляйте const везде, где это возможно — особенно для Text, Icon, SizedBox, Padding и других stateless Widget.

Третья ошибка — неправильная работа с ключами (Key). Flutter использует Key для идентификации Widget при перестроении дерева. Если список Widget перестраивается без Key, Flutter может перепутать порядок элементов, что приведёт к неправильной анимации или потере состояния. Всегда добавляйте Key (например, ValueKey или ObjectKey) для элементов в списках, особенно при использовании ListView.builder с динамическими данными.