Build Flutter Web App with Github Actions in 2024
in Blog,
by Marnix Kok
last published on 04 June 2024
I've cobbled together a Github Actions workflow from different parts of the internet and brought it up to standards for 2024.
What it does is build your Flutter app that is target for the web after your `main` or `dev` branch receive a push.
Depending on which branch received the push, a different entry-point is used to build the Flutter app.
The resulting `build/web` folder is zipped and pushed back into the `infrastructure/artifacts` folder of the Git repository. This is useful because the monorepo that contains the Flutter app is also used as the home of CDK deployment rules.
Simply place the snippet below in a file called .github/workflows/build-deploy.yml in your git repo and commit and push it to the server.
Things to check before using the file:
- update the root folder to whatever your code/<app_name>/ is
- update the entry point to whatever you use; and
- Make sure the flutter_version is the one you are using.
name: Build & Deploy Flutter Web App on: push: branches: - main - dev jobs: build: name: Build runs-on: ubuntu-latest env: MAIN_FILE: ${{ github.ref == 'refs/heads/main' && 'lib/main_prod.dart' || 'lib/main.dart' }} steps: - name: Checkout code uses: actions/checkout@v4 - name: Install Flutter uses: subosito/flutter-action@v2 with: channel: stable flutter-version: '3.22.0' - name: Get dependencies run: flutter pub get working-directory: code/flutter_frontend/ # - name: Test project # run: flutter test - name: Build release project run: flutter build web --no-tree-shake-icons -t $MAIN_FILE working-directory: code/flutter_frontend/ - name: Upload production-ready build files uses: actions/upload-artifact@v4 with: name: flutter_frontend_build path: ./code/flutter_frontend/build/web - name: Zip build output run: zip -r ../../../../build.zip . working-directory: ./code/flutter_frontend/build/web - name: Move zip to infrastructure run: mv build.zip infrastructure/artifacts/flutter_frontend_build.zip - name: Configure git run: | git config --global user.name 'github-actions' git config --global user.email '[email protected]' - name: Commit and push changes run: | git add infrastructure/artifacts/flutter_frontend_build.zip git commit -m 'Update Flutter build artifact' git push env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}