Flutter Heroes

New post on /r/flutterdev subreddit:

Let's talk about Flutter Web...
Over the weekend I've ported a small-ish survey app from React to Flutter Web. It uses firebase authentication and firestore. It has routing and handles recurring users. Lots of metadata is recorded. There's lists and grids and a bit of state. I'd say it's enough code to get a decent exposure to flutter web. Here's my impressions.This post will be a bit of a rant. So let me preface it with this: I enjoy developing with Flutter and Dart. For mobile apps, it's by far my favorite framework. I'm intrigued by Flutter Web and I want to see it succeed.
After the announcement of Flutter 2.0, and the "stable" support for web, I've already voiced my concerns: The flutter web gallery has a horrible lighthouse score and is a not at all a smooth experience. But I thought I should probably give it a fair try.Let's start with tooling. The one big selling point of flutter is stateful hot reload. This is not available in the web version. I understand that hot reloading is a feature of the dart VM, which is hard to emulate on the web. But if you look at React and Vue, they do offer some extent of hot reloading. For example, it's possible to edit the style of an App without losing it's state. And with Vue, you can get something very close to flutters stateful hot reloading.
In the end I found myself developing in an emulator and then trying the web build from time to time.
Starting the debug process (in chrome) takes incredibly long and is very buggy. A handful of times the debugger just didn't open. About three times it just randomly disconnected.
The devtools don't seem ready for the web. The widget inspector for example shows markup, instead of a visualization of the widgets. Often it's not possible to refresh it, when the content on screen changes.The bundle size is gigantic. Even hosted locally, the app takes a few seconds to load. I'm not sure to what extent this could be improved by manual optimization. I'm talking about the code produced by futter build web, not some debug version. Also, I'm using the null-safe sdk.
The lighthouse score shows absolutely crazy numbers. Something like 40s til interactive. This doesn't seem so far fetched. If I throttle the network speed in the developer tools, the app does indeed take very very long to load.The performance of the UI is a problem. Page transition animations between routes flicker and stutter. Sometimes the new route is fully loaded then you get a very short flicker of the old screen. This is not a custom animation, it's just a MaterialApp and the built-in Navigator. Sometimes the navigation to a new route takes a second to be done, sometimes it triggers immediately. Again, I'm not doing anything fancy here. It's a button that pushes a new Route to the navigator when it's clicked.
Animations in general are not smooth, for example when clicking an ElevatedButton.
To get an objective measure here, I'm using the performance tab in the Firefox devtools. I'm starting to record, then click on a button. The fps immediately drop from 60 to 9. Just from clicking a button, nothing else. The button animation stutters and flickers.
In general, performance on Firefox is much much worse than on Chrome.The "feel" of the UI is somehow off. SelectableText for example does not feel like normal text.
By far the worst part is scrolling. The speed at which a flutter web app scrolls is completely different from other apps.In the end I feel very unconvinced by flutter on the web. The UI has severe performance issues and some outright bugs.This is the flutter subreddit. So I guess the people reading this are probably flutter fans :)
Well, so am I.
I really want to use this and as soon as it becomes viable, I'll happily ditch react, preact and vue for it.
But currently it just doesn't look ready to me.
What do you think, what are your experiences?
Any tips and tricks ?

March 09, 2021 at 08:30PM by mintwurm
https://ift.tt/2OFNJUh

Let's talk about Flutter Web...

Over the weekend I've ported a small-ish survey app from React to Flutter Web. It uses firebase authentication and firestore. It has routing and...

697 views20:16