Setup a Flutter CI/CD with GitLab CI — Part 1

Understanding the basic concept of CI/CD with Flutter

Roger Tan
Kin + Carta Created
5 min readOct 8, 2019

--

GitLab CI/CD + Flutter illustration

This post is targeted to those who possess a basic knowledge of Flutter and wish understand the process of setting up tools that support CI/CD practices within a Flutter project.

Introduction

Continuous Integration (CI) is one of the most common development practices used in software development. Modern continuous integration tools enable development teams to have more confidence, by automatically building and testing and also providing earlier feedback.

Continuous delivery (CD) is the step after Continuous Integration. Your application is not only built and tested at every code change pushed to the codebase, but as an additional step, it’s also deployed continuously, though the deployments are triggered manually.

This method ensures the code is checked automatically but requires human intervention to manually and strategically trigger the deployment of the changes.

Continuous deployment is also a step after Continuous Integration. The difference is that instead of deploying your application manually, you set it to be deployed automatically. It does not require human intervention at all to have your application deployed.

For a Flutter project, you might have to choose a cloud solution such as Bitrise or Codemagic. Sometimes due to restrictions within your company’s IT Security Policy, you may need to set up your own internal CI/CD tools.

Pre-requirements
A Mac is highly recommended for the creation of a CI machine to build Android and iOS applications. We recommend having a mac with macOS Mojave or higher installed.

Tip: If you have an old mac inside your company, ask your IT department if it can be reused as a CI Machine.

Illustration of main dependencies on each type of machine and workflow

Dependencies

  • GitLab Runner
  • Bundler 2.0
  • Java 8 or AdoptOpenJDK
  • Xcode 10.2.1 or above
  • Android SDK
  • Flutter 1.5 or above
  • Xcode-select
  • Visual Studio App Center (Will be covered in Part 4 for Beta testing)

Let’s have a quick look at a diagram of the CI/CD pipeline that we aim to achieve.

Example of CI/CD workflow

There are three main tasks within this pipeline.

  • Test the focus here is on Unit Tests and Widget Tests for Flutter
  • Build the building of an app for Android or iOS platforms
  • Deploy the build is deployed to end-users

Install Homebrew

Homebrew logo

Homebrew is package manager that simplifies the installation of software on macOS and Linux. We will use Homebrew to install the dependencies mentioned above.

To install Homebrew, please follow instructions on the website ( https://brew.sh).

Install & Setup a GitLab Runner

GitLab Runner is a program which allows a computer to execute tasks and feedback results to GitLab. The runner is triggered when a new commit is being pushed to GitLab. When an authenticated runner finds a change, a new task is immediately executed to run the specific job.

For this post, we will use the GitLab Runner as a shell which enables us to build our Android & iOS Apps.

To begin installation and configuration of GitLab Runner.

  • If your project is already created, go to Settings > CI/CD Settings > Runners > Set up a specific Runner manually
  • If not, this can be done here
Screenshot of a project settings
  1. Click on “Install GitLab Runner”
  2. Click on “Install on macOS” ( https://docs.gitlab.com/runner/install/osx.html).
  3. Follow the instructions as indicated
    (I personally prefer to install Gitlab-runner from Homebrew but there is no guarantee of receiving the latest stable version since the Homebrew formula is not maintained by GitLab Team)
  4. Register your GitLab Runner
  5. Run this command line $ sudo gitlab-runner register # To register our GitLab Runner
  6. On the first message, “Please enter this gitlab-ci coordinator URL (e.g. https://gitlab.com/):".
    From there, navigate to the CI / CD Settings page in the browser. Copy the URL which is under “Set up a specific Runner manually” > “Specify the following URL during the Runner setup:” and paste this into the terminal and press enter.
  7. On the resulting message “Please enter the gitlab-ci token for the runner”. From there, again navigate to the CI / CD Settings page in the browser. Copy the token from the “Set up a specific Runner manually > Use the following registration token during setup” and paste this into the terminal and press enter.
  8. On the resulting message, “Please enter the gitlab-ci description for this runner.”.
    Place a clear description of the runner actions. e.g. Flutter Build
  9. On the resulting message, “Please enter the gitlab-ci tags for this runner (comma separated)”. Simply use tags for identification e.g. flutter, android, ios
    Note: In the following tutorial, we use flutter as a tag for triggering a gitlab job for Flutter.
  10. On the final message, “Please enter the executor: shell, ssh, docker, docker-ssh, parallax, Virtualbox, docker+machine, docker-ssh-machine, kubernetes:” Simply type “shell” and press enter. The configuration setup should be complete.
  11. Now, run your GitLab Runner by entering the command line $ sudo gitlab-runner run
  12. Verify that your GitLab Runner is operational and it should look similar to the image below.
Example of activated runner for the project

If a green circular icon is displayed, then you have successfully installed a GitLab Runner instance and you are ready to communicate with GitLab. 🎉

In the next article, we will install our Flutter environment so we can later build Android & iOS apps.

--

--