Automatically build your Flutter app APKs with Travis-CI

When attempting to setup Travis-CI, I saw more than a few articles on running Flutter tests with Travis, but none for actually building and obtaining a compiled APK as we wanted.

Whenever changes are pushed to the GitHub repository a new build is automatically generated by Travis and a link to the APK on WeTransfer is posted to a Discord channel for supporters and beta testers allowing them to comment on the new build.

In this article I’m going to comment on how we achieved this workflow, as well as giving some general advice.

Step 1: Create Travis Configuration

Start by creating the following directory structure.
You only need to include the .travis/ directory (also in the root) if you plan to add additional build scripts to your project.

your_project_root/
    - .travis.yml
    - .travis/
        - utils/

In your .travis.yml you need to add some basic boilerplate configuration:
I didn’t set the language to Android because it didn’t seem to setup the SDK correctly, plus using node as the language allowed us to easily set up additional build scripts.

Next, we need to setup our initial before_script stage. This will execute commands to setup Gradle, the Android SDK and Flutter.

Finally, to get our fundamental configuration working, we of course have to actually execute flutter build. Which we do in the script stage.

Step 2: Upload the finished build to WeTransfer

Obviously, a key part of using Travis to build the compiled APK is being able to obtain the compiled APK. For this we use WeTransfer, a well-designed free (temporary) file sharing service with an API; exactly what we need.

Register an account for the WeTransfer Public API (developers.wetransfer.com) and under My apps, click ‘Create new application’. Enter your application’s details and copy the API key.

Create an environment variable for your key. Go to the Travis page for your repository and click ‘More options’; in the dropdown choose ‘Settings’ and under environment variables add a new environment variable called WT_API_KEY and paste in the key you copied previously. Do not enable the option to ‘Display value in log file’, this will expose your WeTransfer API key to anyone viewing your build logs.

In order to give the file a clear name, we extract useful commit information from git (note; using the Travis commit reference.)

$TRAVIS_COMMIT is an automatic environment variable, exported by Travis at the start of a build. It refers to the git commit hash that is currently being built by Travis.

Then, we install the WeTransfer SDK using npm and call our own script:

This script should be placed in ./.travis/utils/runUpload.js (relative to your project root)

As you can see, it just uploads the file in the Flutter build output directory and prints the URL, from there you’re ready to go with your compiled APK.

If you want to stop here, you can just echo the URL for the APK and then you’re able to download the builds.

Step 3: Execute pre and post build web-hooks

We have web-hooks that send a message to a channel in our Discord server when a build has started or ended.

We find it’s pretty helpful to be alerted when a new build starts and finishes, however we also wanted to give our supporters access to cutting-edge builds as soon as they’re pushed to GitHub and we can use our web-hooks to notify supporters when a new build is starting as well as when it is finished and available to download.

For each stage shown block above, you should add these commands underneath any that may already exist. e.g. the contents of after_failure above, should go after anything you have in your own after_failure block.

You may have noticed above that we have given numeric prefixes to each of our build scripts. This is because in our full configuration, we have further scripts to prepare our app build. This includes injecting a configuration into the app source code and checking translations.

You can check out our actual build configuration on the Kamino GitHub repository.

In Discord, click the cog to edit a channel and then click ‘Webhooks’. Choose ‘Create Webhook’, give it a name such as ‘Travis Build’ and copy the URL, then click Save.

In Travis, create an environment variable (see Step 2 for instructions on how to do this) for your web-hook URL. Again, do not enable ‘display value in log file’, this will allow anyone to send messages to your Discord channel with the web-hook.

Finally, you need to create the prebuild and postbuild scripts; these should go in the .travis folder in the root of your project (that you created in Step 1):

Feel free to use and customise these scripts as you wish.