BLoC — wat is het, Business Logic Component in Flutter

Wat is BLoC?

BLoC (Business Logic Component) — architectuurpatroon voor Flutter waarin bedrijfslogica is ondergebracht in een aparte klasse, geïsoleerd van de UI. BLoC ontvangt invoergegevens via een stroom van gebeurtenissen (Event) en produceert uitvoergegevens via een stroom van toestanden (State). De presentatielaag (Widget) abonneert zich alleen op de State-stroom en geeft de UI weer, zonder ooit direct bedrijfslogica uit te voeren.

Het BLoC-concept is gebaseerd op reactief programmeren en het Observer-patroon. Elk BLoC-component is een aparte module met een duidelijk contract: de set Event (wat kan er gebeuren) en de set State (wat kan worden weergegeven) zijn bekend. De ontwikkelaar kan niet "per ongeluk" de status vanuit de UI wijzigen — alleen via een specifiek Event. Dit maakt de code voorspelbaar en testbaar.

Volgens de Flutter Community 2025-enquête staat BLoC op de tweede plaats in populariteit onder oplossingen voor statusbeheer in Flutter na Provider. Belangrijkste voordelen: strikte typering, isolatie van logica, ingebouwde ondersteuning voor Stream, rijk ecosysteem van hulpprogramma's (BlocProvider, BlocListener, BlocSelector).

BLoC architectuur: Event → Bloc → State

BLoC architectuur is gebouwd rond drie entiteiten: Event (ingang), Bloc (verwerker) en State (uitgang). Widget verzendt een Event via de methode add(). Bloc ontvangt het Event in de methode mapEventToState of on<Event>, voert bedrijfslogica uit en produceert een nieuwe State via yield. Widget ontvangt de State via Stream en wordt opnieuw getekend.

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;
    }
  }
}

Typeveiligheid: Bloc is geparametriseerd met twee typen — Event en State. De Dart-compiler controleert of Widget alleen gedeclareerde Events aanroept en Bloc alleen gedeclareerde States retourneert. Uitvoeringsfouten van het type "Onbekende Actie" zijn uitgesloten.

Close en Dispose: Bloc implementeert de interface Closeable. Bij vernietiging van de widget sluit Bloc automatisch de Stream via de methode close(). Lekken van reactieve abonnementen zijn onmogelijk — BlocProvider beheert de levenscyclus van Bloc en koppelt deze aan een route of pagina.

Bloc en Cubit: vergelijking

Cubit — vereenvoudigde implementatie van Bloc zonder Event, geïntroduceerd in het flutter_bloc 6.0-pakket. Cubit declareert methoden direct in plaats van Event-klassen: increment(), fetchData(). Intern gebruikt Cubit hetzelfde Stream-gebaseerde mechanisme, maar verbergt de Event-laag. Dit vermindert boilerplate met 40-50% voor eenvoudige scenario's.

Wanneer Cubit kiezen: toestand met 2-3 varianten (loading, loaded, error), eenvoudige formulieren, tellers, UI-toestanden (open/gesloten). Wanneer Bloc: complexe bedrijfslogica met meerdere acties: bestelling plaatsen, autorisatie, gegevenssynchronisatie. Bloc biedt gedetailleerde traceerbaarheid van elke actie via Event — elke aanroep wordt geregistreerd in BlocObserver.

BlocObserver — wereldwijde waarnemer die alle Bloc en Cubit in de applicatie volgt. Maakt het mogelijk om Event, State, fouten en overgangen te loggen. Het is voldoende om één exemplaar aan te sluiten: Bloc.observer = AppBlocObserver(), en de volledige toestandstracering van de applicatie is centraal beschikbaar.

BlocProvider en BlocBuilder

BlocProvider — InheritedWidget uit flutter_bloc dat Bloc beschikbaar stelt aan onderliggende widgets. Bij initialisatie van de widget maakt BlocProvider een Bloc aan, en bij vernietiging — wordt deze automatisch gesloten via close(). BlocProvider kan op MaterialApp-niveau (globale Bloc) of op het niveau van een specifieke route (lokale Bloc) worden geplaatst.

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 die de UI herbouwt bij elke nieuwe State. BlocListener — voor bijwerkingen (eenmalige verwerking van State zonder UI-herbouw): SnackBar tonen, navigeren naar een ander scherm. BlocConsumer — combinatie van Builder en Listener voor gevallen waarin zowel herbouw als bijwerking nodig is. BlocSelector — voor selectieve herbouw alleen bij wijziging van een specifiek veld van State.

MultiBlocProvider — widget voor geneste BlocProviders zonder de nestdiepte te vergroten. Een Flutter-applicatie met 10-15 Bloc gebruikt MultiBlocProvider op hoofdniveau voor registratie van alle Bloc die beschikbaar zijn voor de hele applicatie: AuthenticationBloc, CartBloc, SettingsBloc.

BLoC testen

BLoC wordt getest geïsoleerd zonder Flutter-widgets. Het is voldoende om het Dart-pakket flutter_test en het pakket bloc_test te importeren. Testscenario: een Bloc maken, een Event toevoegen, State controleren. blocTest — hulpprogramma dat de volgorde build → act → expect automatiseert.

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

Mocking: BLoC dat afhankelijk is van een repository of API wordt getest met mocks via mocktail. De repository wordt gemockt op abstractieniveau, Bloc ontvangt gemockte afhankelijkheden via de constructor. Hydrated Bloc — extensie voor automatisch opslaan/herstellen van status in lokale opslag. Wordt getest met HydratedBlocStorage en tijdelijke bestandsopslag.

BLoC in productie

Mappen en bestanden: typische structuur van een Flutter-project met BLoC: bloc/counter_bloc.dart, bloc/counter_event.dart, bloc/counter_state.dart. Voor 30+ schermen wordt groepering op functionaliteit aanbevolen: features/auth/bloc/, features/cart/bloc/. Elke Bloc — apart bestand, elke Event en State — ofwel in aparte bestanden, ofwel in één bestand met Bloc.

Prestaties: BLoC creëert geen overhead op lege Streams. BlocBuilder gebruikt buildWhen voor het filteren van herbouwen — de widget wordt alleen bijgewerkt wanneer een specifieke voorwaarde verandert. Close garandeert dat inactieve Bloc geen geheugen verbruiken. Volgens Flutter DevTools voegt BLoC minder dan 1% toe aan de bundelgrootte.

Migratie van Provider: BLoC kan gemakkelijk samen met Provider in hetzelfde project bestaan. Gefaseerde migratie: eerst worden de meest complexe Providers vervangen door Bloc, daarna de rest. BlocProvider is compatibel met de Provider-boom: oude widgets kunnen Provider gebruiken, nieuwe — BlocProvider, in dezelfde applicatie.