DEV Community

Jacob Hunsaker
Jacob Hunsaker

Posted on

Flutter - deploying your app to Play Store

I've had some luck to study and work with flutter these days. Flutter is a Google's UI kit, made for cross-platforms, meaning that with just one set of codes, it can be used to run in Android, iOS, and Web. Pretty neat, right?

Anyways, I've been hitting my keyboard here and there, and was lucky enough to create two simple apps and deploy it on both Play Store and App Store. Flutter has a pretty nice documentation, so you can follow that directly. However, if you're like me, who understands better by reading/watching at somebody who does it then this post will do. Today, I'll be sharing my experience on how I did it with some tips alongside (assuming you know the basics of flutter).

This post will discuss how to deploy an app to Play Store. If you're interested in how to publish an app on App Store, follow this link

I've used Android Studio to develop in flutter, and Visual Studio should be work the same. You should create a Play Console account and pay a one-time $25 to activate the account for publishing to work.


Android

1. Add a launcher icon.

Let's first start off by setting a launcher icon. This can be done, thanks to romannurik, at this site. I'll name the icon, "icon_logo.png". Once you've created what the launcher icon, create an assets folder in your project directory and put your icon in it.
Now let's be more technical. We'll be using one of flutter packages called flutter_launcher_icons to change the app icon. In your pubspec.yaml file, add/update the following lines appropriately. The latest version for flutter_launcher_icons was 0.9.0 in my case. Remember that indentation is very important for yaml files.

dev_dependencies:
  flutter_launcher_icons: "^0.9.0"

flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icon_logo.png"
Enter fullscreen mode Exit fullscreen mode

And then, run this command in terminal at your project directory and your app launcher icon will change.

flutter pub clean && flutter pub get && flutter pub run flutter_launcher_icons:main
Enter fullscreen mode Exit fullscreen mode

2. Change the name of the App & Bundle.

We'll be running some terminal commands to make this happen, using a flutter package called rename. You can set your app name to whatever you want, with any language. your bundleId can also be anything, but the typical format is com.companyname.appname.

flutter pub global activate rename
flutter pub global run rename --appname YourAppName
flutter pub global rename --bundleId com.company.appname
Enter fullscreen mode Exit fullscreen mode

3. key.properties

Now let's create a file called key.properties in the android directory, in the same level as local.properties. Inside, copy and paste the following four lines of code and adjust according to your wants. storePassword and keyPassword are usually the same. the value for storeFile can change to wherever you put your keystore in the next step.

storePassword=pw
keyPassword=pw
keyAlias=upload
storeFile=../app/upload-keystore.jks 
Enter fullscreen mode Exit fullscreen mode

4. Generating key.

This section is divided into two, depending on whether your developing device is Windows or Mac.

Windows

Copy and adjust the following code to your appropriate directories. Run it on cmd. First address is where your java keytool lies, and the second address after -keystore is where you want to download the key, as well as its name.

C:\\"Program Files"\Android\\"Android Studio"\jre\bin\keytool -genkeypair -v -keystore C:\Users\Administrator\upload-keystore.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias upload

Enter fullscreen mode Exit fullscreen mode

Mac

It's easier for Mac users, since you can simply just copy and paste the following code to the terminal and you're set.

keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload
Enter fullscreen mode Exit fullscreen mode

Next thing I would suggest you do is to move the key to where your app resides: inside android/app.

5. Update .gitignore

Since we've now added key.properties and our key into the app, we don't want those to be uploaded into GitHub. In our .gitignore file inside the android directory, you can simply add key.properties and app/upload-keystore.jks to prevent that from happening.

6. Update AndroidManifest and build.gradle

In your android/src directory, there are three AndroidManifest.xml files. In the one in main, make sure that the following codes are added. Remember that indentations are very important in xml files.
Add the following before the android block:

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

   android {
         ...
   }
Enter fullscreen mode Exit fullscreen mode

Find and replace the buildTypes block with the following:

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

Enter fullscreen mode Exit fullscreen mode

One thing I've noticed is, when you leave the buildType to release, debugging won't work. Hence, when you're done with releasing, return it back to signingConfigs.debug so that you can debug and develop.

7. Review your app.

Read through the documentation to see if you didn't miss any app-breaking mistakes to be fixed.

8. Create app bundle.

We are almost done! Now that our app is ready to be deployed, we will create an app bundle to upload to Play Console. Remember to run the following code in the project directory.

flutter build appbundle
Enter fullscreen mode Exit fullscreen mode

Your app bundle will now be located at [project]/build/app/outputs/bundle/release/app.aab.

9. Play Console.

At the Play Console, create a developer account and create a new app. Upload your app bundle you've created above at the Production tab. Once you do that, Play Store is great in telling what needs to be done to successfully publish an app. Fill in all of the information until you can submit for approval. Once it is approved, your app will be deployed to Play Store.

10. Updating your app.

After editing or adding functionalities to your app, you'll have to update the version of the app. Play Store won't accept the same version number to be uploaded. Therefore, we have to go to pubspec.yaml and update the version of your app. Flutter documentation for version control is somewhat confusing. Basically, 1.0.0 is the version number and the number after + is the build number. Whenever there is a minor update, you should update the version as the following: 1.0.1+2. The next iteration will be 1.0.2+3, and so forth. Then, you'll build the app again and create another app bundle to post on Play Console. You can now add another version there.


That sums up on how to publish an app on Play Store for flutter apps. If you're also interested in how to publish an app on App Store, follow this link

If there are things I could improve on, please don't hesitate to let me know! I'm all ears :)

-JH
LinkedIn | Github

Top comments (1)

Collapse
 
catur profile image
Catur Wicaksono

hallo, that's not flutter pub global rename --bundleId com.company.appname but flutter pub global run rename --bundleId com.company.appname