Signing and Compiling Flutter APK

#flutter #dart #beginners #mobile

🎊 Introduction
🧶 Change App Icon
🎢 Change Name of App
🎪 Sign App
🎭 Release Configuration
🎨 Build APK

🎊 Introduction

First of all, I would like to say a very big congratulations on finishing that awesome app of yours with flutter. What's next? you might ask, Ok time to build and realese a signed version of your application, and possibly upload it to the Google PlayStore.

NB: As at the time of writing this article, I do not own a 
macbook 😥, so the focus would be just for windows users 🙂. If 
you wish to help out, sure, reach out to me 🥰.

In this article, I will be walking you through on how to successfully sign your apk file and the possible errors you might encounter, with their possible solutions.

NB: At the time of writing this article, PlayStore no longer 
accept 'APK' files but 'App Bundle'.

For more information, see Android App Bundle and About Android App Bundles.

🧶 Change App Icon

By default, Flutter ships it's brand logo, as your default app icon. To change to your custom icon, there are various approach you can take. Take a look at one of them in another article I wrote here.

🎢 Change Name of App

For any reason, you would like the name of your application to be changed to something else, take these few steps:

In your project directory, locate your android\app\src\main\AndroidManifest.xml
Open the AndroidManifest.xml, and change the android:label to your app name.

    // Enter the new name, and remove the square bracket.
    // If you wish for you app to have access to internet, add
    <uses-permission android:name="android.permission.INTERNET" />
    <application
     android:label="[NEW NAME]"
     ...

🎪 Sign App

By signing your application, you're providing it with it's digital signature. For future updates on the app, this created signature will serve as an authentication. With that being said, try and keep the signature/keys safe, and don't check it into any version control system. Follow the below steps to sign you app:

1. Create a keystore.

Preferably, in your VsCode terminal, which I presume will have it's current directory to be the root of your project. In my case, I have 'C:\Users\usser\Documents\Flutter_Github\shopy>', but depending on where you wish to store the keystore.jks file we are about to create, you then navigate to the directory and paste the below code in your VsCode terminal

  keytool -genkey -v -keystore myCustom-Keystore.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias custom

NB: The 'myCustom-keystore.jks', can be any name you wish to save the file as, while the 'custom' is the alias of the keystore file.
The -storetype JKS tag is only required for Java 9 or newer. As of the Java 9 release, the keystore type defaults to PKS12.

NB: The keytool command you just ran, might not have worked, don't freak out (at least not 
yet 🤣). The reason is that the keytool might not have been in your path, as it's part of 
Java which was installed alongside your Android Studio Software. To correct this problem, 
run 'flutter doctor -v', copy the path after the 'Java binary at:', paste it in your 
VsCode terminal, remove the 'java' at the end of the path you copied and replace it with 
the keytool command we saw ealier.

NB: From the Image above, I am making use of Cmder, to run the 'flutter doctor -v', so you can see the process clearly.

NB: If your path (just like mine in the above image), includes space-separated names, such 
as 'Program Files' and 'Android Studio' (in my own case), for windows, use quotes (e.g 
'Program Files' and 'Android Studio') to escape the space, or use back-slash for 
Mac/Linux (e.g Program\ Files and Android\ Studio), to escape the space.

Once you paste the new command, and hit enter, you will be prompted to provide a password, after which you would have to provide other sets of information. Remember to read through and thoroughly before continuing.

🎭 Release Configuration

In this section, we would generally talk about keystore, and how to reference it from the app, then we would learn how to configure the signing in gradle.

1. Reference the keystore from the App

In your 'android' root folder, create a file called 'key.properties', copy and paste the below code into it (PS: Don't copy the comment also).

storePassword=<The password you entered in the command prompt>
keyPassword=<The password you entered in the command prompt>
keyAlias=custom
storeFile=<location of the key store file>

/* 
   1. When you pasted your keytool command, you were prompted to enter a password, that'll 
   be the same you will enter as the storePassword and keyPassword, provided you used same 
   password.
*/

/*
   2. The keyAlias, i.e the name after the '-alias' in the keytool command is what you will 
   provide here.
*/

/*
   3. For the storeFile, this is the location where you stored the keyStore file. In our 
   example above, I stored it in the root of our project.
*/

2. Add Signing Config in Gradle

The next step to take is to configure your gradle, so it'll be aware of your keystore and be able to use it when building your app in release mode. To achieve this, locate and edit your build.gradle file in '[project]/android/app/build.gradle' with the following lines of code:

1. Add the Keystore information from your properties file before the 'android' block:

    // Simply copy from the 'def' below, to android {', and replace the 'android {' in your 
    // file 😎

   def keystoreProperties = new Properties()
   def keystorePropertiesFile = rootProject.file('key.properties')
   if (keystorePropertiesFile.exists()) {
       keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
   }

   android {
         ...
   }

2. Find the 'buildTypes' block:

   buildTypes {
       release {
           // TODO: Add your own signing config for the release build.
           // Signing with the debug keys for now,
           // so `flutter run --release` works.
           signingConfig signingConfigs.debug
       }
   }

And replace it with the below signing config info:

   signingConfigs {
       release {
           keyAlias keystoreProperties['keyAlias']
           keyPassword keystoreProperties['keyPassword']
           storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
           storePassword keystoreProperties['storePassword']
       }
   }
   buildTypes {
       release {
           signingConfig signingConfigs.release
       }
   }

Once you're done with the above configurations, the release builds of your app will now be automatically signed.

Oh, before I forget, you may need to run 'flutter clean' after updating the gradle file. This would help clean some cached builds, preventing it from affecting the signing process.