Continuous Integration for Flutter with Codemagic

Codemagic
Codemagic
Apr 1, 2019 · 6 min read
Image for post
Image for post

If you are even remotely interested in mobile app development, you know about a new kid in a block — Flutter. Google’s new mobile app SDK which allows developers to write both iOS and Android apps using the same source code and language.

The popularity of Flutter is increasing rapidly, as some of the biggest companies have started to choose it for their apps. For example Alibaba, the world e-commerce giant.

With a growing number of apps, there has been an increasing need for Continuous Integration and Continuous Delivery (CI/CD) for Flutter apps so that they can be tested and released regularly. Luckily, Google partnered with Nevercode who built the Codemagic CI/CD solution dedicated exclusively to Flutter apps. In this post, we will explain how to set up Codemagic for existing Flutter apps that you are developing or have already developed.

Codemagic — First CI for Flutter

Codemagic is giving you the possibility to test and release Flutter apps without issues and with no configuration. Developers can run custom scripts and create custom workflows for their apps.

Let’s start!

Requirements

To start with Codemagic, you will need a couple of things:

  1. Your Flutter app with some tests.
  2. The app should be hosted on GitHub, GitLab or Bitbucket.
  3. Code signing details, like certificates and provisioning profiles, if you want to publish to App Store or Play Store.
  4. Optional Slack workspace for sending build reports and artifacts.

That’s all! If you have items above you are now ready to add CI/CD to your Flutter app. Now let’s go through some basic examples from real apps.

Register for Codemagic

Head over to codemagic.io and sign up, using your GitHub, Bitbucket or GitLab account. You can connect all of these repositories with one Codemagic account, so you can have all of your apps in one place.

Image for post
Image for post

Create your first build

The first thing you will see once you log in is the dashboard with the app repositories where you can filter or a search your apps to find your Flutter app. Now you can start by clicking “Start your first build” button.

Image for post
Image for post

Default build workflow

Once you start a build, Codemagic will create a workflow for your Flutter project. If you want you can customize it to suit your needs. The default workflow will start the build with the following steps.

The steps include preparing the build machine, checking out the source code, installing Flutter dependencies, running tests, building the apps and publishing the artifacts.

Build a report

When the build is finished, you will be able to see an overview of all the details. It looks like this:

Image for post
Image for post

You will also receive an email with all of these details. If you want to have build reports in your Slack channel, that is possible as well.

That was easy, wasn’t it?

Build failures

Unfortunately, not all builds are successful. What happens in that case? Codemagic provides very detailed logs of each step regardless of whether it passes or fails. Here we can see a failing unit test and all of the details are logged in the build failure.

Image for post
Image for post

As we can see, integration tests and widget tests are passing, but the unit test is failing. You can solve the problem to fix the build. When tests fail, you will also get an email about the test failure with a link to the build logs.

Custom workflow vs Default workflow

The Default flow will cover all the basics needed for the CI/CD, but often you will want to add some custom things as part of your build process. You may want to send build status to some third party communication channel, as Slack for example. Now let’s see how to customize a workflow.

Build phase

Build phase of Flutter apps in Codemagic gives various options to define the build process. Start by selecting branches you want to build and choosing how to trigger builds.

Image for post
Image for post

You can also select:

  1. Flutter version;
  2. Build configuration for building apps, e.g debug or release;
  3. Platforms like iOS or Android;
  4. Xcode version;
  5. Custom build arguments.

The default workflow selects the following settings as part of the build.

Image for post
Image for post

But, you can always customize the build process by changing the default behavior. Also, you can add a custom script before every phase. To set this up just click on the + sign on top of each phase. You can see how that looks like on the photo below.

Image for post
Image for post

Test phase

In the test phase, you can enable or disable execution. Test phase itself has two sections, one for the unit and widget tests and the other is for the integration tests. Codemagic will automatically recognize the widget, unit and integration tests and will enable them by default as you can see below.

Image for post
Image for post

Test section in Codemagic

You can always use custom test commands by disabling the default setting. If you want to run just UI tests for example from the command line you can add a pre-test phase with the following command:

$flutter drive — target=test_driver/main.dart

This would trigger this command instead of the default one.

Publish phase

In the publishing phase by default the only email is configured if you have provided it, other details need to be configured for publishing the build reports and artifacts. You should configure any other aspect of the Publishing phase, including:

  1. Uploading the code signing assets for Android and iOS
  2. Setting up slack
  3. Providing Google Play and App Store Connect details for publishing
Image for post
Image for post

Publish section in Codemagic

You can write custom scripts to deploy the artifacts to third-party services like. On top of these, we can also write some custom scripts to deploy the artifacts to third-party services like Fabric or App Centar.

Multiple workflows

With Codemagic you can create multiple workflows to meet different requirements of various configurations and software versions. Create a new workflow by duplicating the existing one and renaming it. To do this, follow these easy steps:

  1. Go to app settings.
  2. In the Workflow settings section, click Duplicate workflow. Select the workflow and rename it.

Conclusion

Codemagic is the only dedicated CI/CD solution made just for Flutter apps, that allows you to build, test and publish Flutter apps with zero configuration. And don’t forget that you can also run builds in controlled environments using custom workflows.

Flawless iOS

🍏 Community around iOS development, mobile design, and…

Codemagic

Written by

Codemagic

World’s first CI/CD for Flutter. The fastest route to your end users. Build, test and deliver your mobile apps in record time- codemagic.io

Flawless iOS

🍏 Community around iOS development, mobile design, and marketing

Codemagic

Written by

Codemagic

World’s first CI/CD for Flutter. The fastest route to your end users. Build, test and deliver your mobile apps in record time- codemagic.io

Flawless iOS

🍏 Community around iOS development, mobile design, and marketing

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store