Pola BLoC dengan Stream
Pelajari pola BLoC (Komponen Logika Bisnis) dalam Flutter untuk memisahkan logika bisnis dari UI menggunakan peristiwa, status, dan stream.
Pola BLoC dengan Stream adalah pelajaran Flutter Mobile Development gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Flutter Mobile Development, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Flutter Mobile Development mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
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.
Belajar Dart dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 22
- Pelajaran
- 88
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pola BLoC dengan Stream” gratis?
Ya — teks lengkap “Pola BLoC dengan Stream” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Flutter Mobile Development, upgrade ke CoddyKit PRO. Kursus Flutter Mobile Development mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Pola BLoC dengan Stream”?
Pelajari pola BLoC (Komponen Logika Bisnis) dalam Flutter untuk memisahkan logika bisnis dari UI menggunakan peristiwa, status, dan stream. Kamu berlatih Flutter Mobile Development dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Flutter Mobile Development?
Tidak diperlukan pengalaman sebelumnya. Flutter Mobile Development di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Pola BLoC dengan Stream” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Flutter Mobile Development ini?
Ya. Setiap pelajaran Flutter Mobile Development menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- setState dan InheritedWidget
- Dasar-Dasar Paket Provider
- Riverpod untuk Status
- Pola BLoC dengan Stream