My experience with Flutter on Web

Have you heard of Flutter? The next Big Thing? Or the UI framework that’s built for the Fuchsia OS, the OS that is going to replace Android? I was skeptical because of all these marketing push. However, I was recently persuaded to give Flutter a second look and I was glad I did just that.

This article briefly talked about my experience in building my first Flutter application on the Web. Why web? Because it’s still the easiest to deploy and the most relevant to my professional work. Notice that Flutter on the Web is still in Beta. So, whatever limitation is expressed here may be resolved in the near future.

Ease of Development

One of Flutter’s primary goals is to make cross platform application development super easy. I would say with some caveats that they have achieved that. Here are a list of thing I like.

Dart

The Dart programming language is easy to pick up. A good language needs to balance among simplicity, functionality, and consistency. Personally, I find that Dart strikes a good balance for a general purpose application. To name a few interesting features:

1. Top level functions. Dart allows you to create top level functions without enclosing them to an artificial class if you don’t want to.
2. constantness. Dart has the concept of constants that works very much like C++.
3. Extension. Dart allows developers to extend classes, even built in ones. A good example is this crazy easy to use I18N extension.
4. null aware operators. These operators allow you to navigate object structure without all the if statements. Read this articles for details.

Flutter Framework

The Flutter Framework is mostly consistent across the board. You only need to grasp a few key concepts to become productive.

Widget

The most important concept is that a Flutter application comprises of a single widget hierarchy. If you want to add some functionality to a widget, say, gesture detection, enclose it with a GestureDetector widget. Want to draw inside your container? Enclose it with a CustomPaint widget. Once you have acquired the basic knowledge of the framework, it is easy to extrapolate.

Stateful vs Stateless

Another concept is the difference between a Stateless widget and a Stateful widget. If you have done React programming, you will feel right at home. A Stateless widget has no state and never changes. On the other hand, a Stateful widget manages state by way of the setState function. Every time the setState function is invoked, the UI is scheduled to be updated in the next frame. Flutter is smart enough to only refresh the dirty widgets.

Layout

Perhaps the hardest part of all UI development is the layout. In Flutter’s case, you need to learn a few special widgets (there are more but these are the essentials):

1. Container. A container is like a div . It provides padding, constraints, and even transformation to its child.
2. Row and Column. Row aligns its children along the horizontal axis (its main axis) while column aligns its children along the vertical axis (again, that’s its main axis). The key attributes are mainAxisAlignment and crossAxisAlignment .
3. SizedBox. Inside a Row widget or a Column widget, you can use a SizedBox widget to control the spacing between two widgets.
4. Expanded. The Expanded widget tells the layout engine that its child should take up any remaining space inside a Row or a Column.
5. GridView. The GridView widget shows its children in a grid.
6. ListView. A simple widget to display items in a list.

IDE

This has been raved many times. Flutter’s integration with an IDE is simply amazing. Compilation is fast in general. With hot reload, changes are reflected immediately on the screen.

But what about the Web?

Here’s where my caveat lies. Although there is a whole lot of differences in the language and the framework when it comes to cross platform development, there are runtime differences on the web that should not be overlooked.

With a Flutter application, the framework controls every single pixel on the screen. All controls are drawn careful to mimic the native ones and behaviors are recreated as close to the native behavior as possible. In a web application, Flutter makes use of an HTML5 canvas to do just that.

Web Support for Flutter (https://flutter.dev/web)

Unfortunately, using a canvas as your application’s backdrop means that you lose a few standard web behaviors, e.g.:

1. text selection across widgets does not works.
2. Embedding a Flutter application inside an existing web application is hard. The only supported mechanism is through an iframe .

I am afraid that these two differences are going to turn away many potential web developers.

The first one means that you cannot create a regular web application using Flutter. Web users come to expect that text selection should work across widgets on any web page. Since Fluter Web is still in Beta, it is possible this might get fixed in the near future.

The second one means that you cannot easily replace part of your existing web application with Flutter. Imagine the headaches of having these iframe around and trying to make them talk to each other.

Conclusions

I have to admit that Flutter/Dart provides one of the most enjoyable programming experience I have had in years. The Dart language is easy to use and the Flutter framework is consistent and well thought through.

My caveat is that on the web, it does not produce a traditional web application and that can throw your users off.

I hope this article will encourage you to give Flutter a try. My advice for any new Flutter developer are:

1. Don’t be afraid to try. Dart borrows features from different languages. You will easily find familiarity with it.
2. Flutter documentation is well written, make good use of it.
3. From time to time, check out the Boring Flutter Development Show on YouTube. I have learnt a lot from it. As with anything, you learn more when you also practice at the same time.