Deploying Flutter Apps via AppCenter

To setup Continuous Integration and Deployment with Flutter apps, the following instructions will guide you through the process. This post does not include crash management or analytics, just building and distributing through AppCenter.

Source Control

The first step is storing your code in a various source control repository such as:
  • Azure DevOps
  • GitHub
  • Bitbucket
  • GitLab
These providers are available on AppCenter to automatically pull the latest source from to start the build process. Going forward, it will be assumed you have stored your source code with one of these providers.

Configure Your Flutter Apps

Android

There are a few steps needed to ensure your app is ready to be discovered, built and deployed via AppCenter. Remembering that this is just like a native Android app, you can find additional help in Building Java apps for Android if required.

AndroidX

While not completely necessary, I did run into some issues because my project wasn’t updated to AndroidX. This problem may not be applicable in the future, as most apps will transition to it, but in the meantime, make sure to update your app to AndroidX if it isn’t already.
Please follow the AndroidX compatibility documentation from Flutter, to ensure your app is running on AndroidX.

GitIgnore

In your .gitignore file in the root of your project folder, you need to remove some lines, so that you check in these files. You must do this, to enable AppCenter to detect your Android app. If you don’t, AppCenter will not be able to find your Android app, and not be able to build.

# Android related
[REMOVE THIS LINE] **/android/**/gradle-wrapper.jar
**/android/.gradle
**/android/captures/
[REMOVE THIS LINE]**/android/gradlew
[REMOVE THIS LINE]**/android/gradlew.bat
**/android/local.properties
**/android/**/GeneratedPluginRegistrant.java

The resulting section will look like this.

# Android related
**/android/.gradle
**/android/captures/
**/android/local.properties
**/android/**/GeneratedPluginRegistrant.java

Signing

An Android app needs to be signed before it can be installed on a real device. Follow the steps to setup the KeyStore and variables for signing in AppCenter.

Create KeyStore

A quick way to build a KeyStore, is to run this command. Please change the details as appropriate. (Replace the angular bracket sections, including removing the < > as well).

keytool -genkey -dname "cn=CompanyName, ou=OrgUnit, o=OrgName, c=US" -alias <Alias here> -keypass <Password Here> -keystore android.keystore -storepass <Password Here> -validity 10000 -keyalg RSA -keysize 2048

Place the resulting android.keystore in your android > app folder.

Note: alias, can be anything. I normally put the company name here. validity is 10000 days, which is roughly 27 years. Once your app commits to a keystore, it can not be changed, hence if you expect your app to outlive 27 years, choose a longer time frame.

Build Configuration

Open android > app > build.gradle

Modify the signingConfigs and buildTypes section. Also look at the versionCode in defaultConfig, if you want your build version number to increment per the AppCenter build number.

android {
    compileSdkVersion 28

    lintOptions {
        disable 'InvalidPackage'
    }

    defaultConfig {
        applicationId "com.company.example"
        minSdkVersion 21
        targetSdkVersion 28
        versionCode System.getenv('APPCENTER_BUILD_ID').toInteger()
        versionName flutterVersionName
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    signingConfigs {
        release {
            storeFile rootProject.file("app/android.keystore")
            storePassword System.getenv("APPCENTER_KEYSTORE_PASSWORD")
            keyAlias System.getenv("APPCENTER_KEY_ALIAS")
            keyPassword System.getenv("APPCENTER_KEY_PASSWORD")
        }
    }
    buildTypes {
        release {
            signingConfig signingConfigs.release
        }
    }
}

Build Script

Finally we need to create a build script. AppCenter allows you to have Post-Clone, Pre-build and Post-build scripts.

Create a new file called appcenter-post-clone.sh with the contents below and place into android > app

#!/usr/bin/env bash
# place this script in project/android/app/
cd ..
# fail if any command fails
set -e
# debug log
set -x

cd ..
# choose a different release channel if you want - https://github.com/flutter/flutter/wiki/Flutter-build-release-channels
# stable - recommended for production

git clone -b stable https://github.com/flutter/flutter.git
export PATH=`pwd`/flutter/bin:$PATH

flutter channel stable
flutter doctor
flutter build apk --release

# copy the APK where AppCenter will find it
mkdir -p android/app/build/outputs/apk/; mv build/app/outputs/apk/release/app-release.apk $_<

This script was based on https://github.com/microsoft/appcenter/blob/master/sample-build-scripts/flutter/android-build/appcenter-post-clone.sh

iOS

iOS doesn’t require as much setup, but you still need a build script and files for signing your app.

Signing

To sign your iOS app, you will need 2 files.

  • Provisioning Profile (*.mobileprovision)
  • Certificate (*.p12)

If you need to generate these, or are unsure on how to obtain them, please follow Where do I get the code signing files I need.

Build Script

Finally we need to create a build script. AppCenter allows you to have Post-Clone, Pre-build and Post-build scripts.

Create a new file called appcenter-post-clone.sh with the contents below and place into the root of the ios folder.

#!/usr/bin/env bash
#Place this script in project/ios/

# fail if any command fails
set -e
# debug log
set -x

cd ..
git clone -b stable https://github.com/flutter/flutter.git
export PATH=`pwd`/flutter/bin:$PATH

flutter channel stable
flutter doctor

echo "Installed flutter to `pwd`/flutter"

flutter build ios --release --no-codesign

This script was based on https://github.com/microsoft/appcenter/blob/master/sample-build-scripts/flutter/ios-build/appcenter-post-clone.sh

If you want more information on scripting including additional App Center Variables, read the Build scripts documentation.

Please check in all the changes you made above into your source control provider.

AppCenter Setup

Now that our app is ready, lets set this up on AppCenter. Go to https://appcenter.ms/apps.

Android

Add New App

Select Android and Java / Kotlin and change any other details as needed.

Go to Build (left hand menu) and then select your Source Control provider and connect as appropriate. Once complete you will be presented with a Build Configuration.

Build Configuration

I have chosen to manually trigger my builds, and auto increment version code. You may wish to change to build on every push if required.

Signing

Add in the environmental variables and required values.

  • APPCENTER_KEYSTORE_PASSWORD
  • APPCENTER_KEY_ALIAS
  • APPCENTER_KEY_PASSWORD

Note: Don’t forget to press the lock symbol next to the passwords, to ensure they remain secure.

Select On for Sign builds and tick My Gradle settings are entirely set to handle signing automatically.

Distribution

Select On for Distribute builds and add in any groups. Collaborators should already be existing and include you by default. Tick Do not notify testers if you don’t want an email on every build.

Click Save & Build

iOS

Add New App

Select iOS and Objective-C / Swift and change any other details as needed.

Go to Build (left hand menu) and then select your Source Control provider and connect as appropriate. Once complete you will be presented with a Build Configuration.

Build Configuration

I have chosen to manually trigger my builds, and auto increment version code. You may wish to change to build on every push if required.

Signing

No environmental variables need to be set. You now must upload your Provisioning Profile and Certificate that you generated or downloaded earlier.

Distribution

Select On for Distribute builds and add in any groups. Collaborators should already be existing and include you by default. Tick Do not notify testers if you don’t want an email on every build.

The build will now commence and take roughly 5 – 10 minutes. Once complete, you can now download from your mobile phone.

Downloading from AppCenter

Go to the Overview tab on the left hand menu and see your latest release. Click the download button.

You will see a QR code and app link.

Use your mobile phone’s camera to scan the QR code, or send the link to your mobile device. A website will open and further instructions will follow depending upon iOS or Android.

Now that you have your app deploying via AppCenter, there are more things to configure before it is ready for the AppStore. See Preparing an iOS app for release or Preparing an Android app for release for more information.

© 2019 Adam Pedley