As an iOSer, I don’t know much about Android, so this article will only cover the content about iOS native embedding of Flutter. When iOS native projects embed some of the Flutter pages, The part of Flutter is imported into the project through Cocoapods as a three-party library in the form of modules.

Note:The main point of this article isThe embeddedOperation.

1 createflutter_module

Our project is in the FM folder on the desktop.

1.1 Create with Android Studio

To create a Flutter project with Android Studio, select Module of type, Java and OC of language respectively, specify the project location, and click Finish, as shown below.

1.2 Create the flutter command

In the FM directory, create Module with the following command:

$ flutter create -i objc -a java -t module flutter_module
Copy the code

1.3 Command Parameters

-t: indicates the type of the project to be created, and flutter create –help to view the help information. The default value is APP.

1.4 Supplementary Notes

Let’s take a look at the Module project directory and the initial experience with the Flutter creation project. What’s different about the directory where you create your app project,

The Android and iOS folders in the Module project directory are hidden. This means that Flutter didn’t suggest that we add any native code here when we developed the Module. This was just a test project. This module can also be run separately.

2. Create native projects

Next, create a native project in FM, place the Module and native project in the same directory, manage them using Cocoapods after creation, add two buttons in ViewController, and add their respective click events to prepare for future interaction.

We are all familiar with this process, so I won’t go into it. There are a few things to note here

  • The version of the phone SYSTEM I tested was13.7.
  • Native projects are supported from13.0I don’t have to delete it in the first placeSceneDelegateSomething about it,

3 the import flutter_module

Now that the Flutter module project and the native project are ready, how do we connect them? How do we import Flutter into the native project? The most common solution is to use the Cocoapods import method.

3.1 Adding an ImportmoduleThe configuration of the

Add import Module code to the podfile.

# Uncomment the next line to define a global platform for your project flutter_application_path = '.. /flutter_module' load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb') platform :ios, '9.0' target 'NativeDemo' do install_all_FLutter_PODS (Flutter_application_path) USe_frameworks! # Pods for NativeDemo endCopy the code
  • flutter_application_pathIs:moduleThe absolute path to, ifmoduleIf the absolute path of phi changes, then this place has to change as well.
  • install_all_flutter_podsInstallation:module

3.2 the importmoduleThe module

Execute pod install to import the Module. We see that three libraries have been imported. This has introduced the Module into the native project.

We first go to the ViewController, import the header file, and pop up the flutter page when the button is clicked.

#import "ViewController.h" #import <Flutter/Flutter.h> @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; } - (IBAction)pushFlutter:(id)sender {FlutterViewController *vc = [[FlutterViewController alloc] init]; [self presentViewController:vc animated:YES completion:nil]; } @endCopy the code

When the project is up and running, click button 1 and the flutter page pops up. At this point, the native has imported the Flutter Module and simply called the flutter page.

conclusion

Main steps and precautions:

  1. createflutter_modulePay attention to language choice.
  2. podfileConfiguration, noticeflutter_moduleThe absolute path to.
  3. When we modifyflutter_moduleSave the code, rerun the project, and clean it up if it doesn’t workXcodeThe cache.