BLoC PatternEasy20 XP3 min read
When do you use BlocBuilder, BlocListener, and BlocConsumer?
TL;DR: BlocBuilder: rebuilds UI on state changes. BlocListener: side effects (navigation, snackbars) without rebuilding. BlocConsumer: both. Use buildWhen/listenWhen to filter state changes.
Full Answer
| Aspect | Widget | Purpose |
|---|---|---|
| BlocBuilder | Rebuilds UI when state changes | UI representation of state |
| BlocListener | Runs once per state change, no rebuild | Navigation, dialogs, snackbars, logging |
| BlocConsumer | Both listener + builder in one | When you need both at the same location |
⚠️
Never trigger navigation or show dialogs inside BlocBuilder — it runs on every rebuild and can fire multiple times. Use BlocListener for side effects.
Code Examples
dartBlocConsumer with filtered callbacks
Output
// Listener: fires once on auth/error // Builder: only rebuilds to show/hide loading spinner
Common Mistakes
- ✗Using BlocBuilder for navigation — fires repeatedly
- ✗Not providing listenWhen/buildWhen — unnecessary rebuilds on every state change
Interview Tip
💡
Explain buildWhen and listenWhen optimization — they're the performance levers. Without them, every state emission triggers every builder/listener.
#bloc-builder#bloc-listener#bloc-consumer#flutter-bloc