Build and release a web app
During a typical development cycle, you test an app using flutter run -d chrome
(for example) at the command line. This builds a debug version of your app.
This page helps you prepare a release version of your app and covers the following topics:
- Building the app for release
- Deploying to the web
- Deploying to Firebase Hosting
- Handling images on the web
- Choosing a build mode and a renderer
- Minification
Building the app for release
#Build the app for deployment using the flutter build web
command. This generates the app, including the assets, and places the files into the /build/web
directory of the project.
The release build of a simple app has the following structure:
/build/web
assets
AssetManifest.json
FontManifest.json
NOTICES
fonts
MaterialIcons-Regular.ttf
<other font files>
<image files>
packages
cupertino_icons
assets
CupertinoIcons.ttf
shaders
ink_sparkle.frag
canvaskit
canvaskit.js
canvaskit.wasm
<other files>
favicon.png
flutter.js
flutter_service_worker.js
index.html
main.dart.js
manifest.json
version.json
Launch a web server (for example, python -m http.server 8000
, or by using the dhttpd package), and open the /build/web directory. Navigate to localhost:8000
in your browser (given the python SimpleHTTPServer example) to view the release version of your app.
Deploying to the web
#When you are ready to deploy your app, upload the release bundle to Firebase, the cloud, or a similar service. Here are a few possibilities, but there are many others:
Deploying to Firebase Hosting
#You can use the Firebase CLI to build and release your Flutter app with Firebase Hosting.
Before you begin
#To get started, install or update the Firebase CLI:
npm install -g firebase-tools
Initialize Firebase
#Enable the web frameworks preview to the Firebase framework-aware CLI:
firebase experiments:enable webframeworks
In an empty directory or an existing Flutter project, run the initialization command:
firebase init hosting
Answer
yes
when asked if you want to use a web framework.If you're in an empty directory, you'll be asked to choose your web framework. Choose
Flutter Web
.Choose your hosting source directory; this could be an existing flutter app.
Select a region to host your files.
Choose whether to set up automatic builds and deploys with GitHub.
Deploy the app to Firebase Hosting:
firebase deploy
Running this command automatically runs
flutter build web --release
, so you don't have to build your app in a separate step.
To learn more, visit the official Firebase Hosting documentation for Flutter on the web.
Handling images on the web
#The web supports the standard Image
widget to display images. By design, web browsers run untrusted code without harming the host computer. This limits what you can do with images compared to mobile and desktop platforms.
For more information, see Displaying images on the web.
Choosing a build mode and a renderer
#Flutter web provides two build modes (default and WebAssembly) and two renderers (canvaskit
and skwasm
).
For more information, see Web renderers.
Minification
#To improve app start-up the compiler reduces the size of the compiled code by removing unused code (known as tree shaking), and by renaming code symbols to shorter strings (e.g. by renaming AlignmentGeometryTween
to something like ab
). Which of these two optimizations are applied depends on the build mode:
Type of web app build | Code minified? | Tree shaking performed? |
---|---|---|
debug | No | No |
profile | No | Yes |
release | Yes | Yes |
Embedding a Flutter app into an HTML page
#PWA Support
#As of release 1.20, the Flutter template for web apps includes support for the core features needed for an installable, offline-capable PWA app. Flutter-based PWAs can be installed in the same way as any other web-based PWA; the settings signaling that your Flutter app is a PWA are provided by manifest.json
, which is produced by flutter create
in the web
directory.
PWA support remains a work in progress. Please give us feedback if you see something that doesn't work as expected.
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.