The Complete Guide to Deploy Flutter Builds Using App Center

In today’s fast-paced world of mobile app development, having a streamlined and efficient process for building and distributing applications is crucial. Flutter, Google’s UI toolkit, has gained immense popularity for its cross-platform capabilities and rapid development cycle. However, while App Center by Microsoft is a powerful tool for mobile app distribution and continuous integration, it does not currently offer direct support for creating Flutter builds.
In this article, we will explore the step-by-step process of creating Flutter Android and iOS builds using App Center. By following the detailed instructions, code snippets, and relevant screenshots provided in each section, you will gain a thorough understanding of how to configure App Center for Flutter builds and automate the build process.

Get ready to unlock the potential of Flutter and App Center, empowering you to deliver high-quality mobile apps with ease. Let’s dive in!

ANDROID —

1. First you need to add a new app in App Center and enter the mandatory fields as shown in screenshot —

2. Now go to the Build tab and connect to the repo using preferred service (Eg:- Github) as shown in the screenshot.

3. Once you have connected your repo to the appcenter, now you need to configure the build for the automatic deploying process. For that, go to the Build tab and select the branch from which you want to create the app. But if you try to configure the build, you will see a message in the appcenter saying ‘We couldn’t find any Android projects in your branch.’ Since, appcenter is not able to find the android project, you need to comment 3 ignored files from android/.gitignore file. The files are — gradle-wrapper.jar, gradlew and gradlew.bat as shown in below screenshot.

4. Now if you try again to configure build, you will see that appcenter is able to find the android project successfully as shown in screenshot below.

After this, you need to add some scripts for the appcenter’s build process so that android apk or bundle can be successfully created. If you don't have basic understanding about appcenter’s scripts then you can check this link. For our project we need to add appcenter-post-clone.sh file in android/app directory and add the following content into it.

This script will setup the flutter environment in the appcenter before starting the build process.

5. Now if you go to the appcenter and click on configure build again, you will see that Post-clone script is shown in Build scripts section as shown in below screenshot. It means that script is successfully added and you are good to go. Now you need to add an environment variable in the configuration as — JAVA_HOME : $(JAVA_HOME_11_X64). Now just click on Save & Build and your app will start building. But wait, if you try to create a build then build might fail after sometime.

If you check the logs, you will see some issues in settings.gradle file in android directory as shown in below screenshot.

If you have faced same issue, then you need to follow below step—

6. (Need to be implemented in case you faced above issue) — Go to the android/.gitignore file and comment the /local.properties line there.
This will let you commit the local.properties file to your repo. But it is not advisable to commit this file because every system has its own version of this file, so we are going to commit the empty file and modify this file while creating the build by modifying settings.gradle file which is present in android directory as below —

As you can see that we are using an environment variable ‘IS_CI_BUILD’ in above file to check whether building is getting created from appcenter or manually. For this you need to add the environment variable in config of you appcenter build and set its value to true.

7. Now if you will try to create the build, then it will be successfully created, but cannot be distributed since appcenter will try to find the build in a specific directory which is different from the path of the build where flutter usually places the apk or the bundle after building.

So, you need to add a gradle task in android/app/build.gradle file inside the android section to copy the apk or bundle from the actual path to the destination path where appcenter is trying to find the build.

Please read the comments carefully in above gradle task to customize the task according to your project configuration. IS_CI_BUILD is an environment variable in appcenter that will allow the task to only run for appcenter builds, same as specified in step 6.

8. Now try again to build the android app using appcenter, and this time build will be successful without any issues and our custom gradle task also works fine as you can see in below screenshot.

iOS —

For iOS it is quite straightforward. You just need to add an appcenter script that will run after the code is cloned by appcenter. Steps are as follows —

1. Just add a new app like step 1 in android in appcenter with iOS as OS and Swift/Objective-C as Platform.
2. Connect the repo same as step 2 in Android.
3. Now if you try to configure build you will that iOS project is visible in Build app section. No need to comment any files in .gitignore file.

4. Now add an appcenter script (appcenter-post-clone.sh) in iOS directory and add the following content into it.

5. Just try to build the app now, and you will see that build is successful.

Thank you for taking the time to read the article. If you encounter any challenges or have any questions, please feel free to reach out to me. I would be happy to assist you. Stay connected by connecting with me on LinkedIn.