Flutter Live preview

[d-silveira]

Hi everyone,

I was reading about Android jetpack compose and iOS swift UI, and thinking that flutter is falling a little behind on it's lead of developer experience.

IMHO We need to quickly supply developers a live preview of the widget they are working on. It shouldn't be that hard if dartpad and codepen do it, since vscode is basically a web browser itself.

I feel it would greatly improve developer experience, since you wouldn't need to either:

1. spawn an emulator, with all the additional RAM and CPU it consumes wait for it to come online, and then wait for that long initial build;
2. connect an external device and wait for that long initial build, and have the device suck the battery out of your laptop, or have to do it all over again; all this just to check if the widget you're working on looks like what you expected.

Thanks, Best Regards, d-silveira

[DanTup]

It shouldn't be that hard if dartpad and codepen do it, since vscode is basically a web browser itself.

A preview of the specific widget you're working on is a bit trickier than rendering a full app. For Dartpad (and presumably CodePen), they just run the app using the main method, so what you get is your full app.

To render a specific widget we'd need to create an instance of it (which might not be easy if it has required constructor params) and if it relies on other infrastructure (for example a Scaffold or other dependencies) it might fail to work. This might mean you'd need to implement a special constructor specifically for the preview.

It's definitely something that would be great to provide though - and I've seen some projects that have already started exploring this (for example https://twitter.com/JamesBlasco/status/1280168057185415168)! 🙂

[jamesblasco]

I agree with you that a Live Preview would bring a lot of benefits for building UI with Flutter. I am hopeful that once Flutter web reaches stable this is considered But right now it is not possible to use by people working on the Flutter stable version and it misses hot reload, what I consider needed for live preview.

For the moment I am experimenting with my own idea based on how SwiftUI preview works. You can launch it in any device supported by Flutter, but the best user experience right now is with Mac/Windows/Linux. I am working to embedded inside vscode too. https://github.com/jamesblasco/flutter_preview

[EnesKaraosman]

Is there any update for this feature request. Does it exist in the roadmap? @DanTup

[adifyr]

This feature would be great. I can't tell you how many times I've wanted to build a specific component and test out how it looks without committing to a full app run. It's just painful.