How To Enable Hot Reload For Flutter Web

Introduction

Mobile apps already benefit from it. Next in line is Flutter web. So here is how to enable hot reload for Flutter web apps!

Debugging web apps has always been a little painful for me. Imagine you have multiple menus and nested screens. Any change resulted in a hot restart and you had to navigate to the previous screen again to see if the changes were applied. But things are about to get better!

Recently, the Flutter team added hot reload capabilities for the web platform. In Flutter 3.32, it is not enabled by default. You have to manually set a flag when running the app.

Run the app from the command line:

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

Or adjust your launch.json config file in VS Code by changing the args value:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "xxx",
            "request": "launch",
            "type": "dart",
            "args": ["--web-experimental-hot-reload"]
        },
        {
            "name": "xxx (profile mode)",
            "request": "launch",
            "type": "dart",
            "flutterMode": "profile",
            "args": ["--web-experimental-hot-reload"]
        },
        {
            "name": "xxx (release mode)",
            "request": "launch",
            "type": "dart",
            "flutterMode": "release",
            "args": ["--web-experimental-hot-reload"]
        }
    ]
}

Changes are visible immediately and the need for a hot restart is gone for 99% of use cases!

Drawback

I found one small little problem with this feature. I usually develop on Windows and Microsoft Edge is my main debugging browser. However, hot reload does not work in this case. The debugging bar doesn’t show the hot reload symbol (yellow flash).

With Google Chrome, everything works as promised. The button is available and the feature behaves as you would expect it to do.

Conclusion

In this article, I showed you how to enable hot reload in Flutter web apps. It makes your development experience more seamless.

Related articles

How To Set Up A Free Repository For Your Flutter Packages

Here is how to set up a free repository for your Flutter packages with Cloudsmith in no time! Learn how to create an account, set up a repository, upload packages, and consume them in your Flutter apps!

How To Debug Firebase Analytics Events From A Flutter Web App

The Firebase Analytics Debug View is a handy tool to check what events your app sends in real time. However, it requires a bit of setup to work from a Flutter web app. Here is how to use the Firebase Analytics Debug View with a Flutter web app.

How To Download Files With The web Package In Flutter Apps

With Dart 3.7, you need to make some changes to your code and move away from dart:html. Here is how you can adapt your code with an example.