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.

Dartlang home page

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.

main_bloc.dart

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.

main_bloc.dart.

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.

main_bloc.dart. after error fixing.
  • 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.

main.dart / MyHomePage class.

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:

main.dart — changes are highlighted

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:

main_bloc.dart _ — changes are highlighted

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.