Flutter - deploying your app to Play Store
Tags: beginners, flutter, tutorial, devjournal
Published: 2021-07-29 06:12:26

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](https://flutter.dev/docs/deployment/android) 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](https://dev.to/mimanjh/flutter-deploying-your-app-to-app-store-3afp)

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](https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=clipart&foreground.clipart=android&foreground.space.trim=1&foreground.space.pad=0.25&foreColor=rgba(96%2C%20125%2C%20139%2C%200)&backColor=rgb(68%2C%20138%2C%20255)&crop=0&backgroundShape=square&effects=none&name=ic_launcher). 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](https://pub.dev/packages/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.
```dart
dev_dependencies:
  flutter_launcher_icons: "^0.9.0"

flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icon_logo.png"
```
And then, run this command in terminal at your project directory and your app launcher icon will change.
```bash
flutter pub clean && flutter pub get && flutter pub run flutter_launcher_icons:main
```

## 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](https://pub.dev/packages/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.
```bash
flutter pub global activate rename
flutter pub global run rename --appname YourAppName
flutter pub global rename --bundleId com.company.appname
```

## 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 
```

## 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.
```bash
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
 
```
### 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.
```bash
keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload
```
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:
```xml
   def keystoreProperties = new Properties()
   def keystorePropertiesFile = rootProject.file('key.properties')
   if (keystorePropertiesFile.exists()) {
       keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
   }

   android {
         ...
   }
```
Find and replace the buildTypes block with the following:
```xml
   signingConfigs {
       release {
           keyAlias keystoreProperties['keyAlias']
           keyPassword keystoreProperties['keyPassword']
           storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
           storePassword keystoreProperties['storePassword']
       }
   }
   buildTypes {
       release {
           signingConfig signingConfigs.release
       }
   }

```
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](https://flutter.dev/docs/deployment/android#reviewing-the-app-manifest) 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.
```bash
flutter build appbundle
```
Your app bundle will now be located at [project]/build/app/outputs/bundle/release/app.aab.

## 9. Play Console.
At the [Play Console](https://play.google.com), 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](https://flutter.dev/docs/deployment/android#updating-the-apps-version-number) 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](https://dev.to/mimanjh/flutter-deploying-your-app-to-app-store-3afp)

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

-JH
[LinkedIn](https://www.linkedin.com/in/jacobjhunsaker/) | [Github](https://github.com/mimanjh)