BLoC — apa itu, Business Logic Component di Flutter

Apa itu BLoC?

BLoC (Business Logic Component) — pola arsitektur untuk Flutter di mana logika bisnis ditempatkan di kelas terpisah, terisolasi dari UI. BLoC menerima data masukan melalui aliran peristiwa (Event) dan menghasilkan data keluaran melalui aliran state (State). Lapisan presentasi (Widget) hanya berlangganan aliran State dan menampilkan UI, tanpa pernah menjalankan logika bisnis secara langsung.

Konsep BLoC didasarkan pada pemrograman reaktif dan pola Observer. Setiap komponen BLoC adalah modul terpisah dengan kontrak yang jelas: kumpulan Event (apa yang bisa terjadi) dan kumpulan State (apa yang bisa ditampilkan) diketahui. Pengembang tidak dapat mengubah state "secara tidak sengaja" dari UI — hanya melalui Event tertentu. Ini membuat kode dapat diprediksi dan diuji.

Menurut survei Flutter Community 2025, BLoC menempati posisi kedua dalam popularitas di antara solusi manajemen state di Flutter setelah Provider. Keunggulan utama: tipifikasi ketat, isolasi logika, dukungan Stream bawaan, ekosistem utilitas yang kaya (BlocProvider, BlocListener, BlocSelector).

Arsitektur BLoC: Event → Bloc → State

Arsitektur BLoC dibangun di sekitar tiga entitas: Event (masukan), Bloc (pemroses), dan State (keluaran). Widget mengirim Event melalui metode add(). Bloc menerima Event dalam metode mapEventToState atau on<Event>, menjalankan logika bisnis dan menghasilkan State baru melalui yield. Widget menerima State melalui Stream dan menggambar ulang.

abstract class CounterEvent {}

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

class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0);

  @override
  Stream<int> mapEventToState(CounterEvent event) async* {
    if (event is Increment) {
      yield state + 1;
    } else if (event is Decrement) {
      yield state - 1;
    }
  }
}

Keamanan tipe: Bloc diparametrikan dengan dua tipe — Event dan State. Kompiler Dart memeriksa bahwa Widget hanya memanggil Event yang dideklarasikan, dan Bloc hanya mengembalikan State yang dideklarasikan. Kesalahan runtime seperti "Tindakan Tidak Dikenal" dikecualikan.

Close dan Dispose: Bloc mengimplementasikan antarmuka Closeable. Saat widget dihancurkan, Bloc secara otomatis menutup Stream melalui metode close(). Kebocoran langganan reaktif tidak mungkin terjadi — BlocProvider mengelola siklus hidup Bloc, menghubungkannya dengan rute atau halaman.

Bloc dan Cubit: perbandingan

Cubit — implementasi sederhana Bloc tanpa Event, diperkenalkan dalam paket flutter_bloc 6.0. Cubit mendeklarasikan metode langsung alih-alih kelas Event: increment(), fetchData(). Secara internal, Cubit menggunakan mekanisme berbasis Stream yang sama, tetapi menyembunyikan lapisan Event. Ini mengurangi boilerplate hingga 40-50% untuk skenario sederhana.

Kapan memilih Cubit: state dengan 2-3 varian (loading, loaded, error), formulir sederhana, penghitung, state UI (terbuka/tertutup). Kapan Bloc: logika bisnis kompleks dengan banyak tindakan: checkout pesanan, otentikasi, sinkronisasi data. Bloc memberikan pelacakan detail setiap tindakan melalui Event — setiap panggilan dicatat di BlocObserver.

BlocObserver — pengamat global yang melacak semua Bloc dan Cubit dalam aplikasi. Memungkinkan pencatatan Event, State, kesalahan, dan transisi. Cukup menghubungkan satu instance: Bloc.observer = AppBlocObserver(), dan seluruh pelacakan state aplikasi tersedia secara terpusat.

BlocProvider dan BlocBuilder

BlocProvider — InheritedWidget dari flutter_bloc yang menyediakan Bloc ke widget anak. Saat inisialisasi widget, BlocProvider membuat Bloc, dan saat dihancurkan — secara otomatis menutupnya melalui close(). BlocProvider dapat ditempatkan di tingkat MaterialApp (Bloc global) atau di tingkat rute tertentu (Bloc lokal).

BlocProvider(
  create: (context) => CounterBloc(),
  child: Column(
    children: [
      BlocBuilder<CounterBloc, int>(
        builder: (context, state) => Text('$state'),
      ),
      ElevatedButton(
        onPressed: () => context.read<CounterBloc>().add(Increment()),
        child: Text('+'),
      ),
    ],
  ),
)

BlocBuilder — widget yang membangun ulang UI pada setiap State baru. BlocListener — untuk efek samping (memproses State sekali tanpa membangun ulang UI): menampilkan SnackBar, navigasi ke layar lain. BlocConsumer — kombinasi Builder dan Listener untuk kasus di mana diperlukan pembangunan ulang dan efek samping. BlocSelector — untuk pembangunan ulang selektif hanya saat perubahan bidang State tertentu.

MultiBlocProvider — widget untuk BlocProvider bersarang tanpa meningkatkan tingkat sarang. Aplikasi Flutter dengan 10-15 Bloc menggunakan MultiBlocProvider di tingkat root untuk mendaftarkan semua Bloc yang tersedia di seluruh aplikasi: AuthenticationBloc, CartBloc, SettingsBloc.

Menguji BLoC

BLoC diuji secara terisolasi tanpa widget Flutter. Cukup mengimpor paket Dart flutter_test dan paket bloc_test. Skenario pengujian: membuat Bloc, menambahkan Event, memeriksa State. blocTest — utilitas yang mengotomatiskan urutan: build → act → expect.

blocTest<CounterBloc, int>(
  'emits [1] when Increment is added',
  build: () => CounterBloc(),
  act: (bloc) => bloc.add(Increment()),
  expect: () => [1],
)

Mocking: BLoC yang bergantung pada repositori atau API diuji dengan mock melalui mocktail. Repositori di-mock pada tingkat abstraksi, Bloc menerima dependensi yang di-mock melalui konstruktor. Hydrated Bloc — ekstensi untuk menyimpan/memulihkan state secara otomatis di penyimpanan lokal. Diuji dengan HydratedBlocStorage dan penyimpanan file sementara.

BLoC dalam produksi

Folder dan file: struktur khas proyek Flutter dengan BLoC: bloc/counter_bloc.dart, bloc/counter_event.dart, bloc/counter_state.dart. Untuk 30+ layar, pengelompokan berdasarkan fitur direkomendasikan: features/auth/bloc/, features/cart/bloc/. Setiap Bloc — file terpisah, setiap Event dan State — baik di file terpisah, atau dalam satu file dengan Bloc.

Kinerja: BLoC tidak menciptakan overhead pada Stream kosong. BlocBuilder menggunakan buildWhen untuk memfilter pembangunan ulang — widget hanya diperbarui saat kondisi tertentu berubah. Close menjamin bahwa Bloc yang tidak aktif tidak mengonsumsi memori. Menurut Flutter DevTools, BLoC menambahkan kurang dari 1% ke ukuran bundel.

Migrasi dari Provider: BLoC mudah hidup berdampingan dengan Provider dalam proyek yang sama. Migrasi bertahap: pertama Provider yang paling kompleks diganti dengan Bloc, kemudian sisanya. BlocProvider kompatibel dengan pohon Provider: widget lama dapat menggunakan Provider, yang baru — BlocProvider, dalam aplikasi yang sama.