BLoC

Der BLoC (Business Logic Component) selbst ist eine Klasse oder ein Objekt, das die Logik Ihrer Anwendung enthält. Es kann die Datenverarbeitung, Validierung, API-Aufrufe und andere relevante Logik umfassen.

BLoCs verwenden normalerweise Streams, um Daten zu verwalten. Ein Stream ist eine Sequenz von Ereignissen oder Datenwerten im Laufe der Zeit. Der BLoC stellt einen Stream für die UI bereit, und die UI kann auf Änderungen des Streams reagieren.

Die UI interagiert mit dem BLoC durch das Senden von Ereignissen (Events) an den BLoC. Der BLoC verarbeitet diese Ereignisse und gibt den aktuellen Zustand (State) zurück. Die UI reagiert auf State-Änderungen und aktualisiert sich entsprechend.

Normalerweise wird Provider-Paket verwendet, um BLoCs zu verwalten. Der Provider hilft, Abhängigkeiten zu injizieren und den Zugriff auf den BLoC in der Anwendung zu organisieren.

..weiter so eine 8-Kseislauf:

  1. BLoC -> Async Request zu Data (oben)
  2. Async Responce zurück zum BLoC
  3. dann sendet BLoC  State zu UI (oben)
  4. von UI kommen Events wiederum zum BLoC

Ein Beispiel für BLoC von Chat-GPT:

// BLoC
class CounterBloc {​
  final _counterController = StreamController<int>.broadcast();
  int _counter = 0;

  Stream<int> get counterStream => _counterController.stream;

  void increment() {​
    _counter++;
    _counterController.add(_counter);
  }​

  void dispose() {​
    _counterController.close();
  }​
}​

// UI
class CounterApp extends StatelessWidget {​
  @override
  Widget build(BuildContext context) {​
    final CounterBloc counterBloc = Provider.of<CounterBloc>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text(‚BLoC Beispiel‘),
      ),
      body: StreamBuilder<int>(
        stream: counterBloc.counterStream,
        builder: (context, snapshot) {​
          return Center(
            child: Text(‚Counter: ${​snapshot.data}​‘),
          );
        }​,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {​
          counterBloc.increment();
        }​,
        child: Icon(Icons.add),
      ),
    );
  }​
}​
 

In diesem Beispiel wird ein einfacher Zähler-BLoC erstellt und in der Benutzeroberfläche verwendet. Der BLoC erhöht den Zählerwert und informiert die Benutzeroberfläche über den aktualisierten Wert.