> В чем разница StatelessWidget и StatefulWidget во Flutter и когда использовать каждый (Flutter)

Короткий ответ

StatelessWidget описывает UI, который не меняется после построения, а StatefulWidget - UI, который может изменяться в ответ на события, пользовательский ввод или асинхронные операции. StatelessWidget пересоздаётся при изменении родителя, но не хранит состояние. StatefulWidget хранит состояние в отдельном объекте State, который переживает перестроение виджета. Используйте StatelessWidget для статичного контента, StatefulWidget - когда нужно управлять жизненным циклом или динамическими данными.

Подробное объяснение

Основная разница лежит в управлении состоянием и жизненным циклом.

StatelessWidget - это описание части UI, которая полностью определяется входными параметрами (конфигурацией) и не имеет внутреннего изменяемого состояния. Каждый раз, когда родитель перестраивается, Flutter вызывает метод build заново. Виджет "не помнит" ничего между перестроениями. Он идеален для отображения данных, которые приходят сверху и не меняются внутри самого виджета.

StatefulWidget - это два класса: сам виджет (immutable) и связанный с ним объект State (mutable). Виджет может быть пересоздан, но объект State сохраняется в дереве элементов. Это позволяет хранить данные, которые меняются со временем: позиция скролла, текст в поле ввода, анимация, результат сетевого запроса. State имеет полный жизненный цикл: initState, didUpdateWidget, setState, dispose.

Ключевой момент: setState помечает виджет как "грязный" и планирует перестройку только этого поддерева. Это эффективнее, чем пересоздание всего дерева.

Когда использовать:

• StatelessWidget: иконки, статичные тексты, кнопки без внутренней логики, простые контейнеры, виджеты, которые получают все данные через конструктор.
• StatefulWidget: формы, анимации, таймеры, стримы, контроллеры (TextEditingController, ScrollController), загрузка данных, чекбоксы, переключатели.

Важно: не злоупотребляйте StatefulWidget. Если состояние можно поднять выше или вынести в отдельный менеджер состояния (Provider, Riverpod, Bloc), лучше сделать виджет stateless. Это упрощает тестирование и переиспользование.

На практике

На уровне senior важно не просто знать разницу, а уметь объяснять, как Flutter решает, когда перестраивать виджет. Механизм такой: при изменении родителя создаётся новый экземпляр виджета, но элемент в дереве остаётся тем же. Для StatelessWidget вызывается build заново. Для StatefulWidget - вызывается didUpdateWidget, и если нужно, build. При этом объект State не пересоздаётся.

Практические рекомендации:

• Если виджет не использует setState, initState, dispose - делайте его stateless.
• Если состояние нужно только для отображения и не влияет на другие виджеты - используйте StatefulWidget локально.
• Если состояние должно быть доступно нескольким виджетам - выносите его вверх или в отдельный слой управления состоянием.
• Помните про const конструкторы для StatelessWidget - это позволяет Flutter кешировать виджеты и избегать лишних перестроений.

Пример кода

// StatelessWidget - просто отображает данные
class UserAvatar extends StatelessWidget {
  final String name;
  final String imageUrl;

  const UserAvatar({super.key, required this.name, required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return CircleAvatar(
      backgroundImage: NetworkImage(imageUrl),
      child: Text(name),
    );
  }
}

// StatefulWidget - хранит состояние счётчика
class CounterButton extends StatefulWidget {
  const CounterButton({super.key});

  @override
  State<CounterButton> createState() => _CounterButtonState();
}

class _CounterButtonState extends State<CounterButton> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _increment,
      child: Text('Нажато: $_count'),
    );
  }
}

Как отвечать на собеседовании

Начните с чёткого определения: StatelessWidget - immutable, StatefulWidget - mutable состояние в отдельном объекте. Затем объясните жизненный цикл State: initState → build → didUpdateWidget → dispose. Упомяните, что setState перестраивает только текущее поддерево. Приведите примеры из практики: форма логина - StatefulWidget, кнопка с иконкой - StatelessWidget. Подчеркните, что выбор зависит от того, есть ли внутреннее изменяемое состояние. Для senior добавьте рассуждение о производительности: лишний StatefulWidget усложняет дерево, а const конструкторы ускоряют перестроение. Можно упомянуть, что в современных приложениях часто используют stateless виджеты в связке с внешним управлением состоянием.

Что проверяет интервьюер

Интервьюер оценивает:

• понимание разницы между immutable виджетом и mutable состоянием;
• знание жизненного цикла State и методов initState, didUpdateWidget, dispose;
• умение объяснить, когда setState вызывает перестройку и как это влияет на производительность;
• способность принять решение на основе контекста: где состояние локальное, а где его нужно поднять;
• понимание, что StatefulWidget не всегда лучше - часто это overengineering.

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

• Утверждение, что StatefulWidget "перерисовывается чаще" - это неверно, перерисовка зависит от setState, а не от типа виджета.
• Использование StatefulWidget для виджета, который не хранит состояние - просто потому, что "вдруг понадобится".
• Забывание вызвать dispose для контроллеров и подписок - утечка памяти.
• Вызов setState после dispose - ошибка, которую ловят в асинхронных операциях.
• Непонимание, что сам StatefulWidget immutable, а состояние живёт в State - это ключевой момент для собеседования.
• Попытка хранить в State данные, которые можно получить из конфигурации виджета - это лишняя сложность.