Using Cirrus CI with Flutter

Pascal Brosinski
3 min readFeb 16, 2019

I was looking for an easy to use CI (Continuous Integration) software that can work with Flutter to check if GitHub commits passes all tests. Since the Flutter repository itself uses Cirrus CI for that purpose I gave it a try and want to show you guys how it works.

So I started to build a simple login screen which consists of two TextFields — to enter an Email address and a password — and a submit Button. Also there is a validator for each TextField to check that the entered Email address contains an ‘@’-sign and that the password is at least 4 characters long. If you want to do the Cirrus CI implementation yourself you can get the Login implementation from here.

How do we implement Cirrus CI?

First of all let me mention that Cirrus CI is to date only available for GitHub. So if you store your source code on another platform you have to look for another CI software.

To use it with your GitHub repository you have to go to the GitHub Marketplace and install it into your repositories first. The usage is free for public repository and costs $10 per month if you also want to use it on your private repositories.

After you installed it to your desired repository you also have to add an .cirrus.yml file to your project. This is a pretty simple file that contains the name of the Cirrus CI Docker container and some tasks of what to do after the commit. The file I’ve been using is the one that is also shown on the example page of the Cirrus CI documentation.

A simple .cirrus.yml file

That’s all we have to do. Now every time we push something to our GitHub repository Cirrus CI is going to run the implemented tests and displays a checkmark if the tests passed or a cross if at least one test failed. So let’s add some tests to check if it works.

Simple test cases to test CI behavior

These are some simple test cases to check that all elements are visible on the screen and that the error messages are displayed, if the entered email or password are invalid. So let’s see how our commit history looks like if we push some commits to the repository.

As you can see, from the time we added the .cirrus.yml file to our project the commits are showing either a checkmark or a cross depending on the test results. New pull requests also have an indicator to show you if the tests are successful with the contained changes.

You can also show one of those badges on your readme file to indicate if the current version passes all tests. To do that you just have to add the following markdown to your readme file.[![Build Status](https://api.cirrus-ci.com/github/<USER>/<REPOSITORY>.svg)](https://cirrus-ci.com/github/<USER>/<REPOSITORY>)

--

--