Overview

I am creating a simple app for my 1-year-3-month-old son that plays sounds when tapping animal and vehicle icons. The goal is to release this app on both iOS and Android platforms.

Previous articles

I have already written three related articles for this post, and you can check them out through the following links

https://zubora-code.net/en/tags/first_flutter_tutorial

This Time's Goal

In the previous articles, we completed the implementation of features, integration with Firebase, and the introduction of Crashlytics. In this article, we will finally tackle all the remaining tasks required for the release and summarize the steps leading up to the actual release.

• Preparing Icons and Feature Graphics for the App
• Setting Up Icons for the App
• Removing the Debug Banner
• Capturing Screenshots
• Creating Support and Privacy Policy Sites
• Publishing Android and iOS Apps

Preparing Icons

I'm using icons from "irasutoya-san" in the app and will continue to use them for icons. I'm grateful for their contributions. Please refer to the "Frequently Asked Questions" section for guidelines on using these icons.

I will resize the image in the provided link to 512 x 512 pixels.

Note: Do not check the "Alpha" option, as it caused distribution failures in subsequent iOS app distribution. Save the image without the "Alpha" option checked.

Invalid App Store Icon. The App Store Icon in the asset catalog in 'Runner.app' can't be transparent nor contain an alpha channel.

Setting Up Icons

Create an "assets/icon" directory and place the resized image there.

Next, install the "flutter_launcher_icons" package and specify the image path.

   intl: any
   firebase_core: ^2.15.0
   firebase_crashlytics: ^3.3.4
+  flutter_launcher_icons: ^0.13.1
+
+flutter_icons:
+  android: true
+  ios: true
+  image_path: "assets/icon.png"
 
 dev_dependencies:
   flutter_test:

Run the command:

flutter pub run flutter_launcher_icons:main

After deleting and rerunning the app on the emulator, the icon will be updated.

Removing Debug Banner

Remove the "DEBUG" banner displayed at the top right corner of the app.

         useMaterial3: true,
       ),
       home: MyHomePage(),
+      debugShowCheckedModeBanner: false,
     );
   }
 }

Creating Support and Privacy Policy Sites

Create dedicated articles for the support site and privacy policy site. Include contact information for inquiries and relevant links to social media. Ensure that the content is sufficient and meets the requirements; adjust if necessary upon rejection.

• Support Site:
  • Japanese: https://zubora-code.net/ja/articles/piyopiyo_sound_park_support
  • English: https://zubora-code.net/en/articles/piyopiyo_sound_park_support
• Privacy Policy:
  • Japanese: https://zubora-code.net/ja/articles/app_privacy_policy
  • English: https://zubora-code.net/en/articles/app_privacy_policy

Capturing Screenshots

For iOS:

Capture at least 3 (up to 10) screenshots for each of the following device sizes:

Launch iOS Simulator, choose the desired device under File → Open Simulator, and run "main.dart". Capture screenshots using Command + S.

For Android:

Capture at least 4 screenshots for each of the following device sizes:

Add emulators by opening Android Studio → More Actions → Virtual Device Manager → Create device. Capture screenshots using the camera icon in the Android Emulator and save them.

Publishing Android App

Create an App Store Graphic for Android:

Create a 1024px x 500px image using Keynote. Set the slide size to 1024 x 500.

Create a Google Play Developer account:

Create an account here, pay the $25 fee, and complete the verification. Note that the verification link has a short expiration, so complete it promptly.

Generate a keystore:

Generate a keystore using the following command:

$ keytool -genkey -v -keystore {出力先PATH}/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

Create a key.properties file:

Create a "key.properties" file in the android directory of your Flutter app and specify the required information.

storePassword={パスワード}
keyPassword={パスワード}
keyAlias=key
storeFile=key.jks

Modify the build.gradle file:

Add the keystore properties to your "build.gradle" file.

// 先頭に追記
def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('key.properties')
if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}

android {
    // 中略
    signingConfigs {
        release {
            keyAlias keystoreProperties['keyAlias']
            keyPassword keystoreProperties['keyPassword']
            storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
            storePassword keystoreProperties['storePassword']
        }
    }

    buildTypes {
        release {
            signingConfig signingConfigs.release
        }
    }
}

Change the app name:

Change the app name in the "AndroidManifest.xml" file.

<application
        android:label="touch_and_hear"

Update the app's domain:

Update the following files.

• android/app/build.gradle (namespace, applicationId)
• android/app/src/main/kotlin/{com.example.app_name} (directory's name)
• android/app/src/main/kotlin/{com.example.app_name}/MainActivitly.kt (package)
• android/app/google-services.json (package_name)

Note: I think you might want to use the following package for this purpose.

https://pub.dev/packages/change_app_package_name

Localize the app name:

Create "values-ja" and "values-en" directories in "android/app/src/main/res" and create "strings.xml" files with localized app names.

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <string name="app_name">ぴよぴよサウンドパーク</string>
</resources>

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <string name="app_name">PiyoPiyo Sound Park</string>
</resources>

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application
        android:label="@string/app_name"

Build the app:

Run the following commands:

$ flutter clean
$ flutter build appbundle --release

you can find the the output as build/app/outputs/bundle/release/app-release.aab

Create an app in Google Play Console:

Create an app, provide app details, declare compliance, and upload the built app bundle.

Prepare for release:

Configure distribution options, pricing, privacy policies, and keywords in the Google Play Console.

Release

Go to dashboard → Release your app → Create and publish a release.

iOS App Publishing

Create an Apple Developer/App Store Connect account:

Enroll here, pay the fee, and create a certificate for app signing.

Create an App ID:

Register an App ID in "Certificates, Identifiers & Profiles" section.

Launch "Keychain Access" on your Mac, navigate to "Keychain Access" → "Certificate Assistant" → "Request a Certificate From a Certificate Authority..." in sequence. Check both "Saved to disk" and "Let me specify key pair information," then click "Continue." Save the certificate to an easily accessible location.

Next, navigate to your Apple Developer account page and click on "Certificates, Identifiers & Profiles." Select "Create a certificate," check "App distribution," click "Continue," and then "Download." Double-click the downloaded file to install it.

Registering the App ID

Similarly, within "Certificates, Identifiers & Profiles," navigate to Identifiers → + → App IDs → Continue → App → Continue → Input Description and Bundle ID → Continue → Register.

Creating a Profile

Still within "Certificates, Identifiers & Profiles," go to Profiles → + → Distribution → App Store → Continue → Select an App ID, choosing the one registered earlier → Continue → Select a Certificate → Continue → Enter a Provisioning Profile Name → Generate → Download → Double-click to install.

Setting the App Name

Similar to Android, we'll support multiple languages here as well. You'll need to open Xcode for this step.

I found the following explanation very clear and helpful for reference: Localize App Name

Linking Bundle Identifier and Provisioning Profile to the App

Right-click the iOS directory, select Flutter → Open iOS module in Xcode to open Xcode.

Choose the "Runner" target under TARGETS, then select "Signing & Capabilities."

Link the previously created Bundle Identifier and Provisioning Profile.

Building and Uploading

In Xcode, navigate to Product → Destination → Any iOS Device (arm64).

Then, choose Produce → Archive to initiate the build process.

After the build is complete, select "Distribute App."

Choose "App Store Connect" and click "Next."

Select "Upload" and click "Next."

Enter app details and click "Next."

For "App Store Connect distribution options," keep the default settings and click "Next."

Select the certificate and profile, then click "Next."

Review the app information, click "Upload," and once the upload is complete, click "Done."

Preparing for Publication

In App Store Connect, choose "My Apps" and select the app you want to release.

Visit App Store Connect.

Input screenshots, keywords, support URL, upload the build, and export compliance information.

Following that, input app information, pricing, distribution status, and app privacy according to the on-screen instructions.

Once everything is completed, click "Add for Review" on the top-right corner of the app's main page. After confirming everything is in order, click "Submit for App Review." Once the status changes to "In Review," the process is complete.

I apologize for the heavy content that was covered, but we have finally reached the end. I understand that the latter part contained a lot of text, and I apologize for that.

After submitting the above content, the applications were reviewed and successfully released for both Android and iOS within three business days, spanning over the weekend. For Android, I didn't receive any specific emails; I simply checked the Google Play Console and found that the app was already in a publishable state, which was quite surprising. As for iOS, there was only one question regarding data handling, to which I provided an answer. I'll be writing a formal release article later, but for now, I'll provide the download links for those interested.

iOS: https://apps.apple.com/us/app/%E3%81%B4%E3%82%88%E3%81%B4%E3%82%88%E3%82%B5%E3%82%A6%E3%83%B3%E3%83%89%E3%83%91%E3%83%BC%E3%82%AF/id6463569980

Android: https://play.google.com/store/apps/details?id=net.kiitoscode.touch_and_hear