BLoC — was ist das, Business Logic Component in Flutter

Was ist BLoC?

BLoC (Business Logic Component) — ein Architekturmuster für Flutter, bei dem die Geschäftslogik in eine separate Klasse ausgelagert wird, die von der UI isoliert ist. BLoC empfängt Eingabedaten über einen Stream von Ereignissen (Event) und erzeugt Ausgabedaten über einen Stream von Zuständen (State). Die Präsentationsschicht (Widget) abonniert lediglich den State-Stream und rendert die UI, ohne jemals direkt Geschäftslogik auszuführen.

Das BLoC-Konzept basiert auf reaktiver Programmierung und dem Observer-Muster. Jede BLoC-Komponente ist ein separates Modul mit einem klaren Vertrag: eine bekannte Menge von Events (was passieren kann) und eine bekannte Menge von States (was angezeigt werden kann). Ein Entwickler kann den Zustand nicht "versehentlich" von der UI aus ändern — nur über ein bestimmtes Event. Dies macht den Code vorhersagbar und testbar.

Laut der Flutter Community 2025-Umfrage belegt BLoC den zweiten Platz in der Beliebtheit bei Zustandsverwaltungslösungen in Flutter nach Provider. Hauptvorteile: starke Typisierung, Logikisolierung, integrierte Stream-Unterstützung, reichhaltiges Ökosystem an Dienstprogrammen (BlocProvider, BlocListener, BlocSelector).

BLoC-Architektur: Event → Bloc → State

Die BLoC-Architektur ist um drei Entitäten herum aufgebaut: Event (Eingabe), Bloc (Verarbeiter) und State (Ausgabe). Das Widget sendet ein Event über die Methode add(). Bloc empfängt das Event in der Methode mapEventToState oder on<Event>, führt die Geschäftslogik aus und gibt einen neuen State über yield aus. Das Widget empfängt den State über einen Stream und baut neu auf.

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

Typsicherheit: Bloc ist mit zwei Typen parametrisiert — Event und State. Der Dart-Compiler überprüft, dass das Widget nur deklarierte Events aufruft und Bloc nur deklarierte States zurückgibt. Laufzeitfehler wie "unbekannte Aktion" sind ausgeschlossen.

Close und Dispose: Bloc implementiert das Interface Closeable. Wenn ein Widget zerstört wird, schließt Bloc automatisch den Stream über die Methode close(). Lecks bei reaktiven Abonnements sind unmöglich — BlocProvider verwaltet den Lebenszyklus von Bloc und bindet ihn an eine Route oder Seite.

Bloc und Cubit: Vergleich

Cubit ist eine vereinfachte Implementierung von Bloc ohne Event, eingeführt im Paket flutter_bloc 6.0. Cubit deklariert Methoden direkt anstelle von Event-Klassen: increment(), fetchData(). Intern verwendet Cubit denselben Stream-basierten Mechanismus, verbirgt jedoch die Event-Ebene. Dies reduziert den Boilerplate um 40-50% für einfache Szenarien.

Wann Cubit wählen: Zustand mit 2-3 Varianten (loading, loaded, error), einfache Formulare, Zähler, UI-Zustände (offen/geschlossen). Wann Bloc wählen: Komplexe Geschäftslogik mit vielen Aktionen: Bestellabwicklung, Autorisierung, Datensynchronisation. Bloc bietet detaillierte Verfolgung jeder Aktion durch Event — jeder Aufruf wird in BlocObserver protokolliert.

BlocObserver — ein globaler Beobachter, der alle Bloc und Cubit in der Anwendung verfolgt. Er ermöglicht die Protokollierung von Event, State, Fehlern und Übergängen. Einfach eine Instanz anschließen: Bloc.observer = AppBlocObserver(), und die gesamte Zustandsverfolgung der Anwendung ist zentral verfügbar.

BlocProvider und BlocBuilder

BlocProvider — ein InheritedWidget aus flutter_bloc, das child-Widgets einen Bloc bereitstellt. Bei der Initialisierung eines Widgets erstellt BlocProvider einen Bloc und schließt ihn bei Zerstörung automatisch über close(). BlocProvider kann auf MaterialApp-Ebene (globaler Bloc) oder auf einer bestimmten Route (lokaler Bloc) platziert werden.

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 — ein Widget, das die UI bei jedem neuen State neu aufbaut. BlocListener — für Seiteneffekte (einen State einmal verarbeiten, ohne die UI neu aufzubauen): SnackBar anzeigen, zu einem anderen Bildschirm navigieren. BlocConsumer — eine Kombination aus Builder und Listener für Fälle, in denen sowohl ein Neubau als auch ein Seiteneffekt benötigt werden. BlocSelector — für selektiven Neubau nur bei Änderung eines bestimmten State-Feldes.

MultiBlocProvider — ein Widget für verschachtelte BlocProvider ohne Erhöhung der Verschachtelungsebene. Eine Flutter-Anwendung mit 10-15 Blocs verwendet MultiBlocProvider auf der Root-Ebene, um alle Blocs zu registrieren, die der gesamten Anwendung zur Verfügung stehen: AuthenticationBloc, CartBloc, SettingsBloc.

BLoC testen

BLoC wird isoliert ohne Flutter-Widgets getestet. Einfach das Dart-Paket flutter_test und das Paket bloc_test importieren. Das Testszenario: Bloc erstellen, Event hinzufügen, State überprüfen. blocTest — ein Dienstprogramm, das die Sequenz automatisiert: build → act → expect.

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

Mocking: Ein Bloc, der von einem Repository oder einer API abhängt, wird mit Mocks über mocktail getestet. Das Repository wird auf Abstraktionsebene gemockt, und der Bloc erhält die gemockten Abhängigkeiten über den Konstruktor. Hydrated Bloc — eine Erweiterung zur automatischen Zustandsspeicherung/-wiederherstellung im lokalen Speicher. Es wird mit HydratedBlocStorage und temporärem Dateispeicher getestet.

BLoC in der Produktion

Ordner und Dateien: Eine typische Flutter-Projektstruktur mit BLoC: bloc/counter_bloc.dart, bloc/counter_event.dart, bloc/counter_state.dart. Für 30+ Bildschirme wird eine feature-basierte Gruppierung empfohlen: features/auth/bloc/, features/cart/bloc/. Jeder Bloc ist eine separate Datei, jedes Event und jeder State — entweder in separaten Dateien oder in einer Datei mit dem Bloc.

Leistung: BLoC erzeugt keinen Overhead für leere Streams. BlocBuilder verwendet buildWhen zum Filtern von Neubauten — das Widget wird nur aktualisiert, wenn sich eine bestimmte Bedingung ändert. Close stellt sicher, dass inaktive Blocs keinen Speicher verbrauchen. Laut Flutter DevTools fügt BLoC weniger als 1% zur Bündelgröße hinzu.

Migration von Provider: BLoC koexistiert problemlos mit Provider im selben Projekt. Schrittweise Migration: zuerst die komplexesten Provider durch Bloc ersetzen, dann die restlichen. BlocProvider ist mit dem Provider-Baum kompatibel: alte Widgets können Provider verwenden, neue — BlocProvider, innerhalb einer einzigen Anwendung.