How to Add Screens Designed in Flutter into Your iOS App (Part 1)

 While our affection for Flutter is unanimous, transitioning the entire app to Flutter all at once might not always be feasible. However, an effective approach involves integrating the Flutter project into our existing native app as a library or module. This can be seamlessly achieved using the add-to-app feature, allowing us to accomplish precisely that and beyond!

Introduction to Adding Flutter Screens into iOS Apps

This approach is particularly advantageous when we aim to implement identical functionalities within both our Android and iOS applications using Flutter app development. In such scenarios, there’s no necessity to develop distinct code for each platform. Instead, we can create one Flutter design that works for both iOS and Android. We can then use this design on both platforms without needing to make separate versions. This makes the development process smoother and easier.

Step 1: Creating a Flutter Module

To create a Flutter module, go to your command line interface and directory where you want to create the Flutter module and run the command mentioned below:

bash

Copy code

flutter create --template module --org com.mobisoft mi_flutter_module

This command will create a Flutter module with .ios and .android hidden folders.

Step 2: Writing Flutter Code

Design your screens and add all your necessary code files under the lib folder in your Flutter module. In our case, for demonstration purposes, we are going to design a single screen with GridView containing a few feature tiles like Transport, Announcements, and Resources.

Step 3: Generating iOS Framework from the Flutter Module

To generate the iOS framework, run the following command in your mi_flutter_module directory. This command will generate 3 frameworks for Debug, Profile, and Release. For development purposes, you can use the framework under your Debug Directory.

bash

Copy code

flutter build ios-framework

Step 4: Integrating and Embedding Framework in iOS App

To ensure runtime loading, it’s essential to embed the generated dynamic frameworks into your app. For embedding just drag and drop the framework into the Frameworks, Libraries, and Embedded content section under your Target -> General.

Step 5: Opening the Flutter View

To initiate a Flutter screen from an existing iOS interface, we’ll leverage the FlutterEngine and FlutterViewController classes.

Let’s begin by incorporating a basic button into the ViewController. This button will serve as the trigger to open the Flutter view upon being clicked.

Step 6: Creating a Helper Class for Closing the Flutter Module

Step 7: Updating the AppDelegate to Listen to Callbacks

Conclusion

We have now successfully integrated the Flutter screens into your Native iOS application. But wait, how can you come back to your native application? To achieve this, we are going to use the FlutterMethodChannel class provided by the Flutter framework.

FAQs

How does integrating Flutter into iOS apps benefit development?

Can Flutter modules be integrated into existing iOS projects easily?

Is it possible to customize the Flutter screen appearance within the iOS app?

What are some common challenges faced when integrating Flutter into iOS apps?

Are there any performance considerations to keep in mind when using Flutter in iOS apps?