Hey Flutter, Welcome to the Stores

onat çipli
Flutter Community
Published in
8 min readApr 28, 2020

--

Hi, guys I just went through from the publish process both AppStore and PlayStore with my NetworkUpp(ios/android) app and I did think I should note the general steps according to the store for myself and since I love sharing and helping other people I shared them with you Welcome to the Stores

Creating Flutter App

I will create a flutter app from the command line and I publish this app with my developer accounts. You probably want to publish your currently working app that's no problem the steps will be the same but if you have some dependencies like Push Notification or background tasks you need some extra work like enabling some capabilities for IOS

flutter create repo_explorer

By the way, I’m thinking to implement the GitHub Repository Explorer Application that's why I named as repo_explorer. After implement this I can add the steps about how to release new version.

I create my flutter project and let's begin with AppStore.

You can generate app icons from the appicon.co and add manually to your project or you can use a flutter_launcher_icons package. If you want to add native splash screen you can use flutter_native_splash package.

Release to the AppStore — iOS

First, to publish an app to AppStore you need to enroll Apple Developer Program

For an individual account, they charge 100$ dollar per year.

I assume you had enrolled Apple Developer Program. if not you can pass the AppStore step.

Every iOS application is associated with a unique Bundle ID, so we need to configure this the easiest way is opening repo_explorer/ios/Runner.xcworkspace file with Xcode

We need to ensure we have logged in with a Developer Account which has already enrolled if we have not logged in with our account you can from Xcode preferences

If you enrolled account is not here you need to add with the plus icon

So In Xcode, we have our enrolled account. Click the Runner on Project Navigator after that open Signing & Capabilities ensure you selected All and Automatically manage signing is enabled then select your team. After selecting your team, you need to configure Bundle Identifier, I changed as com.onatcipli.repoExplorer

we change bundle identifier but it is not seen on developer.apple.com in Identifiers section, don't panic it is normal to create it we have two option

The first option(which is my favorite), you can add a random capability on Xcode then remove it. This action triggers the Xcode to create this bundle identifier. As you can see in the following picture it's added when Identifier managed by Xcode in name section Xcode add XC

The second option is opening the developer.apple.com in Identifiers section and adding manually with the plus icon which is after the Identifiers.

App Store Connect

Now We need to create an App first click the My Apps then create the plus icon for adding new App to App Store Connect

After clicking create button you see the App Information Page,

NOTE: If you don't want to support iPad or Landscape modes in your app uncheck these areas on General tab

now, We can go to Xcode and take the create the archive of the project from Product →Archive

Ensure you selected Generic iOS Device

After Archive finished Organizer needs to be open if it is not you can always open from the Window →Organizer

So we opened Organizer now we can select our app and click to Distribute App.

and gone through with defaults you just need to next next next after the upload process finished you will receive a mail from App Store Connect.

After that, we opened our app in App Store Connect and select Prepare for Submission from the left and fill the required areas such as App Preview and Screenshots, Keywords, Promotional Text, Description, Support URL, Marketing URL, App Review Information and Build.

For App Preview and Screenshots Apple wants at least 3 picture for your app and you can see the specifications from this link
but in short, you need
3 pictures (1242 x 2688 pixels) for 6.5 inches,
3 pictures (1242 x 2208 pixels) for 5.5 inches,
If the iPad(3rd Gen) supported 3 pictures (2048 x 2732 pixels) for 12.9 inches,
If the iPad(2nd Gen) supported 3 pictures (2048 x 2732 pixels) for 12.9 inches.

For creating these pictures generally, I open 3 simulators and take screenshots from the app and handle the pixels on Figma(which is my favorite:)

Before submitting the app for avoiding the rejection you should read Avoiding the Common App Rejections and App Store Review Guidelines

After adding build and all required areas we click first save button after save finished click the Submit for Review button if anything missing App Store Connect will help us to find that missing thing like that:

After finishing all missing parts clicking to Submit for Review will open this window and fill these areas according to your app

Well Done Submitted to AppStore!!

See the status means from the App Build Statuses and App Statuses

We submitted our app now we need to wait for a review if it is suitable to AppStore needs when the state of the app changes to Waiting for Review to In Review a reviewer reviews your app after that your app status will be changed by the reviewer if there is a problem it will change to Rejected if not it will change to Ready to Sell so you can ready to store!!

Do you want PlayStore too? may be web?

Keep going! for the web, you can read my previous article

Release to the PlayStore — Android

First, You need a Google Developer Account and it costs $25 and allows users to publish apps on the Google Play Store only.

If you do not have Keystore create a Keystore with the following command
on Mac/Linux :
keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

on Windows (don't forget to change USER_NAME):
keytool -genkey -v -keystore c:/Users/USER_NAME/key.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias key

This command stores the key.jks file in your home directory. If you want to store it elsewhere, change the argument you pass to the -keystore parameter. However, keep the keystore file private; don’t check it into public source control!

Reference the Keystore from the app

Create a file named <app dir>/android/key.properties that contains a reference to your keystore(Do not check in to public source):

storePassword=<password from previous step>
keyPassword=<password from previous step>
keyAlias=key
storeFile=Users/onatcipli/key.jks

If you get an error about storeFile path location you can see this SO post

Configure signing in Gradle

Configure signing for your app by editing the
<app dir>/android/app/build.gradle file.

Add code before android block:

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

change the buildTypes code 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
}
}

You may need to run flutter clean after changing the gradle file.

So we need to get our app apk to publish our app in PlayStore ( — split-per-abi reduces to apk sizes with splitting according to devices hardware)

flutter build apk — split-per-abi

Now we can go to the Google Play Console

Click the Create Application button and type your AppName we will see the following page to publish our app, We need to check these checkboxes

Start with the App releases section, Click the Create Release/Edit Release button in the following page after that apply signed by google than drag and drop the list of apk that you have inside release folder

repo_explorer/build/outputs/apk/releases

After upload complete, you should complete Content rating

after handling Content rating, you should complete App content

After handling App content, you should complete Pricing and Distribution.

after that, you can pass to the Store listing section.

You need at least 1 app icon(512x512) and application 2 screenshots(min length for any side 320px max length for any side: 3840px)

After completing the Store listing section, now you need to go to App releases section and click the Review button then you will see this page

Well Done Submitted to PlayStore!!

See the google play console app status means from the rollout and Publish a draft app

After a tester test your app and app information it will be available on PlayStore !!!

--

--

onat çipli
Flutter Community

Software Engineer who enjoys creating mobile applications with Flutter and Dart