Skip to content

building.md

Latest commit

 

History

History
194 lines (141 loc) · 5.33 KB

building.md

File metadata and controls

194 lines (141 loc) · 5.33 KB
title Building a web application with Flutter
description Instructions for creating a Flutter app for the web.
shortTitle Web development

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

Requirements

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

Set up a Flutter project

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

Create a new project

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

$ flutter create my_app

Add web support to an existing project

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.

Run your app

Check out the following sections to run your app.

Run your app from the command line

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

$ flutter run -d chrome

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.

:::note Hot reload on the web As of the Flutter 3.35 release, hot reload is enabled by default on the web. Hot restart is still available as well.

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

Run your app using WebAssembly

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, check out Web renderers.

Disable hot reload in VS Code

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",
      ]
    }
  ]

Disable hot reload from the command line

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

Use hot reload in DartPad

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.

Build your app

See the following sections to build your app.

Build your app from the command line

Run the following command to generate a release build:

$ flutter build web

Build your app using WebAssembly

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

$ flutter build web --wasm

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, visit Build and release a web app. For answers to other common questions, visit the Web FAQ.

Debugging

Use Flutter DevTools for the following tasks:

Use Chrome DevTools for the following tasks:

Testing

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