Configuring Travis CI and Coveralls with Flutter

In my previous article, I talked about test-driven development(TDD) with Flutter which you can read here. This time around, we would try to set up for Travis-CI and integrate Flutter app with Coveralls, which will give us feedback on test coverage in your app.

I hope this guide helps you out ** 😀 **.

Requirements

• The Flutter app should be hosted on GitHub, GitLab or Bitbucket.
• Travis CI account
• Flutter SDK

Create a Github/BitBucket/GitLab Project

Create your flutter application and push it to GitHub/BitBucket/GitLab. For the purpose of this tutorial, I will be using the PiggyX application which is to demonstrate the concept of test-driven development in Flutter. The codes are available on Github. Click here to access the codes. You can read the previous article on test-driven development here.

Integrating with Travis CI

You need to first register your GitHub project/repository on Travis-CI dashboard. This way, travis can detect changes in your repository. Go to https://travis-ci.org/ if your repository is public, or https://travis-ci.com/ if it is private.

In Travis, you implement the pipeline under the YAML schema, defined on a file named .travis.yml. To get things going on Travis all you need is add the correct .travis.yml to the root of your repository and tell Travis to start a continuous build of your repository by following their instructions. Here I’ll only explain what goes in the .travis.yml file. Below is the configuration I settled on:

language: dart
dist: xenial
addons:
  apt:
    packages:
      - lib32stdc++6
install:
  - git clone https://github.com/flutter/flutter.git -b stable
  - ./flutter/bin/flutter doctor
script:
  - ./flutter/bin/flutter test
cache:
  directories:
    - $HOME/.pub-cache

Language

This tailors the CI environment for a specific language. Leaving out this part tells travis to use the default language Ruby.

Dist

This specifies the Ubuntu base version that gets used. I’m specifying Xenial Xerus which is supported until 2021.

Addons

This lets you have additional packages installed on the OS. In my experimentation, tests still pass without lib32stdc++6 but flutter doctor complained so I'm including it.

Install

This should call Dart’s pub get but Flutter complains so let’s just override that and install Flutter instead.

Script This is where we run the tests. So we provide the means of running the test here.

Cache

Here is the final part. This tells Travis to cache the contents of the default Dart package cache. This should make it faster for Flutter to install the app’s dependencies.

This configuration runs well and takes under 2minutes 30seconds to complete.

Adding Github Project to Coveralls

To add a project to Coveralls, logon to https://coveralls.io/ and Sign In with your GitHub/GitLab/BitBucket account, go to Add Repos and pick repository you would like to integrate. Then, when you go to Repos, you should see your project.

Updating .travis.yml

To call coveralls on Travis build you need to change .travis.yml file. All we need to do is tweak it a little to generate and send coverage report.

language: dart
dist: xenial
addons:
  apt:
    packages:
      - lib32stdc++6
install:
  - git clone https://github.com/flutter/flutter.git -b stable
  - ./flutter/bin/flutter doctor
  - gem install coveralls-lcov
script:
  - ./flutter/bin/flutter test --coverage
after\_success:
  - coveralls-lcov coverage/lcov.info
cache:
  directories:
    - $HOME/.pub-cache

We have added two more lines and edited the script:

Install : we added gem install coveralls-lcov to install coveralls

Script : we changed the script to ./flutter/bin/flutter test — coverage to generate coverage report on tests.

after_success : we added coveralls-lcov coverage/lcov.info here to send the coverage report.

So that is it, you have now configured travis-ci and coveralls with flutter and should be able to see your test coverage 😄 😄 😄.

Bonus Points

You can add a badge to the project readme to allow people to know how the project is tested. To add a coverage/coveralls badge, sign in and open the project on coveralls, click on settings.

In the repo settings, you would see an Embed dropdown button beside a readme badge. Clicking on this button would provide you with a variety of badge option. For this project, I used the Markdown variety and added to the project README.md

To add travis build status badge, sign in and open the project on travis. You should see a badge with a build status on the project dashboard. The build status varies and could be unknown, failed, passed, error as the case may be. Click on this build status badge.

Some sort of popup should appear on your screen providing you options for the status image. For this project, I integrated on the master branch and used the markdown status image.

And that’s it! Now after proper build on Travis, you will be able to see your test coverage and some shiny badge in your project💃 💃 💃. The full example is available here.

If you have any questions, feel free to leave a comment 🙂.