DEV Community

loading...

Flutter - deploying your app to App Store

Jacob Hunsaker
Learn from the past, look to the future.
Updated on ・5 min read

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 App Store as iOS. If you're interested in how to publish an app on Play Store, follow this link

Publishing an app to App Store requires Xcode, so you need to use a Mac device. You should also create an Apple Developer account and enroll in the Apple Developer Enrollment Program, which costs $99/year, for publishing to work.


iOS

1. App & BundleId Naming.

We'll be running some terminal commands to change the name of the app, 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

2. Podfile.

In the flutter project/ios directory, open a file named Podfile. Uncomment line 2, and change the iOS platform target to whichever is required for your app. '9.0' should be sufficient for most cases.
At the bottom of podfile, update the block for post_install to the following and match the 'IPHONEOS_DEPLOYMENT_TARGET' to the version you chose for the line 2.

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
    target.build_configurations.each do |config|
      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '9.0'
    end
  end
end
Enter fullscreen mode Exit fullscreen mode

You can then click on 'Open iOS module in Xcode' to open the project in Xcode. If you're opening the project from Xcode, open project/ios directory to open Runner.xcworkspace file.

3. Runner configuration.

In the general tab, make sure all of the values are correct. We've changed the name and bundleId at step 1, so the Display Name, Bundle ID should have changed accordingly. Make sure the Version and Build is same as found in pubspec.yaml. Version would be the first three numbers (i.e. 1.0.0) and the build would be the number after the '+' sign. Set the iOS Version in Deployment Info to the one you set on step 2.
In the Signing & Capabilities tab, make sure 'Automatically manage signing' is marked, and select your team. If you already have an App Store Developer Account, it will automatically show.

4. Info.plist configuration.

This section is quite simple, just make sure the Bundle display name and Bundle name is correct.

5. Update the launcher icon.

Thanks to romannurik, at this site, you can create an icon of your design. Once you do create one, Apple requires an iconset, so go to link and create an iconset with the icon you've created. Once you download the iconset, there should be a folder named Assets.xcassets, which contains another folder, but with the name AppIcon.appiconset.
Now go back to Xcode and on the left panel, you should be able to find a folder named Assets.xcassets. It contains two files: AppIcon and LaunchImage. Delete AppIcon and drag/drop the Appicon.appiconset you downloaded. Now you have an iconset of your icon!

6. Identifier.

Now let's head to identifiers. In the identifiers tab, you should be able to see a number of identifiers that you've created (none, if you haven't). We'll create a new identifier for our app. Since flutter only supports iOS and macOS, do not check tvOS, and fill in the rest as you've created in the previous steps. Make sure that the Bundle ID is the same as you've set in the previous steps.

7. App Store Connect

Let's now actually create an app in App Store by adding it in (App Store Connect)[https://appstoreconnect.apple.com/apps]. Name and BundleID should match the Runner's information and SKU can be anything, but many just use their display name in one word.
Fill in all of the information that you can, including the ones on the left panel.

8. Build ipa and upload.

Open terminal and use the following command at the project directory.

flutter build ipa
Enter fullscreen mode Exit fullscreen mode

In the process, you'll be asked to type your password a lot. This password is simply your device's password. Since it will constantly pop up, a neat trick is to click 'Always Allow' :)
Now in Xcode, open a new file named Runner.xcarchive in the project/build/ios/archive directory.
Alt Text
(Look at all my failed attempts..)
Before you distribute it, validate the app first to make sure it runs safely and correctly. If it runs smoothly, then distribute it. Since we set automatic signing, there's not much for us to do then to wait until it is pushed to Apple server. Once it is finished, go back to App Store Connect and you should be able to select the build. Remember to submit it so that Apple can approve your app. Within 24-48 hours, your app will be approved and searchable in App Store!

9. iOS Screenshot dimensions.

When deploying, App Store Connect will require you to put in some screenshots of your app with several dimensions: 5.5, 6.5, 12.9. Capturing screenshots of the following devices will suffice. From my experience, the required screenshots for iPad Pro 2nd generation can be used for iPad Pro 3rd generation, and vice versa.

5.5 - iPhone 6S Plus, iPhone 7 Plus, iPhone 8 Plus
6.5 - iPhone XS Pro Max, iPhone 11 Max
12.9 - iPad 12.9 inch 5th generation

10. Updating your app.

Remember that this still is a flutter app and all of the edits will be done in flutter itself. 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 again, validate the app, distribute it, and update your build at App Store Connect.


That sums up on how to publish an app on App Store for flutter apps. If you're also interested in how to publish an app on Play 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

Discussion (0)