Configuring a Flutter Web App for Continuous Integration using GitHub Pages

GitHub Actions lets you build and deploy a Flutter Web app directly onto GitHub Pages. However, if you do this in the naïve way, it won't work properly because the base href for the app will be wrong. You need to give the repository name as the base href in order for the built site to work. Here's a configuration file that will work out of the box.

name: Continuous Integration

on:
  workflow_dispatch:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - uses: subosito/flutter-action@v2
        with:
          channel: 'stable'

      - name: Download Dependencies
        run: flutter pub get

      - name: Run Unit Tests
        run: flutter test

      - name: Build
        run: flutter build web --base-href='/${{github.event.repository.name}}/'

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build/web
          force_orphan: true
          user_name: 'github-ci[bot]'
          user_email: 'github-actions[bot]@users.noreply.github.com'
          commit_message: 'Publish to gh-pages'

The workflow-dispatch is optional. It gives you the option to click a button on the Actions page of your repository to force a build rather than waiting for a push.