DEV Community

Cover image for How to build a Flutter app for IOS?
Christine
Christine

Posted on

How to build a Flutter app for IOS?

There are over 1,6 billion apps available on the App Store, and this number constantly grows. Driven by the popularity of iOS mobile devices, more and more businesses invest in developing apps for iOS. As for the technical side of building an app for iOS, it should be started with the software kit and the steps of building and releasing an app.
We will go through the preliminary steps you need to follow before building your app, and then dive into the technical details of each step. By the end of this article, you will have a clear understanding of how to build a Flutter app for iOS and how to release it on the App Store.

What is Flutter?

Flutter is Google’s open-source mobile app development framework. It enables developers to build high-performance, visually appealing apps for both Android and iOS platforms from a single codebase. Flutter uses a reactive programming model, making it easy to create complex and interactive UIs with minimal coding.
The framework includes a rich set of pre-built widgets and tools, allowing the development of highly customizable and platform-specific features. With its hot reload feature, developers can instantly see the changes made to their code, which greatly speeds up the development process. Overall, Flutter is a versatile and powerful tool for building mobile apps for iOS that is rapidly gaining popularity among developers.

Preliminaries

Before building a Flutter app for iOS, there are a few preliminary steps that you need to follow.

Register your app on App Store Connect

To release your app on the App Store, you need to register your app on App Store Connect. This is a platform where you can manage your app's distribution and sales on the App Store. To register your app on App Store Connect, you need to have an Apple Developer account. Once you have an account, you can log in to App Store Connect and create a new app record for your app.

To register your app on App Store Connect, follow these steps:

  1. Go to the App Store Connect website and log in with your Apple ID credentials.
  2. Click on the "My Apps" tab and then click on the "+" button to add a new app.
  3. Select the platform for your app (in this case, iOS) and enter the app's name and other details, such as the primary language, bundle ID, and SKU.
  4. Choose whether you want to create a new Bundle ID or use an existing one. If you choose to create a new one, you will need to enter a unique identifier for your app.
  5. Select whether you want to to be your app free or paid
  6. Enter the app's description, keywords, and other metadata to help users find it app on the App Store.
  7. Upload screenshots and a preview video to showcase its features and functionality.
  8. Review and accept the terms and conditions of the Apple Developer Program.
  9. Finally, submit your app for review by Apple. Once your app is approved, you can proceed with building and distributing it on the App Store.

Register a Bundle ID
A Bundle ID is a unique identifier for your app that is used by Apple. To register a Bundle ID, you need to log in to your Apple Developer account and navigate to the Certificates, Identifiers & Profiles section. Here, you can create a new Bundle ID for your app. You need to ensure that the Bundle ID you create matches the Bundle ID of your app in your Flutter project.

To register a Bundle ID for your app on App Store Connect, follow these steps:

  1. Go to the App Store Connect website and log in with your Apple ID credentials.
  2. Click on the "My Apps" tab and select the app for which you want to register a Bundle ID.
  3. Under the "App Store" section, click on "App Information" and scroll down to the "General Information" section.
  4. Click the "Edit" button next to the "Bundle ID" field.
  5. Choose whether you want to use an existing Bundle ID or create a new one.
  6. If you choose to create a new Bundle ID, enter a unique identifier for your app, such as "com.yourcompany.appname".
  7. Choose an explicit App ID or a wildcard App ID. An explicit App ID is a specific Bundle ID that you create, while a wildcard App ID is a single App ID that can be used for multiple apps with similar Bundle IDs.
  8. Once you have chosen your App ID type, click "Create".
  9. Review the information on the confirmation screen and click "Done".

Create an application record on App Store Connect

To register your app on App Store Connect, you first need to create an application record.

  1. Go to https://appstoreconnect.apple.com/ and sign in with your Apple Developer account.
  2. Click on "My Apps" in the top left corner of the screen.
  3. Click on the "+" button in the top right corner of the screen and select "New App".
  4. Choose the platform you want to create an app for (in this case, iOS).
  5. Enter a unique bundle ID for your app. This should match the bundle ID you registered earlier in Xcode.
  6. Navigate to the application details.
  7. Enter your app's privacy policy URL.
  8. Review the information you have entered and click "Create".

Review Xcode project settings

The next step is to configure your Xcode project settings. You can do this by opening your Xcode project and navigating to the project settings. Here, you need to set the deployment target, enable bitcode, and configure the code signing settings. The deployment target is the minimum version of iOS that your app supports. Bitcode is a feature that enables Apple to optimize the app for different iOS devices. Code signing is a security feature that ensures that the app is signed by a trusted entity.

  1. Open the Flutter project in Xcode by running the command open ios/Runner.xcworkspace in your terminal.
  2. Click on the project navigator in the left-hand pane.
  3. Click on the "Runner" project to view its settings.
  4. Under the "General" tab, review the "Identity" section to ensure that the "Bundle Identifier" matches the Bundle ID.
  5. Under the "Signing & Capabilities" tab, ensure that a valid provisioning profile is selected for both the debug and release builds.
  6. Resolve issues and warnings before proceeding.
  7. Save changes to the project settings.

Updating the app's deployment version

To update the deployment version, you can open your Xcode project and navigate to the General tab. Here, you can update the version number and build number of your app.

Add an app icon

To add an app icon, you need to create an image file with specific dimensions and add it to your Xcode project. The dimensions of the app icon depend on the device on which your app is installed.

Add a launch image

To add a launch image, you need to create an image file with specific dimensions and add it to your Xcode project.

  1. Open your Flutter project in Xcode by running the command open ios/Runner.xcworkspace in your terminal.
  2. Once Xcode opens, click on the project navigator in the left-hand pane.
  3. Click on the "Runner" project to view its settings.
  4. Click on the "Assets.xcassets" folder to open it.

Create a build archive and upload it to App Store Connect

After configuring your Xcode project settings, you need to create a build archive of your app and upload it to App Store Connect. To create a build archive, you can use Xcode's Archive feature.

Update the app's build and version numbers
When building a Flutter app for iOS, it's important to update the app's build and version numbers before creating a build archive and uploading it to App Store Connect.

Create an app bundle
After completing the necessary configurations, you can generate an Xcode build archive and an App Store app bundle for your app by running the "flutter build ipa" command in your app's root directory. This will create an Xcode build archive (.xcarchive file) in the "build/ios/archive/" directory and an App Store app bundle (.ipa file) in "build/ios/ipa/".

Upload the app bundle to App Store Connect
Once you have generated the app bundle, the next step is to upload it to App Store Connect for review and distribution.

Create a build archive with Codemagic CLI tools

Alternatively, you can use Codemagic CLI tools to create a build archive of your app.

  • Install the Codemagic CLI tools:

Image description

  • Generate an App Store Connect API Key and set the environment variables from the new key.

Image description

  • Create an iOS Distribution certificate.
  • Set up a temporary keychain for code signing.

Image description

  • Fetch the code signing files from App Store Connect

Image description

  • Add the fetched certificated to your keychain.
  • Update the Xcode project settings to use fetched code signing profiles.
  • Install Flutter dependencies.
  • Install CocoaPods dependencies.

Image description

  • Build the Flutter the iOS project.

Image description

  • Publish the app to App Store Connect

Release your app on TestFlight:

TestFlight is a platform that allows you to distribute beta versions of your app to a group of testers before releasing it on the App Store. You can use TestFlight to test your app's functionality and gather feedback from your testers.

Release your app to the App Store

Finally, after testing your app on TestFlight, you can release it to the App Store. To do this, you need to log in to App Store Connect and submit your app for review.

How to build Flutter app for IOS: Conclusion

Building a Flutter app for iOS requires some preliminary steps that need to be followed. If we were to discuss app development from a business perspective, we would have probably talked about critical factors such as the cost of building the app, competitiveness, market presence, etc. But today, we focused solely on steps to build a high-performance Flutter app for iOS and make it available to millions of users on the App Store.

Top comments (0)