I. Componentized access mode

Similar to native componentization, there are two ways to access the flutter environment: How does pod and Framework configure the flutter environment? The Flutter website explains this in detail

1. Access the system in POD mode

1. Create a Flutter_module

 flutter create -t module flutter_module 
Copy the code

Er… An instant rollover… A bunch of awkward… Now the ZSH name is used and you need to switch to bash

source ~/.bash_profile
Copy the code

You can see the flutter_module file below the file

Then create an iOS project. And create a POD file

Modify podFile to add

flutter_application_path = '.. /flutter_module' load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb') install_all_flutter_pods(flutter_application_path)Copy the code

Pod is successful

Modify the code in the ViewController

#import "ViewController.h"
#import <Flutter/FlutterViewController.h>

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setFrame:CGRectMake(100, 100, 200, 50)];
    [button setBackgroundColor:[UIColor greenColor]];
    [button setTitle:@"ClickMePushToFlutterVC" forState:UIControlStateNormal];
    [button addTarget:self action:@selector(btn_click) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
}

- (void)btn_click {
    
//    FlutterViewController *flutterViewController = [[FlutterViewController alloc] init];
    FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithProject:nil nibName:nil bundle:nil];
    if (self.navigationController) {
        [self.navigationController pushViewController:flutterViewController animated:YES];
    } else {
        [self presentViewController:flutterViewController animated:YES completion:nil];
    }
}

@end

Copy the code

a

2. Access in framewor mode

Create a MyFlutterPod repository CD in the flutter_module directory, and then build the corresponding file

Flutter build ios --debug // Build debug products flutter build ios --release --no-codesign // Build release products (select no certificate required) Flutter build ios The default is to use certificates to type releasesCopy the code

Copy the required products into MyFlutterPod repository, and I created a new iOS_Frameworks for convenience

Then in the MyFlutterPod repository, add the framework packaging code

  s.static_framework = true
  p = Dir::open("ios_frameworks")
  arr = Array.new
  arr.push('ios_frameworks/*.framework')
  s.ios.vendored_frameworks = arr
Copy the code

Add MyFlutterPod repository pod to the iOSProject

pod 'MyFlutterPod', :path => '.. /MyFlutterPod'Copy the code

Run and finish

Two, componentized access

Each language has only one main entry function, and Dart is no exception, so you only have to bind a single Flutter_module to it and then use it to split modules. There are two ways to initialize a FLUTTER by routing to the corresponding module

1. Use FlutterViewController directly

    FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithProject:nil nibName:nil bundle:nil];
Copy the code

You can’t load the engine first, it takes a while to initialize

2. Use engine to initialize

FlutterEngine *flutterEngine =
    [[FlutterEngine alloc] initWithName:@"my flutter engine"];
[[flutterEngine navigationChannel] invokeMethod:@"setInitialRoute"
                                      arguments:@"/onboarding"];
[flutterEngine run];
Copy the code

Set the routing jump doesn’t work when flutterViewController. SetInitialRoute (” test1 “)

3. Initialize the two engines

This can greatly speed up UI initialization, reduce user wait time, greatly improve user experience but with it, a lot of memory consumption, complex page hopping logic

Iii. Communication between Flutter and native

1. BasicMessageChannel:

For example, the file information traversed by Native will be transmitted to Dart in succession. For example, Flutter will obtain information from the server and deliver it to Native for processing and return after processing.

2. MethodChannel:

The method Invocation is used to generate one-time communication, such as the Flutter call Native shot;

3.EventChannel:

It is used for continuous communication of Event Streams. After receiving the message, it cannot reply to the message. It is usually used for communication from Native to Dart, such as changes in mobile phone power, network connection, gyroscope, sensor, etc.

4. Componentization scheme

1. Access mode

Access as flutter_module to reduce the cost of packaging into the framework

2. Native binding

The flutter_module is the intermediate key that calls the FLUTTER component to bind to the native

3. Jump scheme

1. Initialize with FlutterViewController, and then jump 2. Maintain a route for each component jump

4. Native interaction

Maintain an interactive route