This page provides an overview of how to configure, run, and build a web application using Flutter.

Before you can build a web application with Flutter, make sure that you have the Flutter SDK and a web browser installed. See the Set up web development for Flutter instructions for details.

To set up your project, you can create a new Flutter project or add web support to an existing project.

To create a new app that includes web support, run the following command:

If you already have a project, run the flutter create command in your project directory:

flutter create . --platforms web

This creates a web/ directory containing the web assets used to bootstrap and run your Flutter app.

See the following sections to run your app.

Select Chrome as your app's target device to run and debug a Flutter web app:

You can also choose Chrome as a target device in your IDE.

If you prefer, you can use the edge device type on Windows, or use web-server to navigate to a local URL in the browser of your choice.

You can pass the --wasm flag to run your app using WebAssembly:

flutter run -d chrome --wasm

Flutter web offers multiple build modes and renderers. For more information, see Web renderers.

To temporarily disable hot reload support from VS Code, update your launch.json file file with the flag --no-web-experimental-hot-reload.

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

If you use flutter run from the command line, you can temporarily disable hot reload on the web with the following command:

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

Hot reload is also enabled in DartPad with 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.

See the following sections to build your app.

Run the following command to generate a release build:

You can also pass the --wasm flag to build your app using WebAssembly:

This populates a build/web directory with built files, including an assets directory, which need to be served together.

To learn more about how to deploy these assets to the web, see Build and release a web app. For answers to other common questions, see the Web FAQ.

Use Flutter DevTools for the following tasks:

• Debugging
• Logging
• Running Flutter inspector

Use Chrome DevTools for the following tasks:

• Generating event timeline
• Analyzing performance—make sure to use a profile build

Use widget tests or integration tests. To learn more about running integration tests in a browser, see the Integration testing page.