BLoC PatternHard50 XP5 min read
How do you implement pagination with Bloc?
TL;DR: Model pagination state with hasReachedMax flag, current items list, and status. Add a FetchNextPage event. In the handler, check hasReachedMax, call API with current offset/cursor, and emit new state with appended items.
Full Answer
Pagination requires careful state design to avoid showing loading spinners over existing content.
State Design
- ▸items: List<T> — all fetched items accumulated
- ▸status: initial | loading | loadingMore | success | failure
- ▸hasReachedMax: true when API returns fewer items than page size
- ▸cursor/offset: Current pagination position
🎯
Use droppable() transformer for the FetchNextPage event — prevents firing multiple requests if the user rapidly scrolls to the bottom.
Code Examples
dartInfinite scroll Bloc with cursor pagination
Output
// Scroll to bottom -> FetchNextPage event // State accumulates items, hasReachedMax stops more fetches
Common Mistakes
- ✗Replacing items instead of appending on FetchNextPage — loses all previously loaded data
- ✗Not checking hasReachedMax — continues firing API calls after all data is loaded
Interview Tip
💡
Show the status: loadingMore vs loading distinction. Loading replaces the whole screen with a spinner. LoadingMore shows a spinner at the bottom while keeping existing items visible.
#pagination#infinite-scroll#cursor-pagination#bloc