Flutter Android App Distribution with Visual Studio AppCenter

Hello everyone,

My name is Tugba; I am acting as a software development team lead at Arkitek R&D. In Arkitek, we are building mobile, desktop, and web applications using technologies such as VueJS, Flutter, and C#. Since 2021, we have been developing our web/mobile projects in Flutter, and needless to say, Flutter is amazing. After two years, we hived many know-how and some workarounds and I will try to share whenever I find a chance.

If you like my content, you can buy me a pizza!

Distributing our app to app store or play store seems the best way to reach a lot of users but in some cases, we might need to follow a different path. Let’s say, we create a solution for a specific customer and we don’t want to use an enterprise solution. (Why? Because they are a little expensive and not very easy to manage in some cases) or we just want to distribute our application more frequently and more freely.

In Arkitek, we are using Visual Studio AppCenter for such cases. There are some benefits of using Visual Studio AppCenter. It lets you automate and manage the lifecycle of your iOS, Android, Windows, and macOS apps. You can distribute your apps more frequently. You can connect your repo(I didn’t) and automate your builds, test on real devices in the cloud, distribute apps to beta testers, and monitor real-world usage with crash and analytics data.

In this article, I will try to explain step by step, how to distribute a Flutter application via Visual Studio AppCenter and highlight some key points.

Don’t forget to create your distribution certificates jks file for Android APK signing.

1- Hello AppCenter

First of all, you need to register to AppCenter and create your organization. It is very easy and you can just follow the steps. After registering your organization, create your project application. In this article, I will just cover android, but I will publish the IOS version too, soon.

2- Android Application

Create your application

3- Activating on Flutter

In Flutter, when we want to use a package, we just go ahead and add it into our pubspec.yaml and import it into our dart file(main mostly) and use it. Unfortunately with VS-AppCenter, importing packages to main.dart is no way. In official tutorials, they are mainly leading you to import packages into main.dart and init AppCenter before runApp.

I tried it and faced this beautiful error:

Error: Cannot run with sound null safety, because the following dependencies don’t support null safety:

package:appcenter

package:appcenter_analytics

package:appcenter_crashes

For solutions, see https://dart.dev/go/unsound-null-safety

FAILURE: Build failed with an exception.

My problem was the packages I imported. They were not properly working with null-safety. (In another tutorial, there was a suggestion to go with flutter run — no-sound-null-safety but it was a big NO for me, also even if I did, IOS would fire a lot of errors into my face..)

So, this is how I managed it:

3.1 Go to your MainActivity.java (if you don’t have one, just create a file name MainActivity.java). It should be under this path:

android\app\src\main\java\com\arkitek\flutter\project_name\MainActivity.java

Should be like this:

important -> You can see here that on line 14, I added a track event for my application start, so whenever a user starts the app, it will show under my Events section. You can see all of your events under

AppCenter -> ProjectName -> Analytics -> Events

Events

3.2 Go to your AndroidManifest.xml.

It should be under this path: android\app\src\main\AndroidManifest.xml

And add these 3 permissions:

<uses-permission android:name=”android.permission.INTERNET”/>

<uses-permission android:name=”android.permission.REQUEST_INSTALL_PACKAGES”/>

<uses-permission android:name=”android.permission.DOWNLOAD_WITHOUT_NOTIFICATION”/>

3.3 Go to app/build.grade.

It should be under this path: android\app\build.gradle

In the dependencies section, add the following lines:

dependencies {

def appCenterSdkVersion = ‘4.1.0’

implementation “com.microsoft.appcenter:appcenter-analytics:${appCenterSdkVersion}”

implementation “com.microsoft.appcenter:appcenter-crashes:${appCenterSdkVersion}”

implementation “com.microsoft.appcenter:appcenter-distribute:${appCenterSdkVersion}”

}

Your build.gradle should look like this: (from lines 72 to 82)

4- Version Control

The configuration part is done. Now, let's jump to distribution. Before we build our APK, we need to change our APK versions. By doing this, we are letting AppCenter know that we are releasing an update. Let's assume we are releasing the 1.0.20 version of our application.

We are going to modify 3 files:

• app\build.gradle
• pubspec.yaml
• AndroidManifest.xml

4.1 android\app\build.gradle

In your build.gradle, go ahead and find “versionCode” and “versionName” and change like in the example below:

..
Android {

defaultConfig {
applicationId “********”
minSdkVersion 21
targetSdkVersion 30
versionCode 20
versionName “1.0.20”
}

4.2 pubspec.yaml

Go to your pubspec.yaml and find the “version” key and change it to:

version: 1.0.20+1

4.3 AndroidManifest.xml

Go to your AndroidManifest.xml file under “android\app\src\main\AndroidManifest.xml” and find android:versionCode and android:versionName keys and modify them like in the example below:

<manifest xmlns:android=”http://schemas.android.com/apk/res/android"
android:versionCode=”20"
android:versionName=”1.0.20"
package=”com.arkitek.flutter.arkitek_app_internal”>

5 Distribution

If you are at this step, congrats, just a few more minutes and your distribution link will be ready for your users!

5.1 Build APK

Open your terminal and build your APK by these commands :

• flutter clean
• flutter pubget
• flutter build apk — split-per-abi

If it’s successful you should just see a message like this:

Built build\app\outputs\flutter-apk\app-armeabi-v7a-release.apk (11.6MB).

Go ahead and open this folder and see your app-armeabi-v7a-release.apk

The file should be under this path: build\app\outputs\flutter-apk\app-armeabi-v7a-release.apk

5.2 Upload to AppCenter

Go to AppCenter -> Your Organization -> Your Application

• In the left panel, click on the Distribution section. It will open a screen where you will see & manage all of your releases. You can disable/delete it and see how many times downloaded it.
• Click the New Release button, and it will open a panel from the right side of your screen.
• Drag & drop (or click upload) the APK file, you just created. (Be careful to choose the correct file -> Built build\app\outputs\flutter-apk\app-armeabi-v7a-release.apk)

• Click Next and select your distribution group.
• This is important. If you choose “Public” it will generate a link that can be reached publicly. You can just send the link to your users and they can download & install the app. I use this option for project-specific applications.
• If you would like to go for a closed test group, you can create a group and add users to it and select the group for your destination.
• I choose mandatory update and did not choose the “don't notify users” option. I want to see the “you have a new update” pop-up.

And save. That’s it. This is how we distribute our Android app via AppCenter.

You can just send your testers your installation link. If you like to test distributing a new version scenario:

• Install the app to a real device, via the AppCenter installation link
• go to step 5.1 and increase the version number
• build your apk
• distribute your new APK
• and open your app, on your device.

You should see a pop-up screen that notifies you about the new version and release notes (if you added)

In my opinion, VS AppCenter is a fast and reliable solution. After a while, the analytics dashboard will look fancier with lots of data, your adaption rate, device models, daily session durations, etc.

Thank you for reading my article! If you have any questions, you can ask in the comment sections and I will try to clarify.

Have a great day!