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
#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 Visual Studio Code, Android Studio, IntelliJ IDEA. Also 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.
Set up
#Run the following commands to use the latest version of the Flutter SDK:
flutter channel stable
flutter upgrade
If Chrome is installed, 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
1 connected device:
Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.150
In your IDE, you should see Chrome (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.
IDE
#Create a new app in your IDE and it automatically creates iOS, Android, desktop, and web versions of your app. From the device pulldown, select Chrome (web) and run your app to see it launch in Chrome.
Command line
#To create a new app that includes web support (in addition to mobile support), run the following commands, substituting my_app
with the name of your project:
flutter create my_app
cd my_app
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
If you receive a not supported
error, run the following command:
flutter config --enable-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.
Flutter web offers multiple build modes and renderers. For more information, see Web renderers.
To learn more, see Build and release a web app.
Add web support to an existing app
#To add web support to an existing project created using a previous version of Flutter, run the following command from your project's top-level directory:
flutter create --platforms web .
If you receive a not supported
error, run the following command:
flutter config --enable-web
Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on 2024-08-16. View source or report an issue.