I recently explored the possibility of using Flutter to develop a web app for a client. You might ask why I was considering Flutter since this client really only needed a web app developed and didn’t need the cross-platform support Flutter is known for. But I was considering it for a different reason – I had used it recently for some mobile development and was impressed by its fantastic developer experience. In particular it:
Uses the Dart programming language which is sane compared to JS (statically typed, no weird historical quirks)
Includes an extensive standard library
Includes fully functioning Material UI components
Provides an SDK with very nice tooling, like a built in package manager, code formatter, linter and build system
In contrast to typical frontend web development there is no mess choosing and setting up 10 tools and libraries and dealing with their quirks, complexities and compatibility issues. With Flutter, everything just works out of the box.
Despite all this, after some analysis I concluded that Flutter still has some problems on web which I considered showstoppers for this project:
Problem 1: Performance
Performance for web just isn’t there yet. I say this after testing both the CanvasKit and the new wasm support. A couple of examples you can test at home are the Wondrous App and the Yaru widgets (try scrolling the section YaruIcons on this). While both these apps work reasonably well on high end computers, there is noticable lag – especially when scrolling – on slower devices. Responsive UI is super important to delivering a product that feels high quality.
This is an area where HTML/CSS/JS excel after the many, many years of optimizations in browser rendering. It’s amazing how smooth and performant scrolling is on web pages, even crappy ones that have hundreds of unoptimized HTML elements and even when running on outdated hardware. It will take some time for Flutter (and other upcoming platforms that rely on their own rendering in the browser) to catch up.
Problem 2: Lack of Desktop Components
Prebuilt UI components dramatically speed up development, so it’s important to have suitable libraries available. The Material UI components shipped with Flutter are great for mobile, but are not great for desktop development. I consider this a problem with Material more generally. You might argue that Google has made Material work for all its desktop properties, but they actually need to stray pretty far from the prebuilt Material components to do this well. For example, there are no prebuilt Material components for the toolbar and menus in Google docs – things which are super common in desktop apps.
The options outside of material, for desktop development, are scarce. A couple of other options I found which were nice, but not-quite-there:
The Ubuntu desktop components implemented in Flutter (since Ubuntu is using Flutter for some desktop apps now)
The Stockholm components
These libraries are either lacking in certain important components, aren’t very customizable or still feel clunky on the web. For example, neither of these provides text fields which feel quite right, with selection behaviors differing slightly from native.
Problem 3: Uncertainty around Google’s investment
Flutter is open source but the project is still controlled by Google. Google’s recent layoffs have raised questions about their continued investment in various projects like Flutter. While I have confidence that there is enough momentum behind Flutter mobile that its support will live on for a long time, I don’t have the same confidence for the web target. I could see it being deprioritized, especially if it does not serve Google’s needs. It gives me encouragement that someone like Ian Hickson (one of the original devs behind HTML5) has left Google but continues to work on Flutter. But making a bet on a technology that still has some fundamental issues is the wrong thing to do for a paying client.
Flutter is still an amazing platform and I hope web support continues to improve to the point where it can be a viable alternative to the HTML/CSS/JS ecosystem mess for more apps.
