[Flutter] GitHub Actions for checking code

2022-04-29 hit count image

Let's see how to use GitHub Actions to execute Flutter Linter to check the code style and execute the test code to check the code has issues in Flutter.

Outline

When you use GitHub Actions, you can implement CI/CD with GitHub.

In this blog post, I will introduce how to use GitHub Actions to execute Linter in Flutter project to check the code style, and execute the test code to check the modification of code has issues or not.

flutter_lints

When you create a new Flutter project, the flutter_lints is automatically installed for making the code same style and for the code quality. You can execute it by using the following command.

flutter analyze

In this blog post, When the Pull request is created in GitHub, we will execute the command to check the code style on GitHub Actions automatically.

If you want to know more details about Linter in Flutter, please see the previous blog post on the following link.

Test

When you create a new Flutter project, you can see the widget_test.dart in the test folder for the test code of the ./lib/main.dart file.

When we develop the program, we write many unit tests, widget tests, and so on. And, we can execute the test code by using the following command.

flutter test test/widget_test.dart

Or, we can execute all test codes by using the following command.

flutter test

In this blog post, When the Pull request is created in GitHub, we will execute the command to check the code modification has issues or not on GitHub Actions automatically.

GitHub Actions

Now, let’s make GitHub Actions to execute Linter and test automatically when the Pull request. First, execute the following command to create a branch which store the GitHub Actions configuration.

git checkout -b add-github-actions

To make the GitHub Actions configuration, create the .github/workflows folder in the root directory of the Flutter project.

And the, create the code_quality.yml file(You can change the file name) in the .github/workflows folder, and modify it like the below.

name: Check and test the source code
on:
  pull_request:
    branches:
      - main
jobs:
  test:
    name: Check the source code
    runs-on: ubuntu-latest
    steps:
      - uses: actions/[email protected]
      - uses: subosito/[email protected]
        with:
          flutter-version: '2.10.4'
      - name: Install packages
        run: flutter pub get
      - name: Linter
        run: flutter analyze
      - name: Test
        run: flutter test

This GitHub Actions will be executed when the Pull request for the main branch is created.

...
on:
  pull_request:
    branches:
      - main
...

This GitHub Actions will be executed on the Ubuntu server.

...
jobs:
  test:
    name: Check the source code
    runs-on: ubuntu-latest
...

When the Ubuntu server is ready, download(checkout) the current repository.

jobs:
  test:
    ...
    steps:
      - uses: actions/[email protected]
    ...

We’ll execute the Linter of Flutter and the test code, so we need to configure the Flutter development environment.

...
jobs:
  test:
    name: Check the source code
    runs-on: ubuntu-latest
    steps:
      ...
      - uses: subosito/[email protected]
        with:
          flutter-version: '2.10.4'
      ...

Lastly, we need to install all packages of the Flutter project, and execute the Linter and Test on the environment.

...
jobs:
  test:
    name: Check the source code
    runs-on: ubuntu-latest
    steps:
      ...
      - name: Install packages
        run: flutter pub get
      - name: Linter
        run: flutter analyze
      - name: Test
        run: flutter test

After modifying, execute the following commands to store it to GitHub.

git add .
git commit -m 'chore: Add GitHub Actions for code quality'
git push origin add-github-actions

Check

After pushing, go to the GitHub page, and click the Pull requests tab. And, make a Pull request from the add-github-actions branch to the main branch.

When you do it, you can see the GitHub Actions is executed automatically like the below.

Flutter - execute Linter and test code on GitHub Actions

Completed

Done! we’ve seen how to use GitHub Actions to execute Linter and the test code in the Flutter project to check the code style and code quality. Now, you got the skill to configure CI/CD with GitHub Actions.

To develop alone, we can use a tool like Lefthook to execute the Linter and the test code automatically.

However, when we develop with many developers, configuring CI/CD with GitHub Actions makes us keep the code style and code quality more effective.

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

App promotion

You can use the applications that are created by this blog writer Deku. 지금 보고 계신 블로그를 작성하는 Deku가 개발한 앱을 한번 사용해보세요.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.

Posts