Movatterモバイル変換


[0]ホーム

URL:


Skip to main content

docs.flutter.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic.

Learn more

Flutter 3.41 is live! Check out theFlutter 3.41 blog post!

Build and release a web app

How to prepare for and release a web app.

During a typical development cycle, you test an app usingflutter run -d chrome (for example) at the command line. This builds adebug version of your app.

This page helps you prepare arelease version of your app and covers the following topics:

Building the app for release

#

Build the app for deployment using theflutter build web command.

flutter build web

This generates the app, including the assets, and places the files into the/build/web directory of the project.

To validate the release build of your app, launch a web server (for example,python -m http.server 8000, or by using thedhttpd package), and open the /build/web directory. Navigate tolocalhost:8000 in your browser (given the python SimpleHTTPServer example) to view the release version of your app.

Additional build flags

#

You might need to deploy a profile or debug build for testing. To do this, pass the--profile or--debug flag to theflutter build web command. Profile builds are specialized for performance profiling using Chrome DevTools, and debug builds can be used to configure dart2js to respect assertions and change the optimization level (using the-O flag.)

Choosing a build mode and a renderer

#

Flutter web provides two build modes (default and WebAssembly) and two renderers (canvaskit andskwasm).

For more information, seeWeb renderers.

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

#
  1. Enable the web frameworks preview to theFirebase framework-aware CLI:

    firebase experiments:enable webframeworks
  2. In an empty directory or an existing Flutter project, run the initialization command:

    firebase init hosting
  3. Answeryes when asked if you want to use a web framework.

  4. If you're in an empty directory, you'll be asked to choose your web framework. ChooseFlutter Web.

  5. Choose your hosting source directory; this could be an existing flutter app.

  6. Select a region to host your files.

  7. Choose whether to set up automatic builds and deploys with GitHub.

  8. Deploy the app to Firebase Hosting:

    firebase deploy

    Running this command automatically runsflutter build web --release, so you don't have to build your app in a separate step.

To learn more, visit the officialFirebase Hosting documentation for Flutter on the web.

Handling images on the web

#

The web supports the standardImage 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, seeDisplaying images on the web.

Minification

#

To improve app start-up the compiler reduces the size of the compiled code by removing unused code (known astree shaking), and by renaming code symbols to shorter strings (e.g. by renamingAlignmentGeometryTween to something likeab). Which of these two optimizations are applied depends on the build mode:

Type of web app buildCode minified?Tree shaking performed?
debugNoNo
profileNoYes
releaseYesYes

Embedding a Flutter app into an HTML page

#

SeeEmbedding Flutter web.

Was this page's content helpful?

Unless stated otherwise, the documentation on this site reflects Flutter 3.38.6. Page last updated on 2025-10-30.View source orreport an issue.


[8]ページ先頭

©2009-2026 Movatter.jp