State Management bei Flutter: BLoC mit seinen Ecken und Kanten

Beim Entwickeln einer UI treibt das State Management so manchen Entwickler zur Verzweiflung.
Mit Ansätzen wie dem Bloc-Pattern lassen sich Business-Logic und UI trennen, um strukturierten und einfach wartbaren Code zu schreiben.
Tamara, Quoc und Tobias zeigen euch in ihrem Talk, wie sie das BloC-Pattern in Flutter umsetzen.

Transcript

1. Quoc Huynh quoc.huynh@cosee.biz
 Tamara Ihlefeld tamara.ihlefeld@cosee.biz
 Tobias Wawrzinek tobias.wawrzinek@cosee.biz Statemanagement bei Flutter: BLoC mit seinen Ecken und Kanten
2. Was ist Flutter? • Open-Source-UI-Entwicklungs-Kit • Cross-Platform • Programmiersprache Dart • UI besteht aus Widgets • Bündelt Logik und UI • Material-Design-Richtlinien • TechTalk: Flutter SDK - Moderne Mobile App-Entwicklung
3. Was ist BLoC? • Business Logic Component • Trennung von UI und Business Logic • Statemanagement • Basiert auf Streams
4. Streams • Asynchrone Sequenz an Events • Single subscription & Broadcast • Klassen • Stream • Sink • StreamController • StreamSubscription
5. Code class LightBulbBloc { static const List<String> colors = ["yellow", "blue"]; final _streamController = StreamController<int>.broadcast(); Sink<int> get sink => _streamController.sink; late Stream<String> stream; LightBulbBloc() { stream = _streamController.stream .where((event) => event < colors.length && event >= 0) .map((event) => colors[event]); } void dispose() { _streamController.close(); } }
6. Code void main(List<String> arguments) { LightBulbBloc bloc = LightBulbBloc(); bloc.stream.listen((state) => print(state)); bloc.sink.add(0); // yellow bloc.sink.add(1); // blue bloc.sink.add(2); // bloc.dispose(); }
7. Warum BLoC? • Trennung von UI und Business Logic • Vereinfachtes State Management • Einfache Tests • Wiederverwendbar • Vorteile gegenüber StatefulWidget • Logik nicht im Widget • Nicht der Sinn von StatefulWidget • Nachteile von BLoC • Ressourcen • Boilerplate Code
8. Wann BLoC? • … nutzen • State übergreifend über mehrere Widgets • Trennung Business Logic und UI • Ressourcen von einer externen Quelle • … nicht nutzen • State nur innerhalb des Widgets genutzt
9. Richtlinien • Design Richtlinien • Ein- und Ausgaben sind Streams/Sinks • Abhängigkeiten müssen injectable sein • Keine Platform-abhängige Logik • UI Richtlinien • Jedes komplexe Widget hat einen entsprechenden BLoC • Widgets sollten Daten unverändert senden/darstellen • Entscheidungen in der UI sollten vom BLoC gesteuert werden
10. Flutter BLoC
11. Flutter BLoC Beispiel
12. Flutter BLoC Beispiel
13. Flutter BLoC Beispiel
14. Flutter BLoC Widgets • BlocProvider: Dependency Injection Widget • BlocBuilder: Baut Widget basierend auf States • BlocListener: Führt Funktion basierend auf State aus • Weitere Widgets: • BlocConsumer • BlocSelector • MultiBlocProvider/Listener
15. BlocProvider BlocProvider( create: (_) => MyBloc(), child: MyWidget(), );
16. BlocBuilder
17. BlocBuilder BlocBuilder<MyBloc, MyState>( builder: (context, state) { if (state is White) return Button(text: 'Button', color: white); else return Button(text: 'Button', color: black); }, );
18. BlocListener BlocListener<MyBloc, MyState>( listener: (context, state) { if (state is White) myMethod(); }, );
19. Cubit
20. Live Demo Code: https://github.com/cosee/techtalk-2022-10- fl utter-bloc
21. Fragen?