How to automate Flutter Deployment with CI/CD?

Deployment is always exciting once you finally completed your Flutter App and ready to launch. However, the process can be really tedious. Every time you need to manually building, testing, and deploying your app especially when you’re working on large projects or have frequent updates. The good news is, there are Continuous Integration (CI) and Continuous Deployment (CD) pipelines can help you automate these processes. Such that whenever you made the changes, your app is tested and deployed automatically.

Sounds good?

In this tutorial, I will teach you how to set up a CI/CD pipeline for Flutter using GitHub Actions and Codemagic. You can use it for both Android and iOS platforms.

In the end, you’ll know how to:

1. Set up CI/CD with GitHub Actions for automatic testing.
2. Use Codemagic for automated builds and deployments to the Google Play Store and Apple App Store.

What is CI and CD pipeline?

In the first place, we need to understand the concept of CI and CD.

By definition, Continuous Integration (CI) is a practice where developers like you frequently integrate your code into a shared repository (e.g. Github, Bitbucket). So that automated testing and builds are triggered on every push or pull request to ensure that the new code doesn’t break the app. This is extremely useful when you are working as a team for a medium to large scale project.

On the other side, Continuous Deployment (CD) takes this process further by automatically deploying the app to the production environment (like Google Play or the App Store). Meaning that after the code has passed all tests, it can be deployed and go LIVE automatically.

So now we will learn how to setup this pipeline in Flutter step by step.

Setting Up GitHub Actions for Flutter

The first step is to learn how to use GitHub Actions. It is a tool provided by Github repository automate your workflow from idea to production. You can use it to automate workflows directly in your GitHub. In our use case, we will use it to automate testing and build processes for your Flutter app.

Creating a GitHub Actions Workflow

To set up GitHub Actions, you need to create a .github/workflows/ directory in your repository. And then add a workflow file called flutter.yml. Below are the configurations of the file:

name: Flutter CI

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Set up Flutter
        uses: subosito/flutter-action@v2
        with:
          flutter-version: 'stable'

      - name: Install dependencies
        run: flutter pub get

      - name: Run tests
        run: flutter test

      - name: Build APK (Android)
        run: flutter build apk --release

      - name: Build IPA (iOS)
        if: github.event_name == 'push'
        run: flutter build ios --release

Explanation:

on: Specifies when the workflow is triggered, such as on push or pull requests to the main branch.

jobs: Defines the tasks the workflow will perform, like checking out the repository, setting up Flutter, running tests, and building the app for Android and iOS.

Run tests: This step runs Flutter’s unit tests to ensure your code works as expected before building.

Once you push the flutter.yml file to your GitHub repository, the magic happen. The CI process will automatically run whenever changes are pushed to the main branch!

Running the Workflow

After setting up the workflow, GitHub will automatically run the workflow for every new push or pull request. You can view the workflow’s status by going to the Actions tab in your GitHub repository. Congratulation, we have just finished the first part.

Setting Up Codemagic for Continuous Deployment

The second part of this tutorial will go for Codemagic. It is a CI/CD tool specifically designed for Flutter apps. With this tool, you can simplifies the process of building, testing, and deploying apps for both Android and iOS platform. In addition, you can automate the process of publishing your app to the Google Play Store and Apple App Store.

For individual developer, it’s basically free of charge. So that you can evaluate the product easily.

Create a Codemagic Account

First step just go to the website of Codemagic and sign up using your Email, GitHub, GitLab, or Bitbucket account. Once you’ve signed up, you’ll be prompted to connect your repositories.

Setting Up a New Workflow

In Codemagic, select the repository containing your Flutter app. Next you choose the workflow type, such as Flutter app. After that, you can configure the build settings such as Flutter version. Remember you need to specify the Flutter version you’re using.

For the option Build for Android and iOS, you can select both platforms if you want to build for both. And for the under Post-processing, you can configure automated deployment.

Configuring Android Deployment (Google Play)

To deploy your Android app to the Google Play Store, follow these steps:

1. Google Play API Service Account: You need to create a service account in the Google Cloud Console. Here’s how:

• Go to API & Services > Credentials and create a new service account.
• Grant the service account access to the Google Play Developer API.
• Download the service account JSON key and upload it to Codemagic in the environment settings.

1. Configure Google Play Deployment in Codemagic:

• In your Codemagic workflow, go to the Publish section.
• Under Android, select Google Play as the deployment target.
• Upload your keystore file and configure the keystore properties (alias, password, etc.).

1. Once configured, Codemagic will automatically build your APK and upload it to the Google Play Console.

Configuring iOS Deployment (Apple App Store)

To deploy your iOS app to the Apple App Store, you need an Apple Developer account and access to App Store Connect.

1. App Store Connect API Key:

• In App Store Connect, generate an API key by going to Users and Access > Keys.
• Upload this key to Codemagic in the Environment variables section for iOS.

1. Configure iOS Deployment in Codemagic:

• Under the Publish section, select App Store Connect for iOS deployment.
• Codemagic will automatically generate an IPA file and upload it to App Store Connect.

Once Codemagic is configured for both Android and iOS, it will handle the entire build and deployment process automatically. Every time you push changes to your repository, Codemagic will build the app, run tests, and deploy it to the respective app store.

Automating Tests Before Deployment

To ensure the quality of your app, it’s important to run automated tests before deployment. Both GitHub Actions and Codemagic allow you to automate tests during the CI/CD process.

1. Unit Testing

Dart and Flutter provide a robust testing framework to write unit tests. For example, create a test file in test/widget_test.dart:

import 'package:flutter_test/flutter_test.dart';
import 'package:your_app/main.dart';

void main() {
  testWidgets('Test title widget', (WidgetTester tester) async {
    await tester.pumpWidget(MyApp());
    expect(find.text('Hello World'), findsOneWidget);
  });
}

In your GitHub Actions or Codemagic workflow, ensure that the flutter test command is included to automatically run these tests before building the app.

2. Integration Testing

For more complex apps, consider adding integration tests to simulate user interactions and verify the overall behavior of the app.

Create an integration test in integration_test/app_test.dart:

import 'package:flutter_test/flutter_test.dart';
import 'package:integration_test/integration_test.dart';
import 'package:your_app/main.dart';

void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  testWidgets('Counter increments', (WidgetTester tester) async {
    await tester.pumpWidget(MyApp());

    expect(find.text('0'), findsOneWidget);
    await tester.tap(find.byIcon(Icons.add));
    await tester.pump();
    expect(find.text('1'), findsOneWidget);
  });
}

You can run these tests with:

flutter drive --target=integration_test/app_test.dart

Conclusion: Automating Your Flutter Deployment Pipeline

With CI/CD pipelines, you can automate the testing, building, and deployment of your Flutter app, saving time and reducing the chances of human error. GitHub Actions and Codemagic provide powerful tools to ensure that your app is always built and deployed efficiently.

In this tutorial, you’ve learned how to:

• Set up automated testing and building with GitHub Actions.
• Automate deployment to the Google Play Store and Apple App Store with Codemagic.
• Run automated tests to ensure the quality of your app before it’s deployed.

As you continue to improve your app, automating these processes will make your workflow smoother and more reliable. Keep building, and happy coding!