Build Flutter Web App with Github Actions in 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 }}        
									  

Also Read

How AI fits into my development workflow

By Marnix Kok on 27 August 2024

Interpreting Sitemaps, harder than you think.

By Marnix Kok on 22 August 2024

Deploying Flutter Web builds to Cloudflare Pages

By Marnix Kok on 20 September 2023