App Store Deployment with Codemagic

You can now integrate FlutterFlow with Codemagic, making app store deployment as simple as a click of a button.

At this time, we only support Codemagic deployment to the Apple App Store. Google Play store deployment coming soon!

Prerequisites

  • Create an Apple account.

  • Purchase an Apple Developer membership. Please see this link for more details on the Apple Developer program and how to sign up.

  • Set an App Launcher Icon for your app (under Settings & Integrations --> General). The App Launcher icon can't be transparent or contain an alpha channel.

Create a Bundle Identifier

A Bundle Identifier (ID) is a unique number that identifies your app inside of the Apple ecosystem.

Please follow these steps to create a Bundle ID:

  • Open your FlutterFlow project and navigate to Settings & Integrations. Select your Package Name and copy it (Cmd/Ctrl + C).

  • Open the Apple Developer homepage and select Certificates, IDs & Profiles (far left menu) and then select Identifiers.

  • Select the Add button (+).

  • The Register a new identifier page will open. Select App IDs and then select Continue.

  • Select App and then select Continue.

  • Enter the App Bundle Information:

    • Bundle ID: paste the Package Name that you copied from FlutterFlow. Double-check that the Package Name in FlutterFlow is the same as the Bundle ID. If these are different, errors will occur.

    • Description: Provide a short description of your app (this will appear in the app store).

    • Capabilities, scroll down and select the capabilities that are required for your app. For example, if your app uses Apple Sign In - make sure to check the box for Sign In with Apple. If you aren't sure what something is, hover over the information icon to the right of the capability.

  • When you are done, select Register.

Add A New App To App Store Connect

App Store Connect is used to submit apps to the App Store, manage apps, and more.

Please follow these steps to add a new app to App Store Connect:

  • Navigate to App Store Connect and then select My Apps.

  • Select the Add button (+) and then select New App.

  • A popup will appear. Enter your app information:

    • Platform: for mobile apps this will be iOS.

    • Name: Enter a Name for your app (this is the name that will show in the App Store).

    • Primary Language for your app.

    • Bundle ID: Select the Bundle ID you created in the previous step.

    • SKU: Enter a unique identifier.

    • User Access: Set the user access. If you select Limited Access, you will need to select the users that you would like to be able to access this app. This will only appear if you have other users included in your App Store Connect account.

  • When you are done, select Create.

You will then be navigated to the main dashboard for your app.

Add Your Apple App ID To FlutterFlow

An App ID is used by Apple to identify your app and associate it with your development team.

Please follow these steps to add your App ID to FlutterFlow:

  • From App Store Connect, select My Apps, and then select your app.

  • Select App Information (under General in the left Sidebar).

  • Scroll down to General Information and find your Apple ID.

  • Select the Apple ID and copy it.

  • Return to FlutterFlow and navigate to Settings & Integrations --> Deployment.

  • Paste the Apple ID into the box labeled App ID.

Add Your Issuer ID To FlutterFlow

  • Navigate to App Store Connect and select Users and Access, and then select Keys (blue text).

  • Locate the Issuer ID and select Copy.

  • Return to FlutterFlow and navigate to Settings & Integrations --> Deployment.

  • Paste the Issuer ID into the box labeled Issuer ID.

Generate Your API Key and Add It To FlutterFlow

Please follow these steps to generate your API Key:

  • Return to the App Store Connect page. If you have closed this window, navigate to App Store Connect and select Users and Access, and then select Keys (blue text).

  • Select the Add button (+).

  • A popup will appear. Enter your API Key Information:

    • Name: Enter a name for the key. This is a reference and is not part of the key itself.

    • Access: Select the access type. This link has additional information on roles.

  • When you are done, select Generate.

  • Find the row for the API Key you just generated and select Download API Key. A popup will appear, select Download.

  • Return to FlutterFlow and navigate to Settings & Integrations --> Deployment.

  • Under Private Key, select Upload Private Key. Select the API Key File and then select Open.

Add Your Key ID To FlutterFlow

  • Return to the App Store Connect page. If you have closed this window, navigate to App Store Connect and select Users and Access, and then select Keys (blue text).

  • Find the row for the API Key you just generated and select Copy Key ID.

  • Return to FlutterFlow and navigate to Settings & Integrations --> Deployment.

  • Paste the Key ID into the box labeled Key ID.

Deploy To The App Store

You can deploy directly from FlutterFlow or from your GitHub repository.

Deploy From FlutterFlow
Deploy From GitHub
Deploy From FlutterFlow

Please follow these steps to deploy from FlutterFlow:

  • From FlutterFlow, navigate to Settings & Integrations --> Deployment. Scroll down and select Deploy To App Store.

  • A popup will appear. Select Deploy. If another deployment is in progress, selecting Deploy will cancel the previous deployment.

  • A request will be sent to Codemagic to deploy your app to the App Store. Please note: It can take a few minutes for this request to process. Once this step is complete, your Latest Message will change to Submitted.

  • It can take 30 minutes to several hours for your app to be deployed to the App Store. You can check the status of your deployment by selecting Check Build Status.

  • Once complete, you will receive an email from App Store Connect that a new build has been added to your app.

Deploy From GitHub

Coming Soon

Submit Your App For App Store Approval

  • From App Store Connect, select My Apps, and then select your app.

  • Enter your Version Information. This page contains additional information on what is required, localized and, editable.

  • When you are done, select Submit For Review.

Your app will now be reviewed by Apple. For additional information on Apple's review guidelines, please see this link.

Common Build Issues And How To Fix Them

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

You need to update your App Launcher Icon (under Settings & Integrations --> General) with an image that isn't transparent and/or doesn't contain an alpha channel.