This page covers the following steps for getting started with web support:
- Configure the
fluttertool 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.
To create a Flutter app with web support, you need the following software:
- Flutter SDK. See the Flutter SDK installation instructions.
- Chrome; debugging a web app requires the Chrome browser.
- Optional: An IDE that supports Flutter. You can install Android Studio, IntelliJ IDEA, or Visual Studio Code and install the Flutter and Dart plugins to enable language support and tools for refactoring, running, debugging, and reloading your web app within an editor. See setting up an editor for more details.
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.
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,
flutter devices command outputs a
that opens the Chrome browser with your app running,
Web Server that provides the URL serving the app.
After enabling web support, restart your IDE. You should now see Chrome (web) and Web Server (web) in the device pulldown.
Create and run
Creating a new project with web support is no different than creating a new Flutter project for other platforms.
Once you’ve configured your environment for web support, you can create and run a web app either in the IDE or from the command line.
After you’ve configured your environment to support the web, make sure you restart the IDE if it was already running.
Create a new app in your IDE and it automatically creates iOS, Android, and web versions of your app. (And macOS, too, if you’ve enabled desktop support.) From the device pulldown, select Chrome (web) and run your app to see it launch in Chrome.
To create a new app that includes web support
(in addition to mobile support), run the following commands,
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
flutter run command launches the application using the
development compiler in a Chrome browser.
Run the following command to generate a release build:
$ flutter build web
A release build uses dart2js
(instead of the development compiler)
You can create a release build using release mode
flutter run --release) or by using
flutter build web.
This populates a
with built files, including an
which need to be served together.
You can also include
--web-renderer html or
--web-renderer canvaskit to
select between the HTML or CanvasKit renderers, respsectively. For more
information, see Web renderers.
For more information, see Build and release a web app.
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 .