Configuring Travis CI and Coveralls with Flutter
Tags: android, flutter, testing, ios
Published: 2020-03-03 18:11:00

---
title: Configuring Travis CI and Coveralls with Flutter
published: true
date: 2020-02-24 06:20:10 UTC
tags: android,flutter,testing,ios
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/1*sthBZGJCvvVoRB22scLDwg.png)<figcaption>Flutter et Travis CI</figcaption>

In my previous article, I talked about test-driven development(TDD) with Flutter which you can read [here](https://medium.com/@sammytech/test-driven-development-in-flutter-e7fe7921ea92). This time around, we would try to set up for [Travis-CI](https://travis-ci.com/) and integrate Flutter app with [Coveralls](https://coveralls.io/), 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](https://github.com/Mastersam07/PiggyX) to access the codes. You can read the previous article on test-driven development [here](https://medium.com/@sammytech/test-driven-development-in-flutter-e7fe7921ea92).

### 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/](https://travis-ci.org/) if your repository is public, or [https://travis-ci.com/](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](https://docs.travis-ci.com/user/getting-started). 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/](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.

![](https://cdn-images-1.medium.com/max/1024/1*NEmajRaktLEq3NRr4JQ-1w.png)<figcaption><a href="https://coveralls.io/">coveralls.io</a></figcaption>

### 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.

![](https://cdn-images-1.medium.com/max/1024/1*ohh4lHAkLT9FMlN5_cxsRQ.png)<figcaption>Project board coveralls.io</figcaption>

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](https://github.com/Mastersam07/PiggyX), I used the Markdown variety and added to the project README.md

![](https://cdn-images-1.medium.com/max/1024/1*GZkMfqNFXdNaX0ZwDLyFiA.png)<figcaption>Repo settings coveralls.io</figcaption>

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.

![](https://cdn-images-1.medium.com/max/1024/1*PtuRVQVA7bKvTrbWEJsPGw.png)<figcaption>project dashboard travis-ci</figcaption>

Some sort of popup should appear on your screen providing you options for the status image. For this [project](https://github.com/Mastersam07/PiggyX), I integrated on the master branch and used the markdown status image.

![](https://cdn-images-1.medium.com/max/1024/1*2kSEI7-e6v4Y5lyObBastg.png)<figcaption>status image travis-ci</figcaption>

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](https://github.com/Mastersam07/PiggyX).

![](https://cdn-images-1.medium.com/max/784/1*j9F4RV0gJs7ZzL3uCQkD8w.png)<figcaption><a href="https://github.com/Mastersam07/PiggyX/blob/master/README.md">https://github.com/Mastersam07/PiggyX/blob/master/README.md</a></figcaption>

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

* * *