La programmazione Reattiva è la base di un moderno approccio allo sviluppo di applicazioni, ogni framework o libreria la interpreta in un suo modo, vediamo insieme come e perché Google ha scelto per Flutter il pattern BLoC.

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