BLoC - Be Reactive in flutter

0 likes•145 views

Il documento tratta della programmazione reattiva in Flutter utilizzando il modello BLoC per gestire lo stato e le interazioni. Vengono presentati esempi di implementazione di un contatore sia con widget statali che attraverso i modelli ScopedModel e BLoC. Si discutono anche librerie di supporto e i vantaggi e svantaggi nell'uso del paradigma reattivo.

Software

BLoC
Be Reactive in Flutter
Giacomo Ranieri
GDG Torino
@ilconteranieri

Il vostro Speaker
Giacomo Ranieri
Consulente
GDG Lead
Nerd
Ballerino

Sommario
La programmazione reattiva
Programmazione reattiva in flutter
BLoC come soluzione
Librerie di supporto
Conclusioni

Cos’è ?
Orientata alla asincronicità
Stream di dati
Manipolazione tramite funzioni
x |
Valori Errore Fine
Stream

Un Esempio
1 1 1 1 1
Click Stream
1 2 3 4 5
Counter Stream
clickStream.map(f).scan(g)
map( click diventa 1 )
scan( somma )

Flutter è reattivo
Nato nel boom della programmazione reattiva
Ispirato a React
UI Reattiva

Partiamo dalla base
Widget con stato
Callback

$class MyHomePage extends StatefulWidget { ...} class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return ... Text( '$_counter', ), ... Incrementer(_incrementCounter), ); } } class Incrementer extends StatelessWidget { final Function _incrementCounter; const Incrementer(this._incrementCounter); @override Widget build(BuildContext context) { return FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ); } }$

Aggiungiamo un modello
Model
ScopedModel
ScopedModelDescendant<>

$class MyHomePage extends StatefulWidget { ...} class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return ScopedModel( model: CounterModel(), child: ... ScopedModelDescendant<CounterModel>( builder: (context, child, model) { return Text( model.counter.toString(), ); }, ), ... Incrementer(), ); } } class Incrementer extends StatelessWidget { @override Widget build(BuildContext context) { return ScopedModelDescendant<CounterModel>( builder: (context, child, model) { return FloatingActionButton( onPressed: () => model.increment(), tooltip: 'Increment', child: Icon(Icons.add), ); }, ); } } class CounterModel extends Model { int _counter = 0; int get counter => _counter; void increment() { _counter++; notifyListeners(); } }$

E alla fine arriva BLoC
Stream
StreamBuilder
Business Logic

$class CounterBloc { int _counter = 0; Sink<int> get increment => _incrementController.sink; final _incrementController = StreamController<int>(); Stream<String> get count => _countSubject.stream; final _countSubject = BehaviorSubject<String>(); CounterBloc() { _incrementController.stream.listen((event) { _counter += event; _countSubject.add('$_counter'); }); } } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Provider<CounterBloc>( create: (context) => CounterBloc(), child: MaterialApp( ... home: MyHomePage(title: 'Counter'), ), ); } }$

$class MyHomePage extends StatefulWidget { ...} class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { final counterBloc = Provider.of<CounterBloc>(context); return ... StreamBuilder( stream: counterBloc.count, builder: (context, snapshot) { return Text( snapshot.data, ); }, ), ... Incrementer(), ); } } class Incrementer extends StatelessWidget { @override Widget build(BuildContext context) { final counterBloc = Provider.of<CounterBloc>(context); return FloatingActionButton( onPressed: () => counterBloc.increment.add(1), tooltip: 'Increment', child: Icon(Icons.add), ); } }$

Per costruire i BLoC
Package bloc
Cubit
Bloc

Per sfruttare i BLoC
Package flutter_bloc
BlocProvider e MultiBlocProvider
BlocBuilder

Bello ma non bellissimo
+ Forte separazione dei ruoli tra widget
+ Aggiornamenti puntuali della UI
+ Facilmente testabile
- Complesso da usare

Grazie!
Giacomo Ranieri
GDG Torino
@ilconteranieri

BLoC - Be Reactive in flutter

1. BLoC Be Reactive in Flutter Giacomo Ranieri GDG Torino @ilconteranieri

2. Il vostro Speaker Giacomo Ranieri Consulente GDG Lead Nerd Ballerino

3. Sommario La programmazione reattiva Programmazione reattiva in flutter BLoC come soluzione Librerie di supporto Conclusioni

4. La Programmazione Reattiva

5. Cos’è ? Orientata alla asincronicità Stream di dati Manipolazione tramite funzioni x | Valori Errore Fine Stream

6. Un Esempio 1 1 1 1 1 Click Stream 1 2 3 4 5 Counter Stream clickStream.map(f).scan(g) map( click diventa 1 ) scan( somma )

7. La Programmazione Reattiva in Flutter

8. Flutter è reattivo Nato nel boom della programmazione reattiva Ispirato a React UI Reattiva

9. Partiamo dalla base Widget con stato Callback

10. class MyHomePage extends StatefulWidget { ...} class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return ... Text( '$_counter', ), ... Incrementer(_incrementCounter), ); } } class Incrementer extends StatelessWidget { final Function _incrementCounter; const Incrementer(this._incrementCounter); @override Widget build(BuildContext context) { return FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ); } }

11. class MyHomePage extends StatefulWidget { ...} class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return ... Text( '$_counter', ), ... Incrementer(_incrementCounter), ); } } class Incrementer extends StatelessWidget { final Function _incrementCounter; const Incrementer(this._incrementCounter); @override Widget build(BuildContext context) { return FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ); } }

12. Aggiungiamo un modello Model ScopedModel ScopedModelDescendant<>

13. class MyHomePage extends StatefulWidget { ...} class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return ScopedModel( model: CounterModel(), child: ... ScopedModelDescendant<CounterModel>( builder: (context, child, model) { return Text( model.counter.toString(), ); }, ), ... Incrementer(), ); } } class Incrementer extends StatelessWidget { @override Widget build(BuildContext context) { return ScopedModelDescendant<CounterModel>( builder: (context, child, model) { return FloatingActionButton( onPressed: () => model.increment(), tooltip: 'Increment', child: Icon(Icons.add), ); }, ); } } class CounterModel extends Model { int _counter = 0; int get counter => _counter; void increment() { _counter++; notifyListeners(); } }

14. class MyHomePage extends StatefulWidget { ...} class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return ScopedModel( model: CounterModel(), child: ... ScopedModelDescendant<CounterModel>( builder: (context, child, model) { return Text( model.counter.toString(), ); }, ), ... Incrementer(), ); } } class Incrementer extends StatelessWidget { @override Widget build(BuildContext context) { return ScopedModelDescendant<CounterModel>( builder: (context, child, model) { return FloatingActionButton( onPressed: () => model.increment(), tooltip: 'Increment', child: Icon(Icons.add), ); }, ); } } class CounterModel extends Model { int _counter = 0; int get counter => _counter; void increment() { _counter++; notifyListeners(); } }

15. BLoC come soluzione

16. E alla fine arriva BLoC Stream StreamBuilder Business Logic

17. E alla fine arriva BLoC

18. class CounterBloc { int _counter = 0; Sink<int> get increment => _incrementController.sink; final _incrementController = StreamController<int>(); Stream<String> get count => _countSubject.stream; final _countSubject = BehaviorSubject<String>(); CounterBloc() { _incrementController.stream.listen((event) { _counter += event; _countSubject.add('$_counter'); }); } } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Provider<CounterBloc>( create: (context) => CounterBloc(), child: MaterialApp( ... home: MyHomePage(title: 'Counter'), ), ); } }

19. class MyHomePage extends StatefulWidget { ...} class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { final counterBloc = Provider.of<CounterBloc>(context); return ... StreamBuilder( stream: counterBloc.count, builder: (context, snapshot) { return Text( snapshot.data, ); }, ), ... Incrementer(), ); } } class Incrementer extends StatelessWidget { @override Widget build(BuildContext context) { final counterBloc = Provider.of<CounterBloc>(context); return FloatingActionButton( onPressed: () => counterBloc.increment.add(1), tooltip: 'Increment', child: Icon(Icons.add), ); } }

20. Librerie di supporto

21. Per costruire i BLoC Package bloc Cubit Bloc

22. Per sfruttare i BLoC Package flutter_bloc BlocProvider e MultiBlocProvider BlocBuilder

23. Concludiamo

24. Bello ma non bellissimo + Forte separazione dei ruoli tra widget + Aggiornamenti puntuali della UI + Facilmente testabile - Complesso da usare

25. Grazie! Giacomo Ranieri GDG Torino @ilconteranieri

BLoC - Be Reactive in flutter

More Related Content

Similar to BLoC - Be Reactive in flutter (20)

Recently uploaded (20)

BLoC - Be Reactive in flutter