Enable "hot reload" (not just "hot restart") for Flutter Web

[jakobwgnr]

Latest update: #53041 (comment)

---

Hello!
Trying the web development currently in beta version. actually quite satisfied as the browser reloads very quick. Only annoying thing is that the hot restart doesn't work properly, imho.
Please check on this.
Best Regards,
Jakob
P.S.: Hope this is enough information - First time opening an issue here :)

Steps to Reproduce

1. Setup flutter project for web development
2. Run flutter run -d Chrome
3. Navigate to a view != main view
4. hot restart (small 'r') without browser refresh (like it should do with capital 'R')

Expected results:
Browser should reload, but stay on the same view

Actual results:
Browser fully restarts the app --> Again at the main view

[jakobwgnr]

not 100% sure if this is a similar issue like #50517, though...

[jonahwilliams]

Do you mean the entire browser is doing a hard refresh? or that it is doing a hot restart?

See https://flutter.dev/docs/development/platform-integration/web#does-hot-reload-work-with-a-web-app

[jakobwgnr]

Hi @jonahwilliams
it does a hot restart, what I wanted to have is hot reload... I was quite confused on how this is explained in the CLI.

So the simple "No." in the FAQ is actually the answer for my problem.

May I turn this into a feature-request either to:
support hot reload for web (preferred)
OR
to add an info in the CLI for web that 'r' and 'R' are actually doing the same, as this is not the case right now.

[iapicca]

#50517

[yjbanov]

The full stateful hot-reload is not yet supported on the web. The app's state is lost between hot restarts. The reason you end up on another route could be a navigator bug. /cc @mdebbar

[mdebbar]

I see no mention of routes or urls in the issue.

Like @yjbanov said, we don't yet support stateful hot reload on the web. We only do hot restart (which loses state as you described), but we do keep url. Try using a Navigator with named routes. Once you navigate to a named route, you can do a hot restart and you'll stay on the same page.

[mdebbar]

I'm sure there's an issue for hot reload somewhere that @jonahwilliams might know.

[yjbanov]

I see no mention of routes or urls in the issue.

I assumed "view" was referring to route, and that we may have a bug where upon page reload we throw the app back to the root route:

Expected results:
Browser should reload, but stay on the same view

Actual results:
Browser fully restarts the app --> Again at the main view

[mdebbar]

I assumed "view" was referring to route

That's possible.

I tried hot restart in the flutter gallery and it worked fine. @jakobwgnr if you are using named routes and are losing the url state when you do a hot restart or reload, please share your app code so I can take a look and debug it.

[jakobwgnr]

Hello!
I have recreated the route-Setup we are using in our app in a small sample project & I couldn't recreate that issue there as well --> https://github.com/jakobwgnr/flutter_web_reload_issue

We're using the Provider package in our app with StreamProvider.. maybe because of that?!

Try to figure out how to provide our app code in the meantime

[andcea]

We've recently started working on a project with Flutter Web but we were unaware that it doesn't support Hot Reload. I guess we took it for granted as it's such a fundamental feature in flutter. This makes it much harder to develop as we rely on the state and we might have to switch to a different framework.

Do you have an issue for this feature? What's the timeline and priority for implementing Hot Reload for web?

[gustav3d]

I agree, the current situation sucks. BIGTIME. But it used to support hot reload in the web too. It got removed. It makes my life much harder now:(

…

On Tuesday, 26 May 2020, Andrei Ceaus ***@***.***> wrote: We've recently started working on a project with Flutter Web but we were unaware that it doesn't support Hot Reload. I guess we took it for granted as it's such a fundamental feature in flutter. This makes it much harder to develop as we rely on the state and we might have to switch to a different framework. Do you have an issue for this feature? What's the timeline and priority for implementing Hot Reload for web? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#53041 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABCY4KWC3NYNPXZ54VFPE3RTQKLVANCNFSM4LRHEWRA> .

[jonahwilliams]

We've never supported hot reload for the web. Nothing was removed.

[gustav3d]

It did exist anyhow. Until you stated that its not supported. I would not had started to use Flutter for web otherwise. And now im stuck, cause my project gone too far :( Its pretty bad of you to make such a decission that totaly cripples the web platform.

…

On Wednesday, 27 May 2020, Jonah Williams ***@***.***> wrote: We've never supported hot reload for the web. Nothing was removed. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#53041 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABCY4JWDXNKTYXNQPU3H7DRTSNHHANCNFSM4LRHEWRA> .

[BrutalCoding]

I had recently developed a Flutter app for a client, and looking at the time I had it made sense to start off with Flutter Web first to gather quick feedback.

From my perspective, Flutter Web made sense because the other platforms had issues, for my particular project, such as:

• Mobile: The process of preparing for the Play Store / App Store takes quite a bit of time (e.g. all the required metadata, signed versions, build times), and even Firebase App Distribution (no auto-update out of the box) or TestFlight isn't as easy as just deploying web -> Refresh website.
• Desktop: Great for development, but not an option for this client and his customers. Target audience is mostly using their mobile phones and very few on desktop (Mac/Windows). Also, again, not as easy as visiting a URL to get started straight away.

I certainly wish Flutter Web had hot reload, would've saved me many hours of frustration due to lost state. It's all solvable if you cache the data and would implement a robust routing solution but nonetheless it's a less enjoyable experience to develop with than the other platforms. Obviously there are more issues with Flutter Web but the advantages could've outweighed the disadvantages if it wasn't for the poor dev experience.

@amyork1990

About 60% of my projects are Web only. However, about a quarter or more of my those clients come back to have a mobile application developed at a later time. Taking that into account, developing Web projects in Flutter ends up saving me a large amount of time when needing to build a mobile app later.

I don't want to downplay your comment though - over the last couple of months, I have seen many developers migrate away from Flutter when they want to develop Web projects, and understandably so. With that said, I guarantee most would choose Flutter over anything else if hot reload was an option.

Speaking of which, is hot reload supported on Flutter desktop applications? If so, I'm sure there are some nuances, but perhaps Web developers could (for the most part) develop their web app as as a desktop app, where they can utilize the hot reload function? Or is there possibly an Android virtual machine that has a large display size, where we can use the hot-reload feature there? For Android, the only downside is that you will have to pay attention to permissions, even though you aren't really developing for that platform (or maybe you are in the future lol).

Flutter for desktop supports hot reload and I stand back behind your suggestion of using desktop first to iterate during development much faster.

The way how I've done it in my last web project was also by using web initially during development but hot reload was such a big missing deal for me that I moved over to Desktop frequently during development. Fixing bugs or basically making any changes, testing it on Desktop (Mac) and sometimes making the assumption it would work on Web too is dangerous. These were often minor changes, not complex features. Lesson learned, "Assumptions are the mother of all ...".

@twoco

Let's stay respectful and constructive. Even if that can be frustrating. To be honest, e.g. Angular also hard/full reloads the page. And even with HMR it can be annoying. But it stays on current route depending on set URL. Not sure if Flutter stays on route, when using Named Routes. Did someone tested it? However, I see in docs that this is not the recommended routing for most applications. See limitations. I've used Navigator.push(MaterialPageRoute) so far. I'm not yet experienced enough. Anyway... It would be great to have the same Hot Reload as on other devices. I am not sure if this is just not possible due to technical reasons. ...

I've used auto_route on Web, but go_router would work too, and yes, it stays on the same URL. But the fact that you lose state means you have to cache more than what you're used to on the other platforms.

For example, let's assume you developed 2 pages:

1. /products/overview
2. /products/overview/detail
   (Flow: Going from page 1 to page 2)

Page 2 knows what to display because you're sharing some kind of state (thus is stored in memory), this could be the whole product object or just the product id.

When you hot reload, all states are gone. So you're basically a logged out user, visiting /products/overview/detail, and you've got no product id to work with. If you got route guards like me, you might even block the user from accessing that page because the app requires signing in first.

The solution for the product id could be by having your URL's contain data e.g. /detail?pid=123 or /detail/123, so you can fetch fresh data, or you could use a caching method. To stay logged in, caching it would be the way to go (+ validating it). firebase_auth does this for example (works on Web too).

[bdloser404]

i am using vim plug "coc-flutter" with autocmd for HotRefresh on bufferPost.

and its working great.

[Andrewcpu]

Where can I start to look to contribute to Flutter + add stateful hot reload?

[hyungtaecf]

I wonder if, with the advent of WebAssembly (Wasm) support for Flutter Web, this couldn't be more easily achievable because it wouldn't depend entirely on JavaScript.

Another idea would be running the debug app like an emulator on top of a JavaScript version of the Dart VM.

[IchordeDionysos]

@tomasweigenast just want to point toward the Flutter roadmap for 2024: https://github.com/flutter/flutter/wiki/Roadmap
It's listed there as the last item with "plan to resume work".

Roadmaps can change, but it seems like we can carefully hope for some progress this year (if everything goes well).
Feel free to react instead of responding to not spam this issue 😌

[sigmundch]

Indeed - it's part of the Dart web team plans to dive into hot reload support. It's a long road ahead and we are just getting started, so we don't have much to share at this time. We'll be tracking our efforts in dart-lang/sdk#54934.

[Hixie]

Please see https://github.com/flutter/flutter/wiki/Issue-hygiene#escalating-an-issue-that-has-the-wrong-priority.