DEV Community

Cover image for GitHub Action for Flutter Web
HIMANSHU SHARMA
HIMANSHU SHARMA

Posted on • Edited on

GitHub Action for Flutter Web

My Workflow

This GitHub Action "Flutter Web CI" is designed to automate the developers work to:

  • Configure the flutter tool for web support
  • Build an app with web support
  • Archive the build and upload the Artifact
  • Download the Artifact
  • Display structure of build files
  • Use GitHub Pages to host your Flutter Web app

Submission Category:

Maintainer Must-Haves and DIY Deployments

Yaml File or Link to Code

name: Flutter Web CI

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-latest
    env:
      my_secret: ${{secrets.GH_DEPLOY}}
    steps:
    - uses: actions/checkout@v1
    - uses: subosito/flutter-action@v1
      with:
        channel: beta
    - run: flutter config --enable-web
    - run: flutter pub get
#     - run: flutter test
    - run: flutter build web
    - name: Archive Production Artifact
      uses: actions/upload-artifact@master
      with:
        name: web-build
        path: build/web
    - name: Download Artifact
      uses: actions/download-artifact@master
      with:
        name: web-build 
    - name: Display structure of build files
      run: ls -R
      working-directory: ./web
    - name: Deploy to GH Pages
      run: |
        cd build/web
        git init
        # type configurations: your user.email and user.name followed lines 
        # git config --global user.email your_email 
        # git config --global user.name your_name 
        git config --global user.email ranubhardwaj89@gmail.com
        git config --global user.name himanshusharma89
        git status
        # change this remote url for examle your remote url is https://github.com/onatcipli/flutter_web.git then the following:
        git remote add origin https://${{secrets.GH_DEPLOY}}@github.com/himanshusharma89/dev.git
        git checkout -b gh-pages
        git add --all
        git commit -m "update"
        git push origin gh-pages -f
Enter fullscreen mode Exit fullscreen mode

GitHub logo himanshusharma89 / dev

Using GitHub Actions use GitHub Pages to host your Flutter Web app. And much more.

Dev

A new Flutter project for the GitHub Actions x DEV Hackathon!

GitHub Action for Flutter Web

This GitHub Action "Flutter Web CI" is designed to automate the developers work to:

  • Configure the flutter tool for web support
  • Build an app with web support
  • Archive the build and upload the Artifact
  • Download the Artifact
  • Display structure of build files
  • Use GitHub Pages to host your Flutter Web app

Usage

name: Flutter Web CI
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-latest
    env:
      my_secret: ${{secrets.GH_DEPLOY}}
    steps:
    - uses: actions/checkout@v1
    - uses: subosito/flutter-action@v1
      with:
        channel: beta
    - run: flutter config --enable-web
    - run: flutter pub get
#     - run: flutter test
    - run: flutter build web
    - name: Archive Production Artifact
      uses: 
Enter fullscreen mode Exit fullscreen mode

Additional Resources / Info

This GitHub Action uses the following open-source GitHub Actions:

GitHub logo subosito / flutter-action

Flutter environment for use in GitHub Actions. It works on Linux, Windows, and macOS.

flutter-action

Flutter environment for use in GitHub Actions. It works on Linux, Windows, and macOS.

The following sections show how to configure this action.

Specifying Flutter version

Use specific version and channel

steps:
  - name: Clone repository
    uses: actions/checkout@v4
  - name: Set up Flutter
    uses: subosito/flutter-action@v2
    with:
      channel: stable
      flutter-version: 3.19.0
  - run: flutter --version
Enter fullscreen mode Exit fullscreen mode

Use version from pubspec.yaml

This is inspired by actions/setup-go.

steps:
  - name: Clone repository
    uses: actions/checkout@v4
  - name: Set up Flutter
    uses: subosito/flutter-action@v2
    with:
      channel: stable
      flutter-version-file: pubspec.yaml # path to pubspec.yaml
  - run: flutter --version
Enter fullscreen mode Exit fullscreen mode

Important

For flutter-version-file to work, you need to have the exact Flutter version defined in your pubspec.yaml:

Good

environment:
  sdk: ">=3.3.0 <4.0.0"
  flutter: 3.19.0
Enter fullscreen mode Exit fullscreen mode

Bad

environment
  sdk: ">=3.3.0 <4.0.0"
  flutter: 
Enter fullscreen mode Exit fullscreen mode

@actions/upload-artifact

Warning

actions/upload-artifact@v3 is scheduled for deprecation on November 30, 2024. Learn more. Similarly, v1/v2 are scheduled for deprecation on June 30, 2024 Please update your workflow to use v4 of the artifact actions This deprecation will not impact any existing versions of GitHub Enterprise Server being used by customers.

Upload Actions Artifacts from your Workflow Runs. Internally powered by @actions/artifact package.

See also download-artifact.


@actions/download-artifact

Warning

actions/download-artifact@v3 is scheduled for deprecation on November 30, 2024. Learn more. Similarly, v1/v2 are scheduled for deprecation on June 30, 2024 Please update your workflow to use v4 of the artifact actions This deprecation will not impact any existing versions of GitHub Enterprise Server being used by customers.

Download Actions Artifacts from your Workflow Runs. Internally powered by the @actions/artifact package.

See also upload-artifact.

v4 - What's new

Important

download-artifact@v4+ is not currently supported on GHES yet. If you are on GHES, you must use v3.

The release of upload-artifact@v4 and download-artifact@v4 are major changes to the backend architecture of Artifacts. They have numerous performance and behavioral…

Made with by Himanshu Sharma

Top comments (0)