Hot reload on the web with the latest Flutter beta

Help General
1

@kevmoo is taking his time to post this here, so I’ll jump the gun:

https://www.reddit.com/r/FlutterDev/comments/1jedakr/try_out_hot_reload_on_the_web_with_the_latest/

Quote:

Web support for hot reload is the #2 most voted issue on the Flutter tracker. With today’s release of Flutter 3.31 beta, we’re excited to give you a chance to try it out on your own projects! We want your help to make sure this exciting new feature has everything developers want from it.

This preview is only available in the beta and main Flutter channels. (Here are the instructions to switch channels.) If the preview goes well, we are optimistic the feature will ship as part of the next stable Flutter release.

If you discover any issues we ask that you file a bug using our new Web Hot Reload issue template. Note this is in the Dart SDK repository where it will be easier for us to track issues. Known issues can be seen in the associated GitHub project. Now the fun part: how to use the feature.

We’ve added a simple command line flag --web-experimental-hot-reload that you can pass to Flutter anywhere you invoke run.

Running from VS Code:

If you use debug configurations in VS Code, you can add this extra configuration to your launch.json file:

"configurations": [
  ...
  {
    "name": "Flutter for web (hot reloadable)",
    "type": "dart",
    "request": "launch",
    "program": "lib/main.dart",
    "args": [
      "-d",
      "chrome",
      "--web-experimental-hot-reload",
    ]
  }
]

For best results, we recommend enabling the “Dart: Flutter Hot Reload On Save” setting in VS Code. A hot reload can also be triggered via the :zap:icon in the Run/Debug panel. Hot restarts can still be triggered via the ⟳ button.

Running from the command line:

If you use flutter run on the command line, you can now run hot reload on the web with

flutter run -d chrome --web-experimental-hot-reload

When hot reload is enabled, you can reload your application by pressing “r” in the running terminal, or “R” to hot restart.

Reloading in DartPad:

Hot reload is also enabled in the main channel of DartPad via a new “Reload” button. The feature is only available if Flutter is detected in the running application. You can begin a hot reloadable session by selecting a sample app provided by DartPad and selecting the beta or main channel in the bottom right.

Thanks for taking the time to help us make Hot Reload on the Web amazing!

12 Likes
2

I was getting to it! I have meetings, you know! :stuck_out_tongue:

9 Likes
3

I must say, this is a big deal for me. One thing I used to love about web development (even web app development, for what passed as apps back in the day) was the immediacy. I remember using some old-forgotten CSS editor and just writing rules and seeing the page change in real time.

Then, things got more and more complicated,[1] to the point of having to run multiple build systems and local servers at once just to see things change almost-in-real-time.

Now, I hope that, for a subset of my web projects, I’ll be able to get into the same flow again. It’ll never be the barebones simplicity of editing raw javascript again but — to be honest — I don’t think I miss that.

Anyway. Fingers crossed.

  1. Often for good reason! ↩︎

3 Likes