DEV Community

Samuel Abada
Samuel Abada

Posted on • Originally published at itnext.io on

Setting Up CI/CD For Flutter With Codemagic

CI/CD For Flutter Apps

Building good software and writing code quickly to achieve business goals seems like some dilemma as claimed by some programmers. Developers want to build products faster and also write good software at the same time. With CI/CD (Continuous Integration/Continuous Delivery), this is no longer an issue and yes, everyone wins ๐Ÿ˜Š ๐Ÿ˜Š ๐Ÿ˜Š.

The purpose of CI/CD is to continuously merge working product versions to the main development branch and frequent build execution to discover potential bugs and resolution of integration problems. CI improves on the stability of the product with each development cycle since each time code is pushed, automatic builds are triggered and integration tests are run to ensure that the new units being added do not โ€œbreakโ€ the previously successfully built application. If the test fails, the build fails hence ensuring that the app remains stable. When it comes to preparing an app for release, that is โ€œContinuous Deliveryโ€ as โ€œContinuous Deploymentโ€ is responsible for automatic deployment to production. I guess itโ€™s clear now ๐Ÿ˜‰ ๐Ÿ˜‰ ๐Ÿ˜‰.

Today, there are a good number of tools for setting up CI/CD for many programming languages. I will be walking us through setting up CI/CD for a Flutter application with CodeMagic.

https://blog.codemagic.io/getting-started-with-codemagic/

CodeMagic is a CI/CD tool and like other CI/CD tools, it starts with a Git repository or some decentralized repository at least. When code is pushed to this repository, it triggers a new build process. If the build fails at any point, it will halt any further progress of the CI/CD process and give logs so we know where exactly the issue came from. Successful builds deliver the application artefacts for iOS and Android for installation on the respective devices. Codemagic allows to test and release Flutter apps without issues and with no configuration. As a developer, you can run custom scripts and create custom workflows for your apps. Cool right ๐Ÿ˜Ž๐Ÿ˜Ž๐Ÿ˜Ž? Lets Startโ€ฆ

Requirements

Setting up your Flutter app on Codemagic, you need a couple of things.

  1. Obviously, your Flutter app with some tests.
  2. The Flutter app should be hosted on GitHub, GitLab or Bitbucket.
  3. Optional 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 artefacts.

Now, we are ready to add CI/CD to our Flutter app. However, this writeup will not cover code signing and publishing.

Create a Github Project

Create your flutter application and push it to GitHub. For the purpose of this tutorial, I will be using the WhatsApp status saver built in my previous article. The codes are available on Github. Click here to access the codes. You can read the previous articles here and here and follow the development process.

Register For CodeMagic

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

Sign In to Codemagic

Your First Build

Once you sign in, you will see the Codemagic dashboard with the app repositories. You can filter the list or search apps to find your Flutter app.

Application Overview

For apps which you are configuring for the first time, you can start by clicking โ€œStart your first buildโ€ button. In the above screenshot, we have a not applicable button as this app has been built previously.

The Build Workflow

When you start a build, Codemagic will create a workflow for your Flutter project. You can also customize it to suit your needs.

Build Workflow

From the above, we can see that the default workflow will start the build with the following stepsโ€Šโ€”โ€Špreparing the build machine, fetching app sources(checking out the source code), installing Flutter dependencies, running tests, building the apps and publishing the artefacts.

Build Report

Below is an overview of the details when the build is finished.

Build Report

An email will also be sent to you with all these details. You can also set up your Slack channel to receive the build reports. The mail you receive should look like this:

Yes, we have just added CI/CD support for our Flutter app without any configuration ๐Ÿ˜‹ ๐Ÿ˜‹ ๐Ÿ˜‹. This is the magic in Code-magic ๐Ÿ˜๐Ÿ˜๐Ÿ˜.

But wait, what if your build fails? ๐Ÿ˜ช ๐Ÿ˜ช ๐Ÿ˜ช. Do not worry, it will not end in tears ๐Ÿ˜‰.

Build Failures

Well, not all builds are successful. I have had my own fair share of failed builds ๐Ÿ˜ช ๐Ÿ˜ช ๐Ÿ˜ช but then we can always resolve it as 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.

blog.codemagic.io

As seen above, integration tests and widget tests are passing, but the unit test is failing. We can then fix the problem to fix the build. When tests fail, you will also get an email about the test failure with link to the build logs. I will cover integration, unit and widget tests in another article ๐Ÿค“ ๐Ÿค“ ๐Ÿค“.

Default Workflow And Custom Workflow

Default flow covers all the basics needed for the CI/CD but then, 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 such as Slack for example. Letโ€™s dive into customizing a workflow.

Build Phase

Codemagic build phase of Flutter apps has various options to define the build process. You can start by selecting which branches to build and how to trigger builds.

You can also select other categories like Flutter version, build configuration, platform, Xcode version and custom build arguments.

Above is the default workflow settings. You can customize the build process by changing the default behaviour. Also, you can add a custom script before every phase. It's easy to setup. Just click on the + sign on top of each phase. See the below image for what you are expected to see.

You can add any command in the pre-build script say you want to install some dependencies.

Test Phase

Here, you can enable or disable execution. This phase has two sections, one for the unit and widget tests and the other is for the integration tests. The test settings are kind of straightforward. You set how the tests affect the build. You can enable Flutter analyzer, enable Flutter test which runs the unit tests in your application. You can deactivate the automatic build failures resulting from failed tests here, though this is not a recommended option for builds going out to production at least. Always save the settings for each individual section since there is no universal button to save all settings. Codemagic automatically recognizes the widget, unit and integration tests and enables them by default as you can see below.

we can use custom test commands by disabling the default behaviour. For example, say we want to run just UI tests from the command line, we can add a pre-test phase with the command:

$flutter drive --target=test_driver/main.dart

Publish Phase

By default, only the email is configured if you have provided it with GitHub/Bitbucket/GitLab as we have to explicitly configure any other aspects 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

Even with these, you can also write some custom scripts to deploy the artefacts to third-party services. With the power of scripting, we can configure custom workflows in Codemagic to define a stronger build process for Flutter apps.

Multiple workflows

Codemagic allows us to 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.

Build Status Badge

You want to include a build status badge to your GitHub repo so the status of your build is shown? Say no more. Click on the settings icon in your Codemagic build. A screen as shown below should appear.

At the right-hand side, we can see a build badge. For builds that passed, colour is green and for failed builds, the colour is red. You could choose to make the builds available publicly. You can also add the badge to your repo by either a markdown or a badge URL which you could add to your README.md. Click on the arrow/dropdown button beside the badge and you should see the badge URL and markdown. Copy it and use where necessary. We should have a shiny badge as shown below in the Github repository.

https://github.com/Mastersam07/wa_status_saver

And just like that, your Workflow is set and all the triggers are in place ๐Ÿ˜ ๐Ÿ˜ ๐Ÿ˜. When you push code, make a pull request, it will trigger the magic and boom your app will be delivered and deployed to all interested parties through the preset channels.

Head to codemagic.io and try it out. The user experience is ๐Ÿ’ฅ ๐Ÿ’ฅ ๐Ÿ’ฅ.

You can also visit Codemagic blogโ€Šโ€”โ€Šhttps://blog.codemagic.io/getting-started-with-codemagic/


Top comments (0)