$ 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.