Building a web application with Flutter

This page covers the following steps for getting started with web support:

• Configure the flutter tool for web support.
• Create a new project with web support.
• Run a new project with web support.
• Build an app with web support.
• Add web support to an existing project.

Requirements

• Install the Flutter SDK on your platform.
• Install Chrome. Debugging a web app requires the Chrome browser.

For more information, see the web FAQ.

Create a new project with web support

You can use the following steps to create a new project with web support.

Set up

Run the following commands to use the latest version of the Flutter SDK from the beta channel and enable web support:

flutter channel beta
flutter upgrade
flutter config --enable-web

Once web is enabled, the flutter devices command outputs a Chrome device that opens the Chrome browser with your app running, and a Web Server that provides the URL serving the app.

flutter devices
2 connected device:

Chrome     • chrome     • web-javascript • Google Chrome 78.0.3904.108
Web Server • web-server • web-javascript • Flutter Tools

After enabling web support, restart your IDE. You should now see Chrome (web) in the device pulldown.

Create and run

To create a new app for use with web support (in addition to mobile support), run the following commands, substituting myapp with the name of your project:

flutter create myapp
cd myapp

To serve your app from localhost in Chrome, enter the following from the top of the package:

flutter run -d chrome

The flutter run command launches the application using the development compiler in a Chrome browser.

Build

Run the following command to generate a release build:

flutter build web

A release build uses dart2js (instead of the development compiler) to produce a single JavaScript file main.dart.js. You can create a release build using release mode (flutter run --release) or by using flutter build web. This populates a build/web directory with built files, including an assets directory, which need to be served together.

Add web support to an existing app

To add web support to an existing project, run the following command in a terminal from the root project directory:

flutter create .

To serve your app from localhost in Chrome, enter the following from the top of the package:

flutter run -d chrome