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:
- Your Flutter app with some tests.
- The app should be hosted on GitHub, GitLab or Bitbucket.
- Code signing details, like certificates and provisioning profiles, if you want to publish to App Store or Play Store.
- 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.
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.
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:
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.
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.
You can also select:
- Flutter version;
- Build configuration for building apps, e.g debug or release;
- Platforms like iOS or Android;
- Xcode version;
- Custom build arguments.
The default workflow selects the following settings as part of the build.
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.
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.
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:
- Uploading the code signing assets for Android and iOS
- Setting up slack
- Providing Google Play and App Store Connect details for publishing
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:
- Go to app settings.
- 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.
