All of us use reactive apps in our daily lives. Examples include your email and weather apps or the app you use to check out which movies are playing at your local theatre.<\/p>\n
A reactive app is one that responds to your actions and needs with a standard set of behaviors. Examples of these responses include reflecting changes in the UI instantaneously, syncing information across multiple devices based upon user inputs (data updates, push notifications, scheduling etc.) and updating devices with the latest updates from the server to ensure top-notch performance and security.<\/p>\n
A flutter app developer <\/strong><\/a>can build such a mobile app by using reactive programming, which is a way to solve problems by handling multiple data streams asynchronously.<\/p>\n To understand what follows, you need to know how to build a Flutter app<\/a>. We have covered the topic in our blog previously, in addition to a post about how to create Flutter widgets<\/a>. If you are new to Flutter app development<\/strong><\/a>, reading those two posts will help you understand the subject of this post better.<\/p>\n BLoC (Business Logic) pattern builds upon reactive programming to create reactive Flutter apps. In BLoC, all the business logic side implementations are put in one place that acts as a go-between for network elements and UI screens to carry events\/data back and forth.<\/p>\n In other words, the UI part does not handle any logic in BLoC pattern; not even data validations. The aim of doing this is simple \u2013 to create a business logic and data layers that can be shared while focusing on the presentation layer for each mobile platform.<\/p>\n To understand how BLoC helps you build reactive Flutter apps, let\u2019 consider the basic counter app that you get by default when first creating a new project in Flutter app development<\/strong><\/a>.<\/p>\n In this app, you can see a counter whose value increases every time you press the floating button. To examine the code of this app, you can navigate to the main.dart<\/em> file using your preferred IDE. And this is what you\u2019ll see,<\/p>\n Here, when the data (_counter<\/em>) changes based on user action (floatingButton<\/em>), the widget has to be rendered again. This can be done by using a StatefulWidget<\/em> along with a setState()<\/em> function.<\/p>\n The code for doing this is pretty straightforward. However, will it still work if you choose to share the _counter<\/em> variable\u2019s value on a different page within your app? The answer is it won\u2019t, since the data is bound locally to your widget.<\/p>\n Instead, what you need to do is move the data and its updating mechanisms to another place that is accessible from any page\/widget within your application. This is exactly what BLoC allows you to do.<\/p>\n The first step is to create a new class that acts as the source of truth for your counter. This class will store the counter\u2019s value as a private variable and use Streams and Sinks to interact with it.<\/p>\n While both are provided by a StreamController<\/em>, Sinks<\/em> are used to update the events\/data while Streams<\/em> are used to listen to the changes.<\/p>\n In this case, we use counter$<\/em> to depict the changes to _counter<\/em> and increment<\/em> for increasing its value.<\/p>\n Look closer at the constructor and you\u2019ll see how the input sink is linked to the output stream. This ensures that a new counter value is emitted after the execution of every increment.<\/p>\n Now that you\u2019ve coded the logic, you need a way to access it through a widget. For this, you can use InheritedWidget,<\/em> which is a special kind of widget that lets you broadcast information throughout the widget tree. In Flutter app development<\/strong><\/a>, InheritedWidget<\/em> ensures that if there are any changes, all widgets using it will be re-rendered as well.<\/p>\n <\/p>\n With this, you have completed the most essential part of using BLoC to build a reactive mobile app in Flutter. Now comes the task of simplifying the main widget. Note \u2013 since your app\u2019s state is now in the BLoC, you don\u2019t require a StatefulWidget<\/em>. Instead, you can use the state via the BlocProvider<\/em>.<\/p>\nFlutter BLoC Pattern<\/em><\/h3>\n
![\"BLoC-1\"](\"https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/BLoC-1.png?lossy=2&strip=1&webp=1\" "\\"\\"")
<\/p>\nBuilding a Reactive Flutter App Using BLoC<\/em><\/h3>\n
![\"initial-counter\"](\"https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/initial-counter.gif?lossy=2&strip=1&webp=1\" "\\"\\"")
<\/p>\nimport 'package:flutter\/material.dart';\r\n\r\nvoid main() => runApp(MyApp());\r\n\r\nclass MyApp extends StatelessWidget {\r\n@override\r\nWidget build(BuildContext context) {\r\nreturn MaterialApp(\r\ntitle: 'Flutter Demo',\r\ntheme: ThemeData(\r\nprimarySwatch: Colors.blue,\r\n),\r\nhome: MyHomePage(title: 'Flutter Demo Home Page'),\r\n);\r\n}\r\n}\r\n\r\nclass MyHomePage extends StatefulWidget {\r\nMyHomePage({Key key, this.title}) : super(key: key);\r\nfinal String title;\r\n\r\n@override\r\n_MyHomePageState createState() => _MyHomePageState();\r\n}\r\n\r\nclass _MyHomePageState extends State<MyHomePage> {\r\n\tint _counter = 0;\r\n\r\n\tvoid _incrementCounter() {\r\n\tsetState(() {\r\n\t_counter++;\r\n});\r\n}\r\n\r\n@override\r\nWidget build(BuildContext context) {\r\nreturn Scaffold(\r\nappBar: AppBar(\r\ntitle: Text(widget.title),\r\n),\r\nbody: Center(\r\nchild: Column(\r\nmainAxisAlignment: MainAxisAlignment.center,\r\nchildren: <Widget>[\r\n\tText(\r\n\t'You have pushed the button this many times:',\r\n\t),\r\n\tText(\r\n\t'$_counter',\r\n\tstyle: Theme.of(context).textTheme.display1,\r\n\t),\r\n\t],\r\n\t),\r\n\t),\r\n\tfloatingActionButton: FloatingActionButton(\r\n\tonPressed: _incrementCounter,\r\n\ttooltip: 'Increment',\r\n\tchild: Icon(Icons.add),\r\n\t),\r\n\t);\r\n}\r\n}<\/pre>\nLet us examine some key elements of this code.<\/h3>\n
\n
Using BLoC for Counter App<\/em><\/h3>\n
import 'dart:async';\r\n\r\nimport 'package:rxdart\/rxdart.dart';\r\nimport 'package:rxdart\/subjects.dart';\r\n\r\nclass CounterBloc {\r\nint _counter = 0;\r\n\r\nfinal _counter$ = BehaviorSubject<int>(seedValue: 0);\r\nfinal _incrementController = StreamController<void>();\r\n\r\nCounterBloc() {\r\n_incrementController.stream.listen((void _) => _counter$.add(++_counter));\r\n}\r\n\r\nSink<void> get increment => _incrementController.sink;\r\n\r\nStream<int> get counter$ => _counter$.stream;\r\n\r\nvoid dispose() {\r\n_incrementController.close();\r\n_counter$.close();\r\n}\r\n}<\/pre>\nimport 'package:flutter\/material.dart';\r\n\r\nimport 'package:flutter_counter_bloc\/bloc\/counter_bloc.dart';\r\n\r\nclass BlocProvider extends InheritedWidget {\r\nfinal CounterBloc bloc;\r\n\r\nBlocProvider({Key key, this.bloc, child}) : super(key: key, child: child);\r\n\r\n@override\r\nbool updateShouldNotify(InheritedWidget oldWidget) => true;\r\n\r\nstatic CounterBloc of(BuildContext context) =>\r\n(context.inheritFromWidgetOfExactType(BlocProvider) as BlocProvider).bloc;<\/pre>\nimport 'package:flutter\/material.dart';\r\nimport 'package:flutter_counter_bloc\/bloc\/bloc_provider.dart';\r\nimport 'package:flutter_counter_bloc\/bloc\/counter_bloc.dart';\r\n\r\nvoid main() {\r\nfinal bloc = CounterBloc();\r\nrunApp(MyApp(bloc));\r\n}\r\n\r\nclass MyApp extends StatelessWidget {\r\nfinal CounterBloc bloc;\r\n\r\nMyApp(this.bloc);\r\n\r\n@override\r\nWidget build(BuildContext context) {\r\nreturn BlocProvider(\r\nbloc: bloc,\r\nchild: MaterialApp(\r\ntitle: 'Flutter Demo',\r\ntheme: ThemeData(\r\nprimarySwatch: Colors.blue,\r\n),\r\nhome: MyHomePage(title: 'Flutter Demo Home Page'),\r\n));\r\n}\r\n}\r\n\r\nclass MyHomePage extends StatelessWidget {\r\nMyHomePage({Key key, this.title}) : super(key: key);\r\nfinal String title;\r\n\r\n@override\r\nWidget build(BuildContext context) {\r\nfinal bloc = BlocProvider.of(context);\r\nreturn Scaffold(\r\nappBar: AppBar(\r\ntitle: Text(title),\r\n),\r\nbody: Center(\r\nchild: Column(\r\nmainAxisAlignment: MainAxisAlignment.center,\r\nchildren: <Widget>[\r\nStreamBuilder(\r\nstream: bloc.counter$,\r\nbuilder: (context, snapshot) => snapshot.hasData\r\n? Text('${snapshot.data}',\r\nstyle: Theme.of(context).textTheme.display1)\r\n: CircularProgressIndicator()),\r\n],\r\n),\r\n),\r\nfloatingActionButton: FloatingActionButton(\r\nonPressed: () => bloc.increment.add(null),\r\ntooltip: 'Increment',\r\nchild: Icon(Icons.add),\r\n),\r\n);\r\n}\r\n}<\/pre>\n