Test and deploy flutter on GitHub actions

Time:2021-5-12

GitHub actions can easily automate all software workflow. Build, test, and deploy code directly from GitHub. Make code review, branch management and problem classification work the way you want.

I remember that at the end of the 19th century, I saw the article “run flutter driver tests on GitHub actions”, and then I started writing in flutter_ Deer, because the integration test was written in the project at that time.

At the time, it was in flutter_ Many issues in deer are about the operation of the project. Many students reflect that it can’t run, and all kinds of errors are reported. To be honest, it’s not sure whether it’s the environment or the code itself. With GitHub actions, you can build and run tests on GitHub. As long as the test passes, you can ensure that there is no problem in running the code on the corresponding flutter version.

GitHub actions is very powerful, and it also provides the actions market. We can search for actions written by others. The level is limited, here I only do a simple introduction to the use, detailed can see the official document.

1. Add GitHub actions to the project

First add the.github / workflowscatalog. Then create.ymlA workflow file in the. For example:flutter-drive.yml. Its basic format is as follows:

#The name of workflow
name: flutter_deer driver

#Conditions for triggering workflow
on: [push, pull_request]

#One or more tasks performed by workflow
jobs:
 ...

The conditions that trigger workflow can also be customized according to the situation. For example, it is triggered when you specify to push to a branch or modify some files. For example:

#Trigger to modify 'pubspec. Yaml' in push submission
on:
  push:
    paths:
      - 'pubspec.yaml'
 ...

See the document [workflow syntax for GitHub actions] for details
](https://docs.github.com/en/ac…

2. Writing tasks

The structure of the task is as follows:
Test and deploy flutter on GitHub actions

The simple explanation is that under jobs is job (task), under job is step (step), and under step is action (action).

Here is an example of performing a flutter unit test:

jobs:
  #The task ID must be unique under jobs
  accessibility_test: 
    #The virtual machine environment required to run. For example, windows-2019, MacOS latest, macos-10.14
    runs-on: macos-latest
    #Running steps of job
    steps:
      #It is easy to get the source code of flutter
      # https://github.com/actions/checkout
      - uses: actions/[email protected]
      #Setting up the flutter environment
      # https://github.com/marketplace/actions/flutter-action
      - uses: subosito/[email protected]
        with:
          flutter-version: '2.0.2'
          channel: 'stable'  # or: 'dev' or 'beta'
        #Command to run
      - run: "flutter pub get"
        #Step name
      - name: "Run Flutter Accessibility Tests"
        run: "flutter test test/accessibility_test.dart"

The above annotation is very clear, in which two actions are used, making the writing of the whole script much easier. Next, I’ll post some flutters_ The job used in deer can basically be used without brain. You only need to modify your own running command.

3. Examples

Running integration tests on IOS devices

drive_ios:
    #Create a construction matrix
    strategy:
      #Set up different configurations for a set of virtual environments
      matrix:
        device:
          - "iPhone 8 (14.4)"
          - "iPhone 11 Pro Max (14.4)"
      #When set to true, GitHub cancels all in progress jobs if any of the matrix jobs fail.
      fail-fast: false
    runs-on: macOS-latest
    steps:
      - name: "List all simulators"
        run: "xcrun instruments -s"
      - name: "Start Simulator"
        run: |
          UDID=$(
            xcrun instruments -s |
            awk \
              -F ' *[][]' \
              -v 'device=${{ matrix.device }}' \
              '$1 == device { print $2 }'
          )
          xcrun simctl boot "${UDID:?No Simulator with this name found}"
      - uses: actions/[email protected]
      - uses: subosito/[email protected]
        with:
          Flitter version: '2.0.2'? Specifies the flitter environment
          channel: 'stable'
      - name: "Run Flutter Driver tests"
        run: "flutter drive --target=test_driver/driver.dart"

Running integration tests on Android devices

drive_android:
    runs-on: macos-latest
    strategy:
      matrix:
        api-level: [21, 29]
        target: [default]
    steps:
      - uses: actions/[email protected]
      - uses: subosito/[email protected]
        with:
          flutter-version: '2.0.2'
          channel: 'stable'
      - name: "Run Flutter Driver tests"
        #Operation for installing, configuring and running Android emulator (MAC OS only)
        # https://github.com/marketplace/actions/android-emulator-runner
        uses: reactivecircus/[email protected]
        with:
          api-level: ${{ matrix.api-level }}
          target: ${{ matrix.target }}
          arch: x86_64
          profile: Nexus 6
          script: "flutter drive --target=test_driver/driver.dart"

Construction and deployment of flutter Web

  web_build_and_deploy:
    runs-on: macos-latest
    steps:
      - uses: actions/[email protected]
      - uses: subosito/[email protected]
        with:
          flutter-version: '2.0.2'
          channel: 'stable'
      - name: "Web Build 🔧"
        run: |
          flutter pub get
          flutter build web
      - name: "Web Deploy 🚀"
        # https://github.com/JamesIves/github-pages-deploy-action
        uses: JamesIves/[email protected]
        with:
          token: '${{ secrets.GITHUB_TOKEN }}'
          branch: gh-pages
          folder: build/web

Recently, flutter has released 2.0, and the web can be built in the stable channel. With this job, we can easily deploy our web version code on GitHub’s page.

It should be noted that after the deployment, we need to set GitHub pages before we can access it. The settings location is in the settings menu of the project home page.
Test and deploy flutter on GitHub actions

4. Others

  1. When we push the code to GitHub, the task will be executed automatically, and the details can be found in theActionsYou can see it in the menu.
    Test and deploy flutter on GitHub actions
    The above figure is the result of one of the execution. You can see that there are successful, cancelled and failed ones.
  1. We can create a badge of workflow execution status and add it to the markdown of the project.
    Test and deploy flutter on GitHub actions
    Display effect:
    Test and deploy flutter on GitHub actions

Of course, the usage is not only what I mentioned above, you can also do the functions of packaging and automatic publishing, and it’s not only flutter that can be used. Everything depends on your needs. Finally, the complete code of this article is presented.

Finally, if this article is helpful to you, you might as well like to collect it.

5. Reference

  • Run Flutter Driver tests on GitHub Actions
  • CI_CD_Flutter_Demo