Integrate CI / CD for a Flutter project with Github Actions

Tram Ho

The article is translated from CI / CD for Flutter Apps Using GitHub Actions by Nabil Nalakath , be sure to check out the author’s blog for more articles!

Github Actions is an automation tool used to integrate CI / CD workflow into projects.

Although just launched, Github’s marketplace site has been widely received by the community, creating a large number of actions that help integrate CI / CD for most platforms.

In this article, let’s talk about the main steps for integrating CI / CD into a Flutter project.

1. Create a Github project

The first step is also the most obvious step that is to create yourself a Github project and push all the project code to this repo. On the project’s repo page, you can see a tab named “Actions” next to the “Pull requests” tab.

2. Add the Workflow configuration file

Github has made available for you a lot of workflows for most of the popular platforms today. You can also customize as well as create a new version for yourself, and this is what we will try to do right now.

Open the project with any IDE you like, create main.yaml file in .github/workflows/main.yaml (Create .github folders, workflows if not already). This file is where we configure the workflow.

A project can have multiple workflows such as build, test, lint, release, … but for the simplest possible example and post, we will only use the one file created above for this project.

3. Write a configuration for the workflow

The first thing we need to do is define the events that we need in the workflow, it can be any event like push, pull_request, create, … depending on your needs.

In this example, we will use an event called push . We can also add event names for easy identification. Here is an example of the content of the main.yaml file after it is completed. We will look at each line to learn more.

Dòng 1 : We want to run this workflow when anyone pushes the code onto the repo

Dòng 3-6 : We define a job called Build APK runs on ubuntu latest version ubuntu-latest . For each job run in an independent environment. A job can consist of one or more steps .

Dòng 8 : This is the first step of the workflow. We will pull the code to the environment, run another Github action, checkout , to checkout your repo to be able to use the files in the repo.

Dòng 9-11 : In step two, we will install the Java SDK on the environment so that we can build Android using a Github Actions named setup-java .

Dòng 12-14 : We use another pre flutter-action made flutter-action to automatically install Flutter on the environment.

Dòng 15 : Run flutter pub get to get all project dependencies

Dòng 16 : Running unit tests

Dòng 17 : Build APK

Dòng 18 : Release apk newly created to Github by action release-action . secretstạo .TOKEN is an API token used to allow access to the repo. We’ll create a token and add it to the project in the next step.

4. Add Github Token

Most of us will have to generate a Github token at some point in order to provide access to the repo. If you haven’t created it yet, the process is very simple too.

  • Visit the personal access tokens page at the Github settings page
  • Create a new token with scope as repo access and copy that token
  • Go to the repository’s settings page, at the Secrets tab, add a new secret with the same name you used in the code above (here TOKEN ) and paste the token you just copied into the value box.

5. Push the code with the tag

Once we have created the workflow file and added the token to the project, we can push the code to Github with the release tag and run the created workflow.

Under local, commit all files including the main.yaml above and create a new tag using the git tag command and push the code along with the tag.

For example:

git tag v1.0

git push origin v1.0

Track workflow and release on Github

Once you’ve pushed your code up, you can track the workflow running by going to <repo URL>/actions and viewing the released files under <repo URL>/releases .

You have now completed integrating CI / CD into the project. You can see the full source code here . If you have any problems, please comment on the author’s article here

Share the news now

Source : Viblo