native app.<\/a> <\/span><\/p>\nIn our main.dart file located under mi_flutter_module\/lib folder, add the following entry point function. This function will be called from the iOS app.<\/span><\/p>\n\n\n@pragma(\"vm:entry-point\"<\/span>)\nvoid<\/span> loadFromNative() async<\/span> {\nWidgetsFlutterBinding.ensureInitialized();\nrunApp(const<\/span> MyApp());\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nTo generate the iOS framework, run the following command in your mi_flutter_module<\/span> directory. This command will generate 3 frameworks for Debug, Profile, and Release. For development purposes, you can use the framework under your Debug Directory.<\/span><\/p>\n\n\nflutter build ios-framework<\/code><\/span><\/pre>\n\n\nStep 4: Integrating and Embedding Framework in iOS App<\/h2>\n\n\n\n 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.<\/span><\/p>\n\n\n\nIf all the steps for generating the framework are correct, you should be able to build the project successfully.<\/span><\/p>\n\n\n\nStep 5: Open the Flutter View <\/h2>\n\n\n\n To initiate a Flutter screen from an existing iOS interface, we’ll leverage the FlutterEngine and FlutterViewController classes.<\/span><\/p>\nLet\u2019s begin by incorporating a basic button into the ViewController. This button will serve as the trigger to open the Flutter view upon being clicked.<\/span><\/p>\nCreate a Flutter Engine:<\/b> Go to your AppDelegate file and add the following code:<\/span><\/p>\n\n\nimport UIKit\nimport Flutter\n\n@main\nclass AppDelegate: UIResponder, UIApplicationDelegate {\n \n lazy var flutterEngine = FlutterEngine(name: \"flutter_engine\")\n \n func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {\n \/\/ Override point for customization after application launch.\n \n flutterEngine.run(withEntrypoint: \"loadFromNative\", libraryURI: \"package:home_derma\/main.dart\")\n \n return true\n}\n<\/code><\/span><\/pre>\n\n\nWe made the following changes to the above code:<\/span><\/p>\n\n\n\n\nWe created an instance of a Flutter engine class with a name.<\/span><\/li>\n\n\n\nSince we are only showing one Flutter screen, we prepared only one FlutterEngine. But if you want to show more than one Flutter screen, you’ll need to make separate engines for each of them.<\/span><\/li>\n\n\n\nWe added a flutter run statement, with arguments: <\/span>\n\nwithEntrypoint<\/b>: Pass entryPoint function name which we had configured in the flutter module\u2019s main.dart file.<\/li>\nlibraryURI<\/b>: Pass the module\u2019s dart file path. Otherwise, it\u2019ll simply open an empty blur screen.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n Open Flutter View as a UIViewController: <\/b> Opening Flutter view on the button, click –<\/span><\/p>\n\n\n@IBAction func miFlutterModuleButtonTapped(_ sender: Any) {\n \n let<\/span> flutterEngine = (UIApplication.shared.delegate as<\/span>! AppDelegate).flutterEngine\n let<\/span> flutterViewController = FlutterViewController(engine: flutterEngine, nibName<\/span>: nil, bundle<\/span>: nil)\n flutterViewController.modalPresentationStyle = .fullScreen\n present(flutterViewController, animated<\/span>: true<\/span>, completion<\/span>: nil)\n }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nQuite straightforward, wouldn’t you agree? <\/span><\/p>\n We\u2019re all set! You can now run the application and Voila!<\/span><\/p>\n\n\n\nWe have now successfully integrated the Flutter screens into your Native iOS application. But wait, how can you come back to your native application? <\/span><\/p>\nTo achieve this, we are going to use the <\/span>FlutterMethodChannel<\/b> class provided by the Flutter framework.<\/span><\/p>\nFlutterMethodChannel<\/b> is a class in the Flutter framework, which is used for communication between Dart code (the programming language used in Flutter) and platform-specific code (such as Java, Kotlin for Android, and Swift, Objective-C for iOS) in your Flutter app.<\/span><\/p>\n\n\n\nStep 6: Create a Helper Class called CloseFlutterModuleHelper with a Method Channel in Your Flutter Module<\/h2>\n\n\nclass<\/span> CloseFlutterModuleHelper<\/span> <\/span>{\n
![\"writing](\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2023\/08\/Write-Your-Flutter-Code-1.webp\")
![\"integrating](\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2023\/08\/Integrating-and-Embedding-Framework-in-iOS-App-1.webp\")
![\"opening](\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2023\/08\/Open-the-Flutter-View-1.webp\")
![\"Flutter](\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/03\/cta2.jpg\")
![\"Prashant](\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2023\/08\/prashant.png\")
![\"expand\"](\"\/assets\/images\/blog\/Vector.png\")