Deploy to web #

This page will show you how to deploy your Flutter application as a web app (or PWA).

There are two options, and you can pick either depending on taste.

First test out that your app can actually be build for web.

flutter build web

If it gives an error then your project can’t be deployed. Please check that all the packages and plugins you use in the project support web.

You can see the supported platforms at the top of the https://pub.dev page for the package/plugin. Here is an example.

As you can see BLoC works on Android, iOS, Linux, macOS, Web and Windows.

Firebase Hosting #

Deploy Flutter app for web using Firebase hosting.

GitHub Pages #

Add a new workflow file (.github/workflows/deploy.yml) to your GitHub repository with the following content.

name: Web deploy
on: push
permissions:
  contents: write
jobs:
  web_deploy:
    name: Deployment
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: subosito/flutter-action@v2
        with:
          channel: "stable"
          cache: true
          cache-key: "flutter-:os:-:channel:-:version:-:arch:-:hash:"
          cache-path: "${{ runner.tool_cache }}/flutter/:channel:-:version:-:arch:"
      - run: flutter pub get
      - run: flutter build web --release --base-href /${{ github.event.repository.name }}/
      - uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: build/web

Wait for the workflow to finish. You can see when it is done from the “Actions” tab on the repository page for your project on GitHub.

When done:

1. Go to “Settings”
2. Click “Pages” in left menu
3. Set “Branch” to “gh-pages”

You won’t see the “gh-pages” branch before the workflow has completed.

You can then make a link to your deployed app in the “About” section on the repository page.