Flutter and Web Code Sharing. A State Management demo
Introduction
Dart helps you craft beautiful, high-quality experiences across all screens
This what you read on the home page of https://www.dartlang.org/ .
Next to it in the same page, the Dart team choose to impress new visitors by a demo example to compute π using the Monte Carlo method with pure Dart.
In this short article I try to impress you by the amount of logic code you can share between flutter and web and I will demonstrate to you how easy is state management in flutter. I will go through the steps to FLUTTERIZE this demo example highlighting the logic code sharing between these two platforms.
Logic part (BloC):
1- Create main_bloc.dart file and open an empty MainBloc class that extends the BloCSetting class.
If you don’t understand what BlocSetting class is, do no worry I will explain it later in this article.
2- Just copy and past the code form the DartPad (code here) inside your MainBloc class. Obviously you have to put the Point class outside.
As you can see the dart compiler underlines the errors. querySelector and window belong to the html package which we don’t need.
In the picture above I highlighted what I am going to modify to fix the errors.
3- What exactly the code does? I don’t know and I don’t care, all I know is that there are errors that I have to fix.
- first I renamed the main() method. I chose to name it init() because I intend to call it form the initState() in the UI;
- I replaced the “var output = querySelector(#output)” by a String variable “ouput” with an initial value of “?”;
- for “await window.animationFrame”, I couldn’t come with a flutter exact equivalent. From rapid google research, suggestion are to use scheduleFrameCallback or Ticker. But any way, I chose to add a delay of 20 milliseconds which is equivalent to 50 Hertz (fps).
That’s it, these are all the changes in the logic to make it compatible with flutter. As you can see we don’t even know about the UI part of our app.This is the real separation of concerns .
Presentation part (UI):
There is nothing special for the UI part. A Scaffold with MyHomePage() in the body property.
That’s it, supper easy.
If you are asking how to make this app reactive, this is a sign that you haven’t read my two articles about state managements yet.
Adding reactivity:
In the UI do the following changes:
wrap the widget you want to be reactive inside stateBuilder. In the initState property call the init method with “state” as parameter.
in the logic part do the following changes:
now the app is reactive.
If you want to understand what happens please read my second article (here), and If you want to know how does it work please read my first article (here).
Conclusion
From more than 30 lines of code, I changed only four and the result is as expected. This wouldn’t be possible with the other state management techniques. I hope I answered the question of those asking about asynchronous control of the UI. As I said in the comments of my previous article: I can use Futures without FutureBuilder and Streams without StreamBuilder.
