Flutter at OY! Indonesia: CI/CD Implementation

Continuous Integration Implementation in Flutter

Prior to Flutter, we used Fastlane for our Continuous Integration (CI) and Continuous Development (CD) for our native (i.e. Android and iOS) app. Since we migrated our codebase to Flutter in October 2019, we needed to change our CI implementation too.

CI is a development practice where our code in shared repository is built and tested automatically by machine. So if an engineer made some changes in code, the machine will run some tests and verify if the changed code caused some problem or not. And CD means that every time the code has passed CI test, in flutter case it will automatically upload iOS (.ipa) and Android (.apk) to your app distribution channel.

In OY!, we useCircle CI service to run our CI because of its reliability and how seamless it integrates with Github; our code repository. Prior to Flutter, we had two separate CI configuration for each of our native app and now we’re using only one. Here is a snippet of the config.yml that we use for our Flutter app.

version: 2.1
  jobs:
    test:
      docker:
        - image: cirrusci/flutter:v1.12.13-hotfix.5
      steps:
        - checkout
        - run: flutter test
workflows:
  version: 2.1
  test_app:
    jobs:
      - test

From the above snippet, you can see that we use a CircleCI docker image and run flutter test command on our codebase. This command will run all of our tests (both unit or widget tests) located on test folder inside our Flutter codebase.

In that config.yml we are using CirrusCI docker image with a specific flutter version. This is important because sometimes there are breaking changes in Flutter that could cause errors in our code and if we do not specify the version, it will always pull the latest version.

Result

Our Flutter CI implementation needs only around 1 minute build time. Additionally, after the Flutter migration, we only need to maintain one config.yml instead of two (1 for android and 1 for iOS) and only need to run the test script once.

Example of our CI on iOS

Above you can see our old iOS CI which need around 25 minutes just to complete the test and below is our flutter CI which only need 1 minutes and it test both android and iOS.

So why in flutter the CI need only 1 minute and it takes around 25 minutes in iOS. In iOS every time the CI need to run the test, it need to build the whole project before it can run the test and it takes a lot of time.

Example of our CI running flutter test script

To further optimize our CI process, we also use a docker image that contain a flutter SDK and its dependencies so that we do not need to configure or download each of them (which saves us even more build time!!).

Continuous Delivery Implementation in Flutter

After implementing continuous integration in Flutter what we do next is implementing continuous delivery (CD). Our CD system is built using Fastlane and we are using Firebase app distribution for app delivery. We are using firebase app distribution because of its reliability and how it easily integrates with other services on firebase that we are using. On firebase we’re using firebase cloud messaging to send push notification, firebase remote config to change some config on the fly, etc. By using firebase app distribution we don’t need to add another stack into our current tech stack.

Here is the step on our CD system:

• Android

1. Login to Firebase CLI
2. Build android apk using flutter command flutter build
3. Upload the apk file to firebase app distribution
4. Notify QA if a new build is available on QA slack channel

• iOS

1. Retrieve Apple certificate using Fastlane
2. Login to Firebase CLI
3. Build iOS using flutter command flutter build
4. Build and export ipa file using xcodebuild
5. Upload the ipa file to firebase app distribution
6. Notify QA if a new build is available on QA slack #channel

Special case for iOS, flutter can’t build directly to .ipa file, it needs to be build by Xcode; either using Xcode itself or the xcodebuild command.

In OY! Indonesia we have 3 pipeline for Continuous Delivery:

1. dev → Development build uploaded to Firebase App Distribution
2. staging → Production build uploaded to Firebase App Distribution
3. prod → Production build uploaded to Test Flight / Google Play Alpha

By separating into 3 pipelines engineer can choose which pipeline best suites their need. With these, engineers don’t need to manually upload build and notify QA when a new build is available. It is done automatically through our CD system run by CircleCI triggered based on our role. Our role is whenever engineer push commit or merge Pull Request to develop branch, it will automatically trigger CI and CD.

Here is the sample of how our CD system notify QA when there is a new build.

Automatic Code Analyzer

In OY! we invest a lot on the readability and robustness of our code. Fortunately, in Flutter there is a built-in linter, flutter analyze, which analyze our code for potential errors. We integrated this command into our CI system and post the result to the relevant Github PR as a comment. This will ensure that any engineer who forgets to fix their linting issues can easily correct it.

Here is an example of how our linting result is displayed on a Github PR.

Analyzer result shown on github pull request

The result of this analyzer is sent on email by Github too.

Analyzer result shown on github email

Conclusion

In this article we have shown how we dramatically improve our CI/CD pipeline after we migrated from native (especially iOS) to Flutter in order to improve our engineering productivity. Our CI/CD implementation on Flutter is seamless and do not require us to invest a lot of time to implement. You can add more functionality on your flutter CI like code analyzer it’ll improve your development flow as we do.

This is the Part 4 in a series of articles about Flutter in OY! Indonesia.

• Part 1 — The Motivation
• Part 2 — Migration Strategy and Architecture
• Part 3 — Key Differences in Flutter vs Native Development
• Part 4 — CI/CD Implementation

If you are passionate about solving interesting and impactful challenges, OY! Indonesia would be a great playground for you to unleash your creativity. Join us!

Want to experience the most seamless payment experience? Try to download OY! in Google Play and App Store and please feel free to give us feedback about it 👌🏼.