Flutter Mobile Development · Урок

Шаблон BLoC с потоками

Изучите шаблон BLoC (компонент бизнес-логики) во Flutter, чтобы отделить бизнес-логику от интерфейса с помощью событий, состояний и потоков.

«Шаблон BLoC с потоками» — бесплатный урок Flutter Mobile Development на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Flutter Mobile Development, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Flutter Mobile Development содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

What Is BLoC?

BLoC stands for Business Logic Component. It is a pattern that keeps your business logic out of widgets by turning events into states through a stream.

UI sends events in
BLoC processes them
New states flow back out to the UI

Why Another Pattern?

You already know setState, Provider, and Riverpod. BLoC shines when logic is complex and you want:

Clear separation of UI and logic
Predictable, testable state transitions
A reactive stream-based flow

Streams Refresher

A Stream is a sequence of asynchronous values over time. A StreamController lets you push values and expose them as a stream.

final controller = StreamController<int>();
controller.stream.listen((value) => print(value));
controller.add(1);
controller.add(2);

Events

An event is an immutable class describing something the user did. Define them as plain Dart classes.

abstract class CounterEvent {}
class Increment extends CounterEvent {}
class Decrement extends CounterEvent {}

States

A state is an immutable snapshot of what the UI should show. Keep it simple and serializable.

class CounterState {
  final int count;
  const CounterState(this.count);
}

The Bloc Class

Using the flutter_bloc package, a Bloc maps events to states with on<Event> handlers.

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(const CounterState(0)) {
    on<Increment>((e, emit) => emit(CounterState(state.count + 1)));
    on<Decrement>((e, emit) => emit(CounterState(state.count - 1)));
  }
}

Providing the Bloc

Wrap part of the tree in BlocProvider so descendants can access the bloc.

BlocProvider(
  create: (_) => CounterBloc(),
  child: const CounterPage(),
);

Reacting with BlocBuilder

BlocBuilder rebuilds widgets whenever a new state is emitted.

BlocBuilder<CounterBloc, CounterState>(
  builder: (context, state) => Text('Count: ' + state.count.toString()),
);

Dispatching Events

Send events to the bloc with context.read<CounterBloc>().add(...).

FloatingActionButton(
  onPressed: () => context.read<CounterBloc>().add(Increment()),
  child: const Icon(Icons.add),
);

BlocListener for Side Effects

Use BlocListener for one-time side effects like showing a SnackBar or navigating, where you do not want to rebuild UI.

BlocListener<CounterBloc, CounterState>(
  listener: (context, state) {
    if (state.count == 10) ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('Reached 10!')),
    );
  },
  child: child,
);

Cubit: A Lighter BLoC

A Cubit drops events and exposes methods directly that call emit. Use it when full event classes feel like overkill.

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);
  void increment() => emit(state + 1);
}

Quick Check

Which widget should you use to trigger a one-time SnackBar without rebuilding UI on every state?

Recap

You learned the BLoC pattern:

Events in, states out, via streams
Bloc with on<Event> handlers, or a lighter Cubit
BlocProvider, BlocBuilder and BlocListener

BLoC gives you clean, testable separation of logic and UI for complex apps.

Часто задаваемые вопросы

Урок «Шаблон BLoC с потоками» бесплатный?

Да — полный текст урока «Шаблон BLoC с потоками» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Flutter Mobile Development, подпишись на CoddyKit PRO. Курс Flutter Mobile Development содержит 4 уроков всего.

Чему я научусь в уроке «Шаблон BLoC с потоками»?

Изучите шаблон BLoC (компонент бизнес-логики) во Flutter, чтобы отделить бизнес-логику от интерфейса с помощью событий, состояний и потоков. Ты практикуешь Flutter Mobile Development с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Flutter Mobile Development?

Предыдущий опыт не требуется. Flutter Mobile Development на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Шаблон BLoC с потоками»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Flutter Mobile Development?

Да. Каждый урок Flutter Mobile Development включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Flutter Mobile Development