11 ms·

Flutter for Web feels like such a wild step backwards in terms of functionality that I'm not sure the benefits it brings are worth it. I just tried a few sample

Flutter for Web feels like such a wild step backwards in terms of functionality that I'm not sure the benefits it brings are worth it. I just tried a few samples, and basic interactions like selecting text, saving images, and opening links in new tabs don't work. This is the result of rendering everything to a <canvas> element. I'm much more interested in a React Native style approach, which seems to provide a consistent set of components that work the same on mobile, desktop, and web.

lucasmullens 6y ago
Is that the CanvasKit renderer or the HTML renderer?
- dstaley 6y ago
  I hope it's CanvasKit because if those interactions are also broken in the HTML renderer that's even worse!
  - yjbanov 6y ago
    (disclaimer: I work on the Flutter team) There's no difference between CanvasKit and HTML as far as interactions are concerned. The differences are in pixels and performance. If there are issues with interactions, we'd like to hear about them. Please file issues on Github.
tshaddox 6y ago
Yeah, I haven’t been following Flutter, but I’m surprised their approach to the web is just shipping their entire custom layout/drawing code in WebAssembly and drawing everything with canvas. I would have expected them to actually port their native UI components (buttons, links, text, etc.) to their corresponding native components on the web, and maybe ship a custom layout engine if CSS layouts aren’t flexible enough.
- baybal2 6y ago
  Gtk tried the same with broadway. It went nowhere.
  - agumonkey 6y ago
    Well they made libreoffice run in canvas IIRC, which is quite somewhere :D But yeah it's not grabbing market share that's for sure.
- timsneath 6y ago
  We actually have two distinct approaches: the CanvasKit/WebAssembly approach you mention for high-intensity graphics, and an HTML-based renderer for other apps. This article has more details: https://medium.com/flutter/flutter-web-support-hits-the-stable-milestone-d6b84e83b425 https://medium.com/flutter/flutter-web-support-hits-the-stab... You're right -- we do render the controls, so that existing Flutter code (that might itself include custom styling or matrix transforms) just runs without change or surprise, but we integrate with the underlying browser support for things like text autofill and accessibility.
- Hixie 6y ago
  We actually did try that as our first approach, but it really didn't give you the flexibility that Flutter developers expect. As the erstwhile editor of the HTML standard for ~10 years and the now TL of Flutter I must admit that it's weird to be creating a web framework that completely ignores all the HTML stuff I worked on before. :-) That said, Flutter is different from Flash in some important ways. Flash used the NPAPI to "break out" of the web and was basically "native" code you could escape to, whereas Flutter really is using web APIs, like Wasm, ARIA, WebGL, JS, WebComponents, and so on, to create true web apps that just happen to not use much of the control set that HTML exposes. I suspect that even outside of Flutter, the web in general is going to move towards this kind of framework in the coming years. It just gives you so much more control. It's basically how every other platform works -- pick your language, compile to machine code, don't need to be limited to what HTML and CSS (etc) enable.
  - 6y ago
fwip 6y ago
The example spinner ( hhttps://flutter.dev/#dartpad-landing-page https://flutter.dev/#dartpad-landing-page ) also looks pretty choppy on my Macbook Pro 16. I haven't tried on lower-specced devices, but it doesn't inspire a lot of confidence.
- timsneath 6y ago
  Yeah, that's running in development mode, since it's a scratchpad for live coding. Try something like https://flutterplasma.dev https://flutterplasma.dev for an example of Flutter's web support when compiled in release mode.
  - hobofan 6y ago
    Yeah, that's still not great on a Macbook Air 2014. I'd even say that the spinner at the end looks even choppier.
  - krasin 6y ago
    Thanks for the link. To confirm the point of copying text being broken: try doing that at https://flutterplasma.dev/ https://flutterplasma.dev/ -- it kind of works, but not really, no.
    - renewiltord 6y ago
      Ah fuck me. This is awful. You have to be precisely on the text to select it. I frequently offset my mouse a little to the left of the element to ensure I select the whole text. Even a little bit off to the left and nothing. I love the idea, but this sounds like it's going to be unpleasant for me. Hopefully they figure out these UX things.
      - vincnetas 6y ago
        Yeah, tiny differences that would nag the hell out of me. For example double clicking for selecting word is implemented, but triple clicking to select whole line is not implemented ;(
Spivak 6y ago
I guess it's just the two ways of approaching a problem. Make native look like web or make web look like native. Both are kinda bad. The labyrinthine rats nest of absolute hot garbage to beat a document rendering engine into a windowing toolkit with widgets is horrible. It's a testament to front-end devs that with enough effort you really can squeeze water from a stone. And then imagine being so comfortable navigating that maze that you want your windowing toolkits to behave more like document rendering engines pretending to be windowing toolkits. And you're like "why not just have a windowing toolkit for the web and sites can choose their rendering engine basically so all the SPAs get all the nice features of stack-based GUIs and document people get documents. Surely that would be less work!" And I think you're right but I doubt anyone would agree on a single toolkit so now you can just bundle your own compiled to wasm and rendered to canvas. Woooo.
axegon_ 6y ago
Annoyingly yes. If flutter web behaved like a true web(whether that be through building html elements or through canvas), it would have been a breath of fresh air and for once not a cluttered codebase of 8000 npm modules, html templates and a ditch full of css and no idea of figuring out which is which and which comes from where. I can kind of see a market for it in a sense that I don't want to install a separate app to track my shipment from a specific courier and have a web which is easily accessible on my phone but those are very narrow niches and honestly I can't think of a business that would invest into something like that for nothing more than accessibility. Aside from that I strongly stand by the statement that flutter is the best option for cross-platform mobile apps by a very long shot.
refulgentis 6y ago
Things changed a lot, I observed the same symptoms as late as late 2020, I can't reproduce these issues now In general Flutter for Web is _amazing_ if you want to deploy an app. after seeing this thread, pretty clear to me its almost a perfect nerdsnipe - makes perfect sense if you're already building a Flutter codebase, sounds bonkers if you build web apps.
- dstaley 6y ago
  Check out Flutter Folio [1], built in partnership with Google. Right-click is actually disabled, so you can't even open the "Create account" link in a new tab, nor can I right click an input to autofill with my password manager. You can't inspect any image rendered to the canvas element. Furthermore, you also can't blur the form input (although that's probably application specific rather than Flutter's fault). [1] https://www.flutterfolio.com/#/ https://www.flutterfolio.com/#/?
  - yjbanov 6y ago
    (disclaimer: I work on the Flutter team) The "Create account" link isn't popping up the right-click menu because it doesn't use the Link widget. You'd get the same thing in plain HTML if you used a <div> with a custom click event listener instead of <a>. It's a simple bug to fix; totally up to the app developer. I think issues like that will inevitably pop-up as we have developers coming to the web from other platforms, where "open in new tab" isn't part of the toolkit. Perhaps it's fixable via education and platform-specific guidelines. We're aware of the input blur issue. I think the bug is in the TextEditable. You can write your own, of course, but since we offer it as part of the Flutter framework, it's on us to fix.
    - singhrac 6y ago
      > Perhaps it's fixable via education and platform-specific guidelines. I think this is right, but I also think it should be clear to everyone (i.e. in the first tutorial) that not using a Link widget will make this work wrong for all sorts of accessibility and UX reasons. And the Link widget should work across platforms and implement the equivalent of page history correctly. Maybe it's worth writing down somewhere what the equivalent of each tag from HTML is; what is the canonical way to create an h2, input, textarea, button, a, img, etc.
dhbradshaw 6y ago
They were pretty clear about the intention here: make the web available as a platform for running mobile and desktop-style apps. If you're trying to create a classical website, it's not the right tool. Use html and css. If you're trying to make a rich app, I'd bet on Flutter. I'd be interested in seeing it become easier to make a combination of the two -- flutter apps embedded in classical websites.
- rbinv 6y ago
  > flutter apps embedded in classical websites. Sounds like Java applets.
  - mohaine 6y ago
    Which mostly died from JVM startup time (Think 30 + seconds). There was other issues as well (security and UI issues mostly) but if you knew what you were doing, Java applets were not bad for the time IF the JVM as already loaded.
whymarrh 6y ago
> This is the result of rendering everything to a <canvas> element. If the accessibility story isn't rock-solid, frankly this is a non-starter for a lot of applications. Web apps suck in a lot of ways but regular HTML has pretty great accessibility properties.
- K0nserv 6y ago
  It is far from rock-solid. It's shockingly bad in fact.
rexelhoff 6y ago
Welp. We can kiss accessibility goodbye then, can't we?
- eseidelGoogle 6y ago
  [Flutter Eng. Dir. here] Accessibility is actually a really big deal here on Flutter (Ian Hickson and I both worked on Accessibility in browsers for years). AX is something I feel we've done pretty well with on iOS and Android. Web is still pretty early days, but many AX features should work already. We have more AX work to do on web yet. We've not yet taken any Flutter Web apps through Google's accessibility testing processes similar to how we've done on the mobile side, but I expect we will soon.
  - matchbok 6y ago
    Translation: No. and flutter sucks.
agumonkey 6y ago
Funny how two days ago some webdev website made a big article about flutter vs kotlin but didn't mention the UX side of it at all.
merrvk 6y ago
Yep, I’ve been really impressed with react native on the web so far. Our current code base deploys across Android, iOS, web and windows with minimal effort.

lucasmullens 6y ago

Is that the CanvasKit renderer or the HTML renderer?

dstaley 6y ago
I hope it's CanvasKit because if those interactions are also broken in the HTML renderer that's even worse!
- yjbanov 6y ago
  (disclaimer: I work on the Flutter team) There's no difference between CanvasKit and HTML as far as interactions are concerned. The differences are in pixels and performance. If there are issues with interactions, we'd like to hear about them. Please file issues on Github.

tshaddox 6y ago

Yeah, I haven’t been following Flutter, but I’m surprised their approach to the web is just shipping their entire custom layout/drawing code in WebAssembly and drawing everything with canvas. I would have expected them to actually port their native UI components (buttons, links, text, etc.) to their corresponding native components on the web, and maybe ship a custom layout engine if CSS layouts aren’t flexible enough.

baybal2 6y ago
Gtk tried the same with broadway. It went nowhere.
- agumonkey 6y ago
  Well they made libreoffice run in canvas IIRC, which is quite somewhere :D But yeah it's not grabbing market share that's for sure.
timsneath 6y ago
We actually have two distinct approaches: the CanvasKit/WebAssembly approach you mention for high-intensity graphics, and an HTML-based renderer for other apps. This article has more details: https://medium.com/flutter/flutter-web-support-hits-the-stable-milestone-d6b84e83b425 https://medium.com/flutter/flutter-web-support-hits-the-stab... You're right -- we do render the controls, so that existing Flutter code (that might itself include custom styling or matrix transforms) just runs without change or surprise, but we integrate with the underlying browser support for things like text autofill and accessibility.
Hixie 6y ago
We actually did try that as our first approach, but it really didn't give you the flexibility that Flutter developers expect. As the erstwhile editor of the HTML standard for ~10 years and the now TL of Flutter I must admit that it's weird to be creating a web framework that completely ignores all the HTML stuff I worked on before. :-) That said, Flutter is different from Flash in some important ways. Flash used the NPAPI to "break out" of the web and was basically "native" code you could escape to, whereas Flutter really is using web APIs, like Wasm, ARIA, WebGL, JS, WebComponents, and so on, to create true web apps that just happen to not use much of the control set that HTML exposes. I suspect that even outside of Flutter, the web in general is going to move towards this kind of framework in the coming years. It just gives you so much more control. It's basically how every other platform works -- pick your language, compile to machine code, don't need to be limited to what HTML and CSS (etc) enable.
- 6y ago

fwip 6y ago

The example spinner ( hhttps://flutter.dev/#dartpad-landing-page https://flutter.dev/#dartpad-landing-page ) also looks pretty choppy on my Macbook Pro 16. I haven't tried on lower-specced devices, but it doesn't inspire a lot of confidence.

timsneath 6y ago
Yeah, that's running in development mode, since it's a scratchpad for live coding. Try something like https://flutterplasma.dev https://flutterplasma.dev for an example of Flutter's web support when compiled in release mode.
- hobofan 6y ago
  Yeah, that's still not great on a Macbook Air 2014. I'd even say that the spinner at the end looks even choppier.
- krasin 6y ago
  Thanks for the link. To confirm the point of copying text being broken: try doing that at https://flutterplasma.dev/ https://flutterplasma.dev/ -- it kind of works, but not really, no.
  - renewiltord 6y ago
    Ah fuck me. This is awful. You have to be precisely on the text to select it. I frequently offset my mouse a little to the left of the element to ensure I select the whole text. Even a little bit off to the left and nothing. I love the idea, but this sounds like it's going to be unpleasant for me. Hopefully they figure out these UX things.
    - vincnetas 6y ago
      Yeah, tiny differences that would nag the hell out of me. For example double clicking for selecting word is implemented, but triple clicking to select whole line is not implemented ;(

Spivak 6y ago

I guess it's just the two ways of approaching a problem. Make native look like web or make web look like native. Both are kinda bad. The labyrinthine rats nest of absolute hot garbage to beat a document rendering engine into a windowing toolkit with widgets is horrible. It's a testament to front-end devs that with enough effort you really can squeeze water from a stone. And then imagine being so comfortable navigating that maze that you want your windowing toolkits to behave more like document rendering engines pretending to be windowing toolkits. And you're like "why not just have a windowing toolkit for the web and sites can choose their rendering engine basically so all the SPAs get all the nice features of stack-based GUIs and document people get documents. Surely that would be less work!" And I think you're right but I doubt anyone would agree on a single toolkit so now you can just bundle your own compiled to wasm and rendered to canvas. Woooo.

axegon_ 6y ago

Annoyingly yes. If flutter web behaved like a true web(whether that be through building html elements or through canvas), it would have been a breath of fresh air and for once not a cluttered codebase of 8000 npm modules, html templates and a ditch full of css and no idea of figuring out which is which and which comes from where. I can kind of see a market for it in a sense that I don't want to install a separate app to track my shipment from a specific courier and have a web which is easily accessible on my phone but those are very narrow niches and honestly I can't think of a business that would invest into something like that for nothing more than accessibility. Aside from that I strongly stand by the statement that flutter is the best option for cross-platform mobile apps by a very long shot.

refulgentis 6y ago

Things changed a lot, I observed the same symptoms as late as late 2020, I can't reproduce these issues now In general Flutter for Web is _amazing_ if you want to deploy an app. after seeing this thread, pretty clear to me its almost a perfect nerdsnipe - makes perfect sense if you're already building a Flutter codebase, sounds bonkers if you build web apps.

dstaley 6y ago
Check out Flutter Folio [1], built in partnership with Google. Right-click is actually disabled, so you can't even open the "Create account" link in a new tab, nor can I right click an input to autofill with my password manager. You can't inspect any image rendered to the canvas element. Furthermore, you also can't blur the form input (although that's probably application specific rather than Flutter's fault). [1] https://www.flutterfolio.com/#/ https://www.flutterfolio.com/#/?
- yjbanov 6y ago
  (disclaimer: I work on the Flutter team) The "Create account" link isn't popping up the right-click menu because it doesn't use the Link widget. You'd get the same thing in plain HTML if you used a <div> with a custom click event listener instead of <a>. It's a simple bug to fix; totally up to the app developer. I think issues like that will inevitably pop-up as we have developers coming to the web from other platforms, where "open in new tab" isn't part of the toolkit. Perhaps it's fixable via education and platform-specific guidelines. We're aware of the input blur issue. I think the bug is in the TextEditable. You can write your own, of course, but since we offer it as part of the Flutter framework, it's on us to fix.
  - singhrac 6y ago
    > Perhaps it's fixable via education and platform-specific guidelines. I think this is right, but I also think it should be clear to everyone (i.e. in the first tutorial) that not using a Link widget will make this work wrong for all sorts of accessibility and UX reasons. And the Link widget should work across platforms and implement the equivalent of page history correctly. Maybe it's worth writing down somewhere what the equivalent of each tag from HTML is; what is the canonical way to create an h2, input, textarea, button, a, img, etc.

dhbradshaw 6y ago

They were pretty clear about the intention here: make the web available as a platform for running mobile and desktop-style apps. If you're trying to create a classical website, it's not the right tool. Use html and css. If you're trying to make a rich app, I'd bet on Flutter. I'd be interested in seeing it become easier to make a combination of the two -- flutter apps embedded in classical websites.

rbinv 6y ago
> flutter apps embedded in classical websites. Sounds like Java applets.
- mohaine 6y ago
  Which mostly died from JVM startup time (Think 30 + seconds). There was other issues as well (security and UI issues mostly) but if you knew what you were doing, Java applets were not bad for the time IF the JVM as already loaded.

whymarrh 6y ago

> This is the result of rendering everything to a <canvas> element. If the accessibility story isn't rock-solid, frankly this is a non-starter for a lot of applications. Web apps suck in a lot of ways but regular HTML has pretty great accessibility properties.

K0nserv 6y ago
It is far from rock-solid. It's shockingly bad in fact.

rexelhoff 6y ago

Welp. We can kiss accessibility goodbye then, can't we?

eseidelGoogle 6y ago
[Flutter Eng. Dir. here] Accessibility is actually a really big deal here on Flutter (Ian Hickson and I both worked on Accessibility in browsers for years). AX is something I feel we've done pretty well with on iOS and Android. Web is still pretty early days, but many AX features should work already. We have more AX work to do on web yet. We've not yet taken any Flutter Web apps through Google's accessibility testing processes similar to how we've done on the mobile side, but I expect we will soon.
- matchbok 6y ago
  Translation: No. and flutter sucks.

agumonkey 6y ago

Funny how two days ago some webdev website made a big article about flutter vs kotlin but didn't mention the UX side of it at all.

merrvk 6y ago

Yep, I’ve been really impressed with react native on the web so far. Our current code base deploys across Android, iOS, web and windows with minimal effort.