Building a web application with Flutter

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:

flutter create my_app

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.

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.

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.

Run the following command to generate a release build:

flutter build web

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, 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.

Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on 2024-11-12. View source or report an issue.