Build Reactive Architecture in Flutter

In this talk, we will learn and share my experience on What is reactive architecture with few architecture solution like Redux, Scoped Model and BLoC Pattern also will share a case study of my WhatTodo app.

Transcript

1. Build Reactive Architecture In Flutter Burhanuddin Rashid
2. What is Architecture ?
3. Architecture Software architecture refers to the high level structures of a software system and the discipline of creating such structures and systems. Each structure comprises software elements, relations among them, and properties of both elements and relations. The architecture of a software system is a metaphor, analogous to the architecture of a building. It functions as a blueprint for the system and the developing project, laying out the tasks necessary to be executed by the design teams.
4. New Delhi
5. Separation of Concerns
6. Expectations
7. Reality
8. Reactive
9. New Delhi
10. Reactive • Asynchronous data streams • Events • Triggers by data streams • Notify Listeners
11. Architecture in Flutter • Redux • Provider • Mobx • Scoped Model • BLoC
12. Architecture in Flutter • Redux • Provider • Mobx • Scoped Model • BLoC
13. Architecture in Flutter • Redux • Provider • Mobx • Scoped Model • BLoC
14. Architecture in Flutter • Redux • Provider • Mobx • Scoped Model • BLoC
15. Scoped Model
16. Allow to pass a data Model from a parent Widget down to it's descendants (child). New Delhi Parent Child Child
17. Counter Example ... return Scaffold( ... body: Center( child: Text('$_counter', style: Theme.of(context).textTheme.display1), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, child: Icon(Icons.add), ), ); ... class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } }
18. Building complex app is never easy
19. Let’s see the code
20. Step 1: Add Dependency pubspec.yaml dependencies: scoped_model: ^1.0.1
21. Step 2: Create a Model class CounterModel { int _counter = 0; int get counter => _counter; void increment() { // First, increment the counter _counter++; } } extends Model // Then notify all the listeners. notifyListeners();
22. Step 3: Add Scope Model class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return } } MaterialApp( debugShowCheckedModeBanner: false, home: HomePage(), model: CounterModel(), ScopedModel<CounterModel>( child: ), );
23. Step 4: Add Scope Model Descendant class HomePage extends StatelessWidget { ... return Scaffold( ... body: Center( child: ), floatingActionButton:..., ); } ScopedModelDescendant<CounterModel>( }, ), Text(model.counter.toString(), style: Theme.of(context).textTheme.display1); builder: (context, child, model) { return
24. Step 5: Update Scope Model Descendant return Scaffold( ... body: Center(...), ... floatingActionButton: ); ScopedModelDescendant<CounterModel>( }, ), FloatingActionButton( onPressed: () { model.increment(); }, child: Icon(Icons.add), ); builder: (context, child, model) { return
25. Demo
27. Pros
28. Independent Widget return Scaffold( appBar: AppBar( title: Text("Scope Model"), actions: <Widget>[CartCount()], ), body:(...), floatingActionButton: ScopedModelDescendant<CounterModel>( ... ), ); class CartCount extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Stack( children: <Widget>[ // Cart icon, Align( ... child:Text("1")), ], ), ); } }
29. ScopedModelDescendant<CounterModel>( builder: (context, child, model){ return }, ) return Center( child: Stack( children: <Widget>[ // Cart icon, Align( ... child: ), ], ), Text(model.counter.toString()); CardCount
31. Cons
32. Rebuild all the ScopedModelDescendant<> Widgets
34. Disabled rebuild ScopedModelDescendant<CounterModel>( rebuildOnChange: false, builder:..., )
35. BLoC Business Logic Component
36. Business Logic • UI Independent • Rely on Streams • Platform independent • One or several BLoCs
37. What is Streams ?
38. Conveyor Belt • is Stream • is data controrol by StreamController • is listeners
39. New Delhi Conveyor Belt
40. Step 1: Add Dependency pubspec.yaml dependencies: rxdart: ^0.19.0
41. Let’s see the code
42. Step 1: Create BLoC class CounterBloc { int _counter = 0; void incrementCount() { _counter++; } } StreamController<int> _counterController = StreamController<int>.broadcast(); Stream<int> get outCounter => _counterController.stream; _counterController.sink.add(_counter); void dispose() { _counterController.close(); }
43. Step 2: Adding StreamBuilder<T> StreamBuilder<T>( ) key: // Optional, the unique ID of this Widget... stream: // The stream to listen to... initialData: // Any initial data builder: (BuildContext context, AsyncSnapshot<T> snapshot){ if (snapshot.hasData){ return // Widget to be built based on snapshot.data } return // Widget to be built if no data is available },
44. Step 2: Adding StreamBuilder<T> @override Widget build(BuildContext context) { return Scaffold( ... body: Center( child: StreamBuilder<int>( )... final CounterBloc _counterBloc = CounterBloc(); initialData: 0, stream: _counterBloc.outCounter, builder: (context, snapshot) { return Text(snapshot.data.toString(), style: Theme.of(context).textTheme.display1); },
45. Step 3: Update Widgets final CounterBloc _counterBloc = CounterBloc(); ... return Scaffold( ... body: Center( child: StreamBuilder<int>(...), ), ); ... floatingActionButton: FloatingActionButton( onPressed: () { }, child: Icon(Icons.add), ), _counterBloc.incrementCount();
46. Demo
48. Problem Need to create BLoC for every widget
49. BlocProvider
50. Didier Boelens https://medium.com/@boeledi
51. Generic BlocProvider class BlocProvider<T extends BlocBase> extends StatefulWidget { } final T bloc; final Widget child; BlocProvider({ Key key, @required this.child, @required this.bloc, }): super(key: key);
52. BlocBase abstract class BlocBase { void dispose(); } class CounterBloc implements BlocBase { ... @override void dispose() { _counterController.close(); } ... }
53. Implementation MaterialApp( home: BlocProvider( bloc: CounterBloc(), child: MyHomePage(), ), ) class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { CounterBloc _counterBloc = BlocProvider.of<CounterBloc>(context); return .. } class CartCount extends StatelessWidget { @override Widget build(BuildContext context) { CounterBloc _counterBloc = BlocProvider.of<CounterBloc>(context); return ... }
54. Demo
56. New Delhi
57. WhatTodo
58. New Delhi Create Task Create Project Create Label
59. New Delhi
60. New Delhi
61. Resources • Didier Boelens blog https://www.didierboelens.com/2018/08/reactive-programming---streams--- bloc/ • Scope Model https://pub.dartlang.org/packages/scoped_model • WhatTodo https://github.com/burhanrashid52/WhatTodo • Scope Model Example : https://bit.ly/2Q5gEQN • BLoC Example : https://bit.ly/2OQs2ve • Bloc Provider Example : https://bit.ly/2DJYsq9 • MTechViral : https://bit.ly/2Sb5isS
62. Burhanuddin Rashid, Technogise @burhanrashid52 Thank you! Does anyone have any questions ? https://burhanrashid52.com