Flutter Mobile Development · Ders

Akışlarla BLoC Kalıbı

Flutter'da iş mantığını olaylar, durumlar ve akışlar kullanarak kullanıcı arayüzünden ayırmak için BLoC (İş Mantığı Bileşeni) kalıbını öğrenin.

Akışlarla BLoC Kalıbı, CoddyKit'te ücretsiz bir Flutter Mobile Development dersidir. Bu, 4 dersinin 4. 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.

What Is BLoC?

BLoC stands for Business Logic Component. It is a pattern that keeps your business logic out of widgets by turning events into states through a stream.

UI sends events in
BLoC processes them
New states flow back out to the UI

Why Another Pattern?

You already know setState, Provider, and Riverpod. BLoC shines when logic is complex and you want:

Clear separation of UI and logic
Predictable, testable state transitions
A reactive stream-based flow

Streams Refresher

A Stream is a sequence of asynchronous values over time. A StreamController lets you push values and expose them as a stream.

final controller = StreamController<int>();
controller.stream.listen((value) => print(value));
controller.add(1);
controller.add(2);

Events

An event is an immutable class describing something the user did. Define them as plain Dart classes.

abstract class CounterEvent {}
class Increment extends CounterEvent {}
class Decrement extends CounterEvent {}

States

A state is an immutable snapshot of what the UI should show. Keep it simple and serializable.

class CounterState {
  final int count;
  const CounterState(this.count);
}

The Bloc Class

Using the flutter_bloc package, a Bloc maps events to states with on<Event> handlers.

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(const CounterState(0)) {
    on<Increment>((e, emit) => emit(CounterState(state.count + 1)));
    on<Decrement>((e, emit) => emit(CounterState(state.count - 1)));
  }
}

Providing the Bloc

Wrap part of the tree in BlocProvider so descendants can access the bloc.

BlocProvider(
  create: (_) => CounterBloc(),
  child: const CounterPage(),
);

Reacting with BlocBuilder

BlocBuilder rebuilds widgets whenever a new state is emitted.

BlocBuilder<CounterBloc, CounterState>(
  builder: (context, state) => Text('Count: ' + state.count.toString()),
);

Dispatching Events

Send events to the bloc with context.read<CounterBloc>().add(...).

FloatingActionButton(
  onPressed: () => context.read<CounterBloc>().add(Increment()),
  child: const Icon(Icons.add),
);

BlocListener for Side Effects

Use BlocListener for one-time side effects like showing a SnackBar or navigating, where you do not want to rebuild UI.

BlocListener<CounterBloc, CounterState>(
  listener: (context, state) {
    if (state.count == 10) ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('Reached 10!')),
    );
  },
  child: child,
);

Cubit: A Lighter BLoC

A Cubit drops events and exposes methods directly that call emit. Use it when full event classes feel like overkill.

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);
  void increment() => emit(state + 1);
}

Quick Check

Which widget should you use to trigger a one-time SnackBar without rebuilding UI on every state?

Recap

You learned the BLoC pattern:

Events in, states out, via streams
Bloc with on<Event> handlers, or a lighter Cubit
BlocProvider, BlocBuilder and BlocListener

BLoC gives you clean, testable separation of logic and UI for complex apps.

Sıkça Sorulan Sorular

“Akışlarla BLoC Kalıbı” dersi ücretsiz mi?

Evet — “Akışlarla BLoC Kalıbı” 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.

“Akışlarla BLoC Kalıbı” dersinde ne öğreneceğim?

Flutter'da iş mantığını olaylar, durumlar ve akışlar kullanarak kullanıcı arayüzünden ayırmak için BLoC (İş Mantığı Bileşeni) kalıbını öğrenin. 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 4. dersidir.

“Akışlarla BLoC Kalıbı” 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

← Flutter Mobile Development Sayfasına Dön