🧩

BLoC Pattern

Separation of Concerns with Business Logic Component

BLoC (Business Logic Component) is a Flutter architecture pattern proposed by Google.

When UI generates an Event, BLoC processes the business logic and emits a new State. UI subscribes only to State to update the screen.

The flutter_bloc package is most widely used, offering two approaches: Cubit (simplified) and Bloc (event-based).

Implementation Steps

1

Start with Cubit: Define State β†’ Write Cubit class β†’ Connect UI with BlocBuilder

2

Switch to Bloc: Define Event class β†’ Write on<Event>() handlers

3

Inject with BlocProvider, provide multiple Blocs with MultiBlocProvider

4

Unit test business logic with bloc_test package

Pros

  • 100% unit testable business logic
  • Easy debugging with event logs

Cons

  • Lots of boilerplate code (Event, State, Bloc each needed)
  • Excessive structure for small apps

Use Cases

Role separation in large team projects Complex form validation logic separation