Перейти на PRO

Что такое BLoC в контексте управления состоянием в Flutter?

Тип вопроса: State Management Вероятность: 36% Категория: Flutter Разработчик

Ответ

BLoC (Business Logic Component) — это архитектурный паттерн для управления состоянием в Flutter-приложениях, построенный на реактивных потоках (Streams). Его основная цель — отделить бизнес-логику от слоя представления (UI), что делает код предсказуемым, тестируемым и легко отслеживаемым.

Ключевые компоненты:

  1. События (Events): Входные данные, которые описывают, что произошло (например, нажатие кнопки CounterIncrementPressed).
  2. BLoC: Центральный компонент, который принимает поток событий, обрабатывает их с помощью бизнес-логики и преобразует в поток состояний. Он реализует класс Bloc<Event, State>.
  3. Состояния (States): Выходные данные, которые описывают как должен выглядеть UI в ответ на событие (например, CounterState(count: 5)).

Практический пример — счётчик:

// 1. Определяем события
abstract class CounterEvent {}
class IncrementCounterEvent extends CounterEvent {}

// 2. Определяем состояния
abstract class CounterState {
  final int count;
  const CounterState(this.count);
}
class CounterInitialState extends CounterState {
  CounterInitialState() : super(0);
}
class CounterUpdatedState extends CounterState {
  const CounterUpdatedState(int count) : super(count);
}

// 3. Создаём BLoC
class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(CounterInitialState()) {
    // Регистрируем обработчик для события IncrementCounterEvent
    on<IncrementCounterEvent>((event, emit) {
      // Бизнес-логика: увеличиваем счётчик на 1
      emit(CounterUpdatedState(state.count + 1));
    });
  }
}

// 4. Используем в UI с помощью BlocBuilder
BlocBuilder<CounterBloc, CounterState>(
  builder: (context, state) {
    return Column(
      children: [
        Text('Count: ${state.count}'),
        ElevatedButton(
          onPressed: () => context.read<CounterBloc>().add(IncrementCounterEvent()),
          child: const Text('Increment'),
        ),
      ],
    );
  },
)

Почему это важно и когда использовать:

  • Предсказуемость: Состояние изменяется только в ответ на явные события, что упрощает отладку.
  • Тестируемость: Бизнес-логика в BLoC изолирована от UI и легко покрывается unit-тестами.
  • Масштабируемость: Отлично подходит для сложных экранов с множеством взаимосвязанных состояний.
  • Недостаток: По сравнению с более простыми решениями (как Cubit или Provider), требует написания большего количества boilerplate-кода (отдельные классы для событий и состояний).

Ответ 18+ 🔞

Слушай, ну вот объясняю тебе про BLoC, как будто это не паттерн, а какой-то хитрожопый сосед, который всё пытается упорядочить. Представь, что у тебя в приложении бардак, как в моей комнате после выходных — носки там, пивные банки, всё вперемешку. Так вот, BLoC — это такой занудный, но чертовски эффективный уборщик, который говорит: «А ну-ка, всё по полочкам! Логика — отдельно, интерфейс — отдельно, а я буду посредником, ёпта!»

Из чего эта манда с ушами состоит?

  1. События (Events): Это как ты нажимаешь на кнопку и орёшь «ДАЙТЕ МНЕ ПИВА!». То есть, просто факт твоего желания. Никакой логики, просто констатация: UserWantsBeerEvent.
  2. BLoC: Это и есть наш уборщик-зануда. Он стоит посередине, слышит твой крик, идёт на кухню (где вся бизнес-логика), открывает холодильник, проверяет, есть ли пиво, не просрочено ли оно, и если всё ок — несёт тебе банку. Всё по протоколу.
  3. Состояния (States): Это то, что он тебе в итоге приносит. Не просто пиво, а целый отчёт: BeerState(cold: true, quantity: 1, brand: 'Жигулёвское'). Или, если пива нет — BeerErrorState(message: 'Иди купи, бздун').

Пример, чтобы совсем охуеть от простоты — счётчик:

// 1. События. Что может произойти? Одно — плюсануть.
abstract class CounterEvent {}
class IncrementCounterEvent extends CounterEvent {} // "Хочу +1!"

// 2. Состояния. Как может выглядеть экран?
abstract class CounterState {
  final int count;
  const CounterState(this.count);
}
class CounterInitialState extends CounterState {
  CounterInitialState() : super(0); // Только зашли — ноль.
}
class CounterUpdatedState extends CounterState {
  const CounterUpdatedState(int count) : super(count); // Обновилось, вот новое число.
}

// 3. Сам BLoC — мозги операции.
class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(CounterInitialState()) {
    // Вешаем ухо на событие IncrementCounterEvent
    on<IncrementCounterEvent>((event, emit) {
      // Логика уровня бога: берём текущее состояние и прибавляем еденицу. Гениально, да?
      emit(CounterUpdatedState(state.count + 1));
    });
  }
}

// 4. А это уже видосик (UI), который подписан на этого BLoC.
BlocBuilder<CounterBloc, CounterState>(
  builder: (context, state) {
    return Column(
      children: [
        Text('Count: ${state.count}'), // Показываем, что принёс BLoC
        ElevatedButton(
          // Жмём кнопку — отправляем событие. BLoC услышит.
          onPressed: () => context.read<CounterBloc>().add(IncrementCounterEvent()),
          child: const Text('Increment'),
        ),
      ],
    );
  },
)

Зачем этот ёперный театр?

  • Порядок, блядь: Всё как в аптеке. Событие -> Обработка -> Новое состояние. Никаких сюрпризов, где состояние меняется из десяти мест.
  • Тесты на ура: Твою бизнес-логику (тот самый BLoC) можно тестировать в полной изоляции, без всяких виджетов. Подсовываешь ему событие — смотришь, какое состояние выплюнет. Красота!
  • Для сложных штук: Когда у тебя на экране не один счётчик, а целая панель управления космическим кораблём с кучей переключателей и данных — тут без BLoC'а можно сойти с ума. Он этот хаос превращает в стройные потоки.
  • Минус: Для простых задач, вроде того же счётчика, это — овердохуища кода. События, состояния... Иногда кажется, что ты роешь яму лазерным уровнем. Для такого есть Cubit — тот же BLoC, но без церемоний, более простой.

Короче, если твой проект не «Hello World», а что-то посерьёзнее, где состояние — это не одна переменная, а целая вселенная, то BLoC — твой выбор. А если хочешь просто и быстро — посмотри на Cubit, не прогадаешь.

© ХакСобесов, 2026
support@hacksobesov.com