0Pricing
Flutter Mobile Development · Ders

BLoC'ta Akış Dönüştürücüleri ve Olay Geciktirme

Gelen olayları sınırlamak, geciktirmek ve sıralamak için eşzamanlılık dönüştürücülerini uygulayın.

BLoC'ta Akış Dönüştürücüleri ve Olay Geciktirme, CoddyKit'te ücretsiz bir Flutter Mobile Development dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Flutter Mobile Development öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Flutter Mobile Development kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

Why Event Concurrency Matters

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 transformer Parameter

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.

// Registering a handler with a custom transformer
on<SearchTermChanged>(
  _onSearchTermChanged,
  transformer: (events, mapper) => events
      .debounceTime(const Duration(milliseconds: 300))
      .switchMap(mapper),
);

Debounce: Wait for the Pause

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.

Debounce in Plain Dart

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.

import 'dart:async';

void main() async {
  Timer? debounce;
  String? pending;
  final done = Completer<void>();

  void onChanged(String term) {
    pending = term;
    debounce?.cancel();
    debounce = Timer(const Duration(milliseconds: 300), () {
      print('search: $pending');
      if (pending == 'flutter') done.complete();
    });
  }

  // Fast burst, then a pause, then more typing.
  onChanged('f');
  await Future.delayed(const Duration(milliseconds: 50));
  onChanged('fl');
  await Future.delayed(const Duration(milliseconds: 50));
  onChanged('flu');
  await Future.delayed(const Duration(milliseconds: 400)); // pause -> fires
  onChanged('flutter');
  await done.future;
}

Throttle: One Per Window

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.
// Infinite-scroll feed: react immediately, then cool down 500ms
on<FeedScrolledToEnd>(
  _onScrolledToEnd,
  transformer: (events, mapper) => events
      .throttleTime(const Duration(milliseconds: 500))
      .asyncExpand(mapper),
);

bloc_concurrency Transformers

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.

import 'package:bloc_concurrency/bloc_concurrency.dart';

// Submit button: ignore extra taps while the first submit is in flight
on<FormSubmitted>(_onSubmit, transformer: droppable());

// Saving steps that must run in order
on<StepSaved>(_onStepSaved, transformer: sequential());

Combining Debounce with restartable

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.

import 'package:bloc_concurrency/bloc_concurrency.dart';
import 'package:rxdart/rxdart.dart';

EventTransformer<E> debounceRestartable<E>(Duration duration) {
  return (events, mapper) =>
      restartable<E>().call(events.debounceTime(duration), mapper);
}

// Usage inside a Bloc constructor:
on<SearchTermChanged>(
  _onSearchTermChanged,
  transformer: debounceRestartable(const Duration(milliseconds: 300)),
);

A Full Search Bloc

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.

class SearchBloc extends Bloc<SearchEvent, SearchState> {
  final SearchRepository repo;

  SearchBloc(this.repo) : super(const SearchState.initial()) {
    on<SearchTermChanged>(
      _onTermChanged,
      transformer: debounceRestartable(const Duration(milliseconds: 300)),
    );
  }

  Future<void> _onTermChanged(
    SearchTermChanged event,
    Emitter<SearchState> emit,
  ) async {
    final term = event.term.trim();
    if (term.isEmpty) {
      emit(const SearchState.initial());
      return;
    }
    emit(const SearchState.loading());
    try {
      final results = await repo.search(term);
      emit(SearchState.success(results));
    } catch (e) {
      emit(SearchState.failure(e.toString()));
    }
  }
}

Mapping Operators: switchMap vs asyncExpand

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.

Throttle Sequence Demo in Dart

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.

import 'dart:async';

void main() async {
  DateTime? lastAccepted;
  const window = Duration(milliseconds: 200);
  final accepted = <int>[];

  void onEvent(int id) {
    final now = DateTime.now();
    if (lastAccepted == null || now.difference(lastAccepted!) >= window) {
      lastAccepted = now;
      accepted.add(id);
    }
  }

  // Fire 6 events; some land inside the cooldown window.
  for (var i = 1; i <= 6; i++) {
    onEvent(i);
    await Future.delayed(const Duration(milliseconds: 90));
  }

  // Only leading-edge events per 200ms window are kept.
  print('accepted: $accepted');
}

Choosing the Right Strategy

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.

Quick Check

Test your understanding of the search-box scenario.

Recap

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.

Sıkça Sorulan Sorular

“BLoC'ta Akış Dönüştürücüleri ve Olay Geciktirme” dersi ücretsiz mi?

Evet — “BLoC'ta Akış Dönüştürücüleri ve Olay Geciktirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Flutter Mobile Development kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Flutter Mobile Development kursu toplamda 4 dersten oluşur.

“BLoC'ta Akış Dönüştürücüleri ve Olay Geciktirme” dersinde ne öğreneceğim?

Gelen olayları sınırlamak, geciktirmek ve sıralamak için eşzamanlılık dönüştürücülerini uygulayın. Flutter Mobile Development ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Flutter Mobile Development öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Flutter Mobile Development, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“BLoC'ta Akış Dönüştürücüleri ve Olay Geciktirme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Flutter Mobile Development dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Flutter Mobile Development dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Olaylar, Durumlar ve Cubit ile Bloc Arasında Seçim
  2. BLoC'ta Akış Dönüştürücüleri ve Olay Geciktirme
  3. HydratedBloc ile Durumu Kalıcılaştırma
  4. bloc_test ve Mocktail ile BLoC'ları Test Etme
← Flutter Mobile Development Sayfasına Dön