ตัวแปลงสตรีมและการหน่วงเหตุการณ์ใน BLoC

In flutter_bloc, every call to add(event) pushes an event into an internal stream. By default each event handler runs concurrently as events arrive. For most events that is fine, but some sources fire far too often:

• Search bars emit a TextChanged event on every keystroke.
• Scroll listeners emit dozens of ScrolledToBottom events per second.
• Buttons can be tapped rapidly, firing duplicate SubmitPressed events.

Firing a network request per keystroke wastes bandwidth and can show stale results. This lesson shows how to throttle, debounce, and sequence these events using stream transformers in BLoC.

The modern on<Event> API accepts an optional transformer argument. A transformer is an EventTransformer<E> — a function that receives the incoming Stream<E> of events and a mapper, and returns a transformed stream.

By supplying a transformer you control how events of that type are processed: debounced, throttled, dropped, or run one-at-a-time. The signature is:

• typedef EventTransformer<Event> = Stream<Event> Function(Stream<Event> events, EventMapper<Event> mapper);

You rarely write transformers by hand — the bloc_concurrency package provides the common ones.

Debouncing ignores events until a quiet period elapses. If the user is still typing, we keep resetting the timer; only when they pause for, say, 300ms do we process the latest event.

This is the right choice for a search box: you want to query the API once the user stops typing, not on every keystroke. Debounce drops all intermediate events and keeps only the final one in each burst.

• Reduces network calls dramatically.
• Trades a little latency (the debounce delay) for efficiency.

Before wiring it into BLoC, here is the debounce idea expressed as a runnable Dart program. We simulate keystrokes arriving with varying gaps and only print the term once typing pauses for 300ms.

The RxDart operator does this for you, but seeing the timer logic clarifies what debounce means.

Throttling lets the first event through, then ignores further events for a fixed window. Unlike debounce, throttle does not wait for a pause — it emits immediately and then rate-limits.

This suits infinite scroll and rapid button taps: you want to react to the first ScrolledToBottom right away, but ignore the storm of duplicates that follows during the same scroll gesture.

• throttleTime with trailing: false = leading edge only (act now, then cool down).
• Prevents duplicate page loads or double submissions.

The official bloc_concurrency package ships four ready-made transformers that control how overlapping events are handled:

• concurrent() — handlers run in parallel (the default).
• sequential() — events are queued and processed strictly one after another.
• droppable() — while a handler is running, new events of that type are discarded.
• restartable() — a new event cancels the in-flight handler and starts fresh.

These compose with timing operators: e.g. debounce first, then restartable() to cancel a stale search.

For a search BLoC the ideal recipe is debounce then restartable:

• Debounce the TextChanged events so you only query after the user pauses.
• restartable() so that if a newer query arrives while the previous request is still loading, the stale request is cancelled and never overwrites fresh results.

Together they eliminate both wasted calls and out-of-order responses. You wrap bloc_concurrency's transformer with a small helper that applies debounceTime first.

Here is how the pieces fit together in a real SearchBloc. Note how the handler is async and can emit multiple states (loading, then results or error). Because the transformer is restartable, an outdated request stops emitting as soon as a newer term arrives.

Inside a custom transformer you decide how the mapper is applied to each event:

• switchMap(mapper) — cancels the previous inner stream when a new event arrives. Equivalent in spirit to restartable.
• exhaustMap(mapper) — ignores new events while one is active. Equivalent to droppable.
• asyncExpand(mapper) — runs sequentially; each event waits for the previous handler to finish. Equivalent to sequential.
• flatMap(mapper) — runs all concurrently. Equivalent to concurrent.

Prefer the named bloc_concurrency transformers for clarity; reach for raw RxDart only when you must combine timing and mapping in one expression.

This runnable example models throttling without any framework. The first event in each 200ms window is processed; events arriving during the cooldown are dropped. Watch how only the leading events survive.

Match the transformer to the user intent:

• Search / autocomplete: debounce + restartable — wait for the pause, cancel stale queries.
• Infinite scroll page load: throttle + droppable — load once, ignore the rest of the gesture.
• Form submit / payment: droppable — block duplicate submissions while one is in flight.
• Ordered writes (save steps, analytics): sequential — preserve order, no overlap.

Always add bloc_concurrency and rxdart to pubspec.yaml, and remember a transformer only affects the one event type it is registered on.

Test your understanding of the search-box scenario.

You learned how to control event concurrency in BLoC with stream transformers:

• The on<Event> handler takes a transformer that reshapes the incoming event stream.
• Debounce waits for a pause (great for search); throttle acts on the leading edge then cools down (great for scroll and rapid taps).
• bloc_concurrency provides concurrent, sequential, droppable, and restartable, mirroring RxDart's flatMap, asyncExpand, exhaustMap, and switchMap.
• The canonical search recipe is debounce then restartable; submits use droppable; ordered writes use sequential.

Pick the transformer that matches user intent, and remember it applies only to the event type it is registered on.