Flutter混编方案

• Flutter 工程作为原生工程共用的子模块，维持原有的原生工程管理方式不变。这种模式，就是三端分离模式。
• 除了实现轻量级接入，还可以快速实现 Flutter 功能的“热插拔”，降低原生工程的改造成本。而 Flutter 工程独自管理，无需打开原生工程，可直接进行 Dart 代码和原生代码的开发调试。

• 三端工程分离模式的关键是抽离 Flutter 工程，将不同平台的构建产物依照标准组件化的形式进行管理，即 Android 使用 aar、iOS 使用 pod。换句话说，将 Flutter 模块打包成 aar 和 pod，这样原生工程就可以像引用其他第三方原生组件库那样快速接入 Flutter 了。
  Flutter混编工程管理方式

平台通道架构设计

消息使用platform channels（平台通道）在客户端（UI）和宿主（平台）之间传递；

平台通道架构图

1.客户端（Flutter端）发送与方法调用相对应的消息；
2.平台端（iOS、Android端）接收方法，并返回结果；

• iOS端通过FlutterMethodChannel做出响应；
• Android端通过MethodChannel做出响应；

集成Flutter

现有的Flutter是一个Application项目，现在想把它嵌入原生应用中。首先需要将现有Flutter工程转成Module工程，在flutter 工程中的pubspec.yaml 文件中flutter节点下添加如下配置，然后pug get跑一下

module:
    androidX: true
    androidPackage: com.ganyuan.flutter_module
    iosBundleIdentifier: com.ganyuan.flutterModule

pub get 一下就会生成：.android 和 .ios 文件夹,这两个文件是flutter applicaiton没有的,在 mac上是两个 隐藏文件夹,window 是可见的

iOS中集成Flutter module

这里采用官方推荐的方法，使用 CocoaPods 依赖管理器安装 Flutter SDK 使用，每次构建应用的时候都会从源代码中编译 flutter_module。
首先在本地安装Flutter的SDK及环境配置，FlutterSDK安装教程
安装完成后，将我们的iOS工程和Flutter工程(默认已创建好)放到同一目录下，如下图所示

1. 在 Podfile 中添加下面代码：

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

2. 每个需要集成 Flutter 的 Podfile target，执行 install_all_flutter_pods(flutter_application_path)：

   target 'iOS_demo' do
     install_all_flutter_pods(flutter_application_path)
   end
   

3. 在 Podfile 的 post_install 部分，调用 flutter_post_install(installer)。

   post_install do |installer|
     flutter_post_install(installer) if defined?(flutter_post_install)
   end
   

4. 运行 pod install。
   提示
   当你在 flutter_module/pubspec.yaml 改变了 Flutter plugin 依赖，需要在 Flutter module 目录运行 flutter pub get，来更新会被podhelper.rb 脚本用到的 plugin 列表，然后再次在你的应用目录 some/path/MyApp 运行 pod install.

podhelper.rb 脚本会把你的 plugins， Flutter.framework，和 App.framework 集成到你的项目中。
你应用的 Debug 和 Release 编译配置，将会集成相对应的 Debug 或 Release 的 编译产物。可以增加一个 Profile 编译配置用于在 profile 模式下测试应用。
小提示
Flutter.framework 是 Flutter engine 的框架， App.framework 是你的 Dart 代码的编译产物。

添加蓝牙使用权限

6.在原生项目中引用Flutter，确保项目能编译成功：
为了在既有的iOS应用中展示Flutter页面，需要启动 Flutter Engine和 FlutterViewController。
通常建议为我们的应用预热一个长时间存活的FlutterEngine,我们将在应用启动的 app delegate 中创建一个 FlutterEngine，并作为属性暴露给外界。
AppDelegate.h代码：

@import UIKit;
@import Flutter;

@interface AppDelegate : UIResponder <UIApplicationDelegate>
@property (nonatomic,strong) FlutterEngine *flutterEngine;

@end

AppDelegate.m代码：

#import "AppDelegate.h"
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>

@interface AppDelegate ()

@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary<UIApplicationLaunchOptionsKey, id> *)launchOptions {
    self.flutterEngine = [[FlutterEngine alloc] initWithName:@"my flutter engine"];
    [self.flutterEngine run];
    // Connects plugins with iOS platform code to this app.
    [GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];

    return YES;
}
@end

调用FlutterViewController

    FlutterEngine *flutterEngine = ((AppDelegate *)UIApplication.sharedApplication.delegate).flutterEngine;
    myFlutterViewController *flutterViewController = [[myFlutterViewController alloc]initWithEngine:flutterEngine nibName:nil bundle:nil];

SceneDelegate.m代码：

#import "SceneDelegate.h"
#import "myFlutterViewController.h"
#import "AppDelegate.h"

@interface SceneDelegate ()

@end

@implementation SceneDelegate


- (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions {
    UIWindowScene *windowScene = (UIWindowScene *)scene;
      self.window = [[UIWindow alloc] initWithWindowScene:windowScene];
      self.window.frame = windowScene.coordinateSpace.bounds;
      
      UITabBarController *tabBarController = [[UITabBarController alloc] init];
      
    FlutterEngine *flutterEngine = ((AppDelegate *)UIApplication.sharedApplication.delegate).flutterEngine;
    myFlutterViewController *flutterViewController = [[myFlutterViewController alloc]initWithEngine:flutterEngine nibName:nil bundle:nil];
    flutterViewController.view.backgroundColor = [UIColor whiteColor];
    flutterViewController.tabBarItem.title = @"Tab1";
    flutterViewController.tabBarItem.image = [UIImage imageNamed:@"icon.bundle/home"];
    flutterViewController.tabBarItem.selectedImage = [UIImage imageNamed:@"icon.bundle/home_selected"];
      
      UIViewController *controller2 = [[UIViewController alloc] init];
      controller2.view.backgroundColor = [UIColor yellowColor];
      controller2.tabBarItem.title = @"Tab2";
      controller2.tabBarItem.image = [UIImage imageNamed:@"icon.bundle/video"];
      controller2.tabBarItem.selectedImage = [UIImage imageNamed:@"icon.bundle/video_selected"];
      
      UIViewController *controller3 = [[UIViewController alloc] init];
      controller3.view.backgroundColor = [UIColor blueColor];
      controller3.tabBarItem.title = @"Tab3";
      controller3.tabBarItem.image = [UIImage imageNamed:@"icon.bundle/like"];
      controller3.tabBarItem.selectedImage = [UIImage imageNamed:@"icon.bundle/like_selected"];
      
      UIViewController *controller4 = [[UIViewController alloc] init];
      controller4.view.backgroundColor = [UIColor greenColor];
      controller4.tabBarItem.title = @"Tab4";
      controller4.tabBarItem.image = [UIImage imageNamed:@"icon.bundle/page"];
      controller4.tabBarItem.selectedImage = [UIImage imageNamed:@"icon.bundle/page_selected"];
      
      [tabBarController setViewControllers: @[flutterViewController, controller2, controller3, controller4]];
      
      tabBarController.tabBar.backgroundColor = [UIColor whiteColor];
          
      self.window.rootViewController = tabBarController;
      [self.window makeKeyAndVisible];
}

@end

在 Xcode 中打开 iOS_demo.xcworkspace ，你现在可以使用 ⌘B 编译项目了。
demo运行效果：