How to integrate CI/CD in Flutter using Codemagic Workflow Editor — A Practical Guide

Easily automate your app build Process!

Hello 🙋🏻‍♂️ Developers,

What are CI & CD?

In software engineering, CI/CD or CICD is the combined practices of continuous integration and continuous delivery or continuous deployment. CI/CD bridges the gaps between development and operational activities and teams by enforcing automation in building, testing and deployment of applications.

Source: Wikipedia

What does Codemagic do?

Codemagic allows you to automatically publish your app to various services, such as Google Play Store, App Store Connect & Firebase App Distribution.

Source: codemagic.io

Why Codemagic?

Codemagic is designed with cross-platform app development in mind and is voted the best CI/CD tool in Flutter’s user survey. You can configure your Flutter builds in the Workflow Editor or by using the highly customizable codemagic. yaml file, and build apps for Android, iOS, the web and desktop.

Source: codemagic.io

Table of Contents

1. Prerequisites
2. How to connect Repository to Codemagic?
3. Understanding Workflow Editor
   a. Build Triggers Section
   b. Environment Variables Section
   c. Tests Section
   d. Build Section
   e. Distribution Section
   f. Notifications Section

Prerequisites

• Codemagic Account
• Repository on any code hosting platform

How to connect Repository to Codemagic?

There are two ways to do it:

First: To use this approach, You need to authorize Codemagic to access your organization’s Git Provider Account.

• Select your Git Provider (In this example, I am using GitHub Account)
• In the next step, Authorize GitHub to access your Account

Second: If you don’t want to provide access to your GitHub account (in case of privacy concerns), you can follow this approach.

• Click on Other Option on Choose Repository Dialog to manually add the repository.
• Provide access to it (applicable only when using private repositories)
• Click on Generate Key Pair Button. Codemagic will provide you SSH Key.

[IMPORTANT]

Add the SSH Key to GitHub Account before adding the app in Codemagic. Refer to this documentation for more details

Next, select the App from Homepage to Complete Build Setup

NOTE: If you use second approach, you need to manually call webhook for build triggers. (Automatic Build triggers will not work directly in this case)

Codemagic provides two ways to create a workflow:

1. Using Workflow Editor
2. Using .yaml Configuration File

Understanding Workflow Editor

Build Triggers Section

Pattern Examples defined by Codemagic

Pattern Examples defined by Codemagic

Environment Variables Section

Environment Variables Section on Workflow Editor

• You can add secrets or confidential keys in this section & access them using $VARIABLE_NAME within your Codemagic Build Steps.

Tests Section

1. Static Code Analysis

This will run flutter analyze Command. (You can also provide additional arguments in analyze command.

Static Code Analysis Section on Workflow Editor

2. Integration & Unit Tests

If your project has Integrations/ Unit Tests, you can run Tests by passing arguments to flutter test command in this section.

Integration & Unit Tests Section on Workflow Editor

Build Section

• Specify Flutter Version, Xcode Version & CocoaPods Version in Build Section. Codemagic’s VM instance will use the specified version to create App Build.

• Select Project Path (Not Applicable If you have a single Flutter Project in your Repo)

Specify Android Build Format & Build Mode

Select any one of three formats for Android Build:

1. APK
2. Android App Bundle (AAB)
3. Android App Bundle & Universal APK

[USEFUL FEATURE]

You can also pass different Build Arguments for each Build Platform.

Distribution Section

Android Code Signing

• Provide Android KeyStore File, Password & Key alias.

Android

Google Play Integration

• Provide `credentials.json (You can create a new JSON using the GCP Service Account)
• Specify the track on which you have to publish your app.
• Set Update Priority for Publishing (Recommended: Default Priority)
• Set Rollout Fraction (Don’t define the value if you wish to release to all users)

iOS Code Signing

Set up iOS code signing to enable installing your app on real devices and publishing it to the App Store.

Codemagic provides two ways to code sign iOS App

1. Automatic

• You have to Connect App Store with Codemagic using these Steps
• Codemagic will generate your signing certificate and provisioning profile and use them for code signing.

2. Manual

• You have to add Code Signing (.p12) Certificate File & Provisioning Profiles (If your app contains app extensions, you will need to upload an additional provisioning profile for each extension.)

App Store Connect

1. Set up publishing to App Store Connect.
2. If you want to submit an app to a specific group on your App Store, enable Distribute to Beta Groups & Specify Group Name.

Firebase Distribution

• You can use Firebase App Distribution Service to distribute apps to your internal testers.
• You will need Firebase Token, Firebase App Id & the Tester Group to Publish the app to Firebase Distribution

Notifications Section

Notify Build Status through Email & Slack

You can also specify Max Build Duration to your Build Process

😎 Pro Tip: Use this to save your Build Minutes

Easily automate the process of building & deploying applications!

Thanks for reading 🙌🏻

If I got something wrong? Let me know in the comments. I would love to improve. 🤘🏻

Clap 👏 If this article helps you (You can clap 50 times) 🙌🏻