How to: Flutter Release iOS App on Apple Store
A step-by-step guide to releasing the flutter ios app without an Apple Store rejection. We go over the three mistakes you should never make.
Join the DZone community and get the full member experience.Join For Free
If you have built a flutter app and are ready to release it on the Apple Store, then you are in the right place. In this tutorial, you will learn the process of how to release the flutter iOS app on the Apple store. There are some important points that you should be aware of before uploading the app to the Apple store. You may have heard that Apple is very restricting about user privacy and design UI. But, don’t worry, I am going to cover the common mistakes that a new developer do during the release of their first iOS app.
The official flutter document also listed a step-by-step process that you can follow. But, here I am making it simple for you. You can see our Multi-Vendor iOS App sample to know more about Multi-Vendor MarketPlace eCommerce.
How to Release the Flutter iOS App: A Step-by-Step Guide
- Create Apple Developer Account
- Register Bundle Identifier
- Get App icon and App screenshot ready
- App Store Connect Listing Process
- Open Project on Xcode and Build
1. Create an Apple Account
Please go here and create an Apple developer account. Remember, an Apple developer account is associated with your email ID only. So, choose the right email ID and keep it safe. Apple developer accounts cost $99 per year.
Suppose you are going to release an app for your client; it is good practice to create a separate account for them to avoid disputes in the future.
2. Register Bundle Identifier
After you sign-up for the developer program, the first thing you need to do is register a Bundle ID for your app. Every iOS application is associated with a Bundle ID, which is a unique identifier registered with Apple.
- On this page click on “Certificates Identifiers and Profiles” OR you can directly visit this. On the left side, the menu clicks on “Identifiers” (Screen 1 below).
- Click + to create a new Bundle ID. Select “App ID” on the next page and click continue.
- Select App type – “App” and click continue.
- Next page “Register an App ID” – Add a short description about the app and select Bundle ID as Explicit and enter an “App Package Name” (Screen 2 below).
- On the next page, confirm the details and click Register to register your Bundle ID.
3. Create the App Icon and ScreenShots
Now that you have a bundle ID, it’s time to prepare a flutter project to fulfill the Apple guidelines. We need to create multiple app icons for multiple devices. There are so many online tools available to generate iOS icons. My favorite is here. Just upload 1024×1024 px image and it will generate all of the apple icons for you. Then, you can download the zip file and extract it. There you can see the folder named “AppIcon.appiconset” inside the “Assets.xcassets” folder. Copy this folder and open the flutter project on Android studio. Click on the iOS folder in the project directory called your_project_name/ios/Runner/Assets.xcassets/AppIcon.appiconset. Paste and Replace the copied folder in that location.
You can also change the splash screen by replacing “LauncherImage” inside “LaunchImage.imageset”. Apple has provided the App Review Guidelines, Please have a look at it, but don’t go too deep into it.
4. The App Store Connect Listing Process
Now, go to the Apple Store Connect and go to "my App." Click on the + icon to create a new App. On the pop-up window, write App name, select language, select the Bundle ID that we created in the last step, and write SKU. Please select the full access radio button and click on “Create”.
Now, on the next page fill in all of the details. Please be careful when uploading the screenshot. Below are the screenshot image dimensions:
- app screenshot 6.5 display – 1242×2688, 2688×1242, 1284x 2778,
- app screenshot 5.5 display – 1242x 2208, 2208x 1242
- app screenshot 12.9 3rd. – 2048×2732, 2732x 2048
- app screenshot 12.9 2nd. – 2048×2732, 2732x 2048
Please Remember screenshot images should not contain the “flutter debug” tag on the top right corner. You can disable the flutter debug tag by writing the below code in the materialApp.
MaterialApp( debugShowCheckedModeBanner: false,)
5. Open the Project on Xcode and Build
Now, it is time to upload the app on Apple Connect. Open flutter project in Android studio, and go to tool/firebase/ open ios module on XCode. Your flutter project has successfully exported into XCode. The first test app is running successfully or not in xcode. Connect your iPhone device via a USB cable, and click on the RUN button on the top of the XCode window. If there are any errors when running xcode, then close the xcode window, and run it on Android studio to make the correction in the code.
Once you run the code successfully, On the xcode window, the first open is the folder icon; click on it. Navigate to your target’s settings in xcode:
- In the main view sidebar, select the Runner target.
- Select the General tab. There, you can change the app Display name. Remember, the bundle identifier should be the same that you have created in early stage.
- Go to the deployment info section, and select device.
- Signing and Capabilities tab: If you are using xcode for the first time, then it will promote you to login with your Apple Developer ID. Just sign in and, then, select TEAM as your developer account. Please check to automatically manage sign-in.
- Rest options are automatically filled for you; you don’t need to make any changes.
- Toolbar: Go to Product/Destination/Build (any ios device arm64, armv7).
- Toolbar: Go to Product/Archive. Again, you will see a pop-up window; click on validate app and keep continuing until you get a successful message.
- Once the app gets validated, click on Distribute App and, again, the same pop-up window will appear. Once you get to a successful upload of the app on the apple store, that means your build is ready to publish.
- Note: It will take 10-20 minutes to appear to build on the apple store connect as build, so wait until you can see it.
- Now, you are ready to “Submit for review”. Click on it; if you missed any field to be filled then one message will be appear on top beside the “submit for review” button. Fill in all the necessary details, and submit the app.
You will get an email alert whenever the review status has been changed by the Apple team. Note: the ios app review process is not machine-oriented like the Android app process.
I hope you have followed all my instructions carefully, but if you get stuck at any point, please let me know. Please use the chatbox or WhatsApp me at +91-9144040888. I am available for help.
You can also join our eCommerce app development course.
If you need an eCommerce android and iOS app for your business OR your your client, please contact me.
Published at DZone with permission of kamal bunkar. See the original article here.
Opinions expressed by DZone contributors are their own.