Long time no see! It's been a while since I've last posted something on my blog, and that's been for several reasons, with the bottom line being that I've run out of ideas and haven't really had the time to sit down and think about great blog post ideas.
I'm coming back with a post that's going to be a little shallower than usual, but that I find to be important nonetheless.
If you don't follow me on Twitter, you might have missed the two articles I've written for Smashing Magazine on Flutter for Web and desktop.
Those were introductions and tutorials which didn't mention the current state of Flutter for the Web much, and this post is here to give an overview of just that.
It's split in two parts, each answering a question:
- How hard is it to make it work?
- How well does it work?
How hard is it to make it work?
This section is going to overlap with the first of my Smashing Magazine articles, but just a little bit.
First of all, Flutter Web development is not available on the stable channel, and this means you need to switch to the beta channel. In addition to that, you need to run the
$ flutter config --enable-web
~~~
command to enable Web development, but you probably already knew all of that. Still, I can't really take anything for granted when I'm writing to the whole of the Internet, and I'm already making it hard enough to understand what I'm talking about to people who don't even know what the heck Flutter is, and if that's you I know a book you should read. Ask me about that, or maybe just take a look at [my Twitter @carminezacc](https://twitter.com/carminezacc) or [my blog at carmine.dev](https://carmine.dev).
Anyway, after you've done that the Web browser will become a device Flutter will try to use to debug and you will be able to run `flutter build web` to get a bundle delivered to the `build` folder containing what the browser needs to show your beautiful Web app to your users, in particular your Dart code will be compiled to JS and the `index.html` file will be built based on the `index.html` in the `web` directory, which is the Web equivalent of the `android` and `ios` directories: you can modify it to change the app name and favicon, for example.
One thing you might not know is that Flutter for the Web has another build target: a WASM target using Skia running on WebGL.
# How well does it work?
That build target is as experimental as it gets, and it currently causes some very severe rendering issues on some clients that means it's completely not fit for a production app that's meant to be used on devices that you don't have complete control over.
On the other hand, the Skia target is the one that will usually cause fewer issues overall with the app and will give a more predictable, mobile-like behaviour on the devices it works well on.
Just use the JS target if you need to support any device.
Talking about how well the app works, I also have to mention that the initial loading time can be quite slow, and you may find it unacceptable, so check it out with something simpler before you invest too much time into a project.
Also, `TextField`s sometimes don't get in focus again right away when clicking on them after they go out of focus.
There are some general usability tradeoffs that need to be kept in mind, especially when running the Web app on desktop devices. You won't get a scrollbar from the browser because Flutter handles scrolling itself, so you need to create a scrollbar yourself, perhaps aided by something like the [draggable_scrollbar package on Pub](https://pub.dev/packages/draggable_scrollbar).
Another one is that text isn't even selectable by default. You can use `SelectableText` instead of `Text` to fix that, but the users still won't be able to copy the text so it's not going to cut it for a blog or other text-rich websites.
An easily fixable drawback is the lack of routing. Even named routes don't really cut it if you show content from a database on different pages: everything is still passed under the hood and not through the URL. That's very easily fixable using the [fluro package](https://pub.dev/packages/fluro).
In general, you'll have to think about other differences between mobile apps and websites, for example clicking and dragging has the same effect as tapping and dragging on a mobile device, and Flutter doesn't allow you to handle scrollwheel scrolling events differently than dragging events.
Also, if you use cookies, remember to use the `BrowserClient` and to set [the `withCredentials` option](https://pub.dev/documentation/http/latest/browser_client/BrowserClient/withCredentials.html) to `true`, otherwise they won't be stored for subsequent requests.
# Conclusion
Flutter can be used successfully to build Web apps, but it's still got a few drawbacks. It's up to you to decide whether or not it's a good fit for your next project but, whatever you decide, remember that Flutter is still in very quick development and the situation may get better at any point.
Top comments (2)
I've done some and I'm seeing this - something to JavaScript - for 10+ years now. I'm tired of this reinventing the wheel...
I'd agree with you if Flutter was just a Web framework, but it's trying to do so much more than that. At the moment it's first of all a great and stable native cross-platform mobile framework, and the Web part is really just the latest development, but it's still got a long way to go to be viable for most use cases.