iOS混编Flutter，接入详细步骤，attach连接以及debug断点调试

这两年 Flutter 技术热度持续提高，整个 Flutter 生态和社区也发生了翻天覆地的变化，主要体现在：

• Flutter 稳定版发布到了3.0，现在已经支持移动端、Web端和PC端，通过Flutter 开发的应用程序能够轻松的在各个平台迁移并获得很好的性能。
• Flutter 在 Github Star 数上排名已经进入了前20，在跨端框架中已经成为稳稳的第一。
• 全球很多公司都已经在商业项目中使用 Flutter，比如Google、微软、阿里、字节、百度、京东等，已经有很多成功案例。
• Flutter 第三方库数量持续保持高速增长，有越来越多的人为Flutter生态贡献代码。Flutter 相关的教程、书籍数量也在高速增长。

综上，可以看见Flutter 技术从第一个测试版发布到现在短短 3 年多时间获得了巨大的成功。而之所以能获得成功的主要原因是：Flutter 既能保证很高的开发效率，又能获得丝滑的性能。根据近几年实践统计，Flutter 相比原生开发，人效能提高近一倍，而性能可以接近原生。

一、环境搭建 

可参考这个链接：

1.3 搭建Flutter开发环境 | 《Flutter实战·第二版》

二、集成方式

官方说有两种集成方式，分别是：

1. 使用CocoaPods依赖性管理器和已安装的Flutter SDK（官方推荐）。
2. 为Flutter引擎，已编译的Dart代码和所有Flutter插件创建Framework。手动嵌入Framework，并在Xcode中更新现有应用程序的构建设置

这两种我都使用过目前看还是cocopods这种方式更合理，下面我就详细记录一下：

将Flutter模块接入iOS老工程是一个涉及多个步骤的过程，主要可以通过CocoaPods来管理和集成。以下是一个详细的步骤指南，帮助你完成这一过程：

三、准备工作

1. 安装Flutter SDK：
   • 确保你的开发环境中已经安装了Flutter SDK。你可以从Flutter官网下载并安装适合你操作系统的SDK版本。
   • 安装完成后，通过命令行工具验证Flutter是否正确安装。
2. 创建Flutter模块：
   • 在你的iOS项目同级目录下，使用Flutter命令行工具创建一个新的Flutter模块。命令如下：

     bash复制代码

     flutter create --template module flutter_module

   • 这里flutter_module是Flutter模块的名称，你可以根据需要自定义。
3. 配置CocoaPods：
   • 确保你的iOS项目已经配置了CocoaPods，并且能够正常使用。

四、集成Flutter模块

1. 添加Flutter模块依赖：
   • 在你的iOS项目的Podfile文件中，添加Flutter模块的依赖。这通常涉及到添加Flutter SDK的路径和Flutter模块的路径。例如：

     ruby复制代码

     	flutter_application_path = '../flutter_module'
     	load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
     	target 'YourTargetName' do
     	# 引入Flutter模块
     	install_all_flutter_pods(flutter_application_path)
     	# 其他pod依赖...
     	end

   • 确保Podfile文件配置正确后，运行pod install命令来安装依赖。
2. 配置iOS项目：
   • 在你的iOS项目中，可能需要配置一些必要的设置，以便能够正确加载和运行Flutter模块。这包括在项目的配置文件中添加Flutter的框架搜索路径、库文件路径等。
3. 创建FlutterViewController：
   • 在你的iOS项目中，创建一个继承自FlutterViewController的类。这个类将作为Flutter页面的容器，负责加载和显示Flutter页面。
   • 你可以在需要的地方实例化这个类，并将其添加到UI视图中。

   • - (void)gotoFlutter {
         // 创建并初始化FlutterEngine
         self.flutterEngine = [[FlutterEngine alloc] initWithName:@"MyFlutterEngine" project:nil];
         self.flutterEngine = [[FlutterEngine alloc] initWithName:@"MyFlutterEngine" project:nil];
         [self.flutterEngine runWithEntrypoint:nil];
         [GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];
         // 检查flutterEngine是否成功初始化
         if (self.flutterEngine == nil) {
             NSLog(@"Failed to create FlutterEngine");
             return;
         }
         // 创建FlutterViewController并设置其FlutterEngine
         FlutterViewController *flutterViewController =[[FlutterViewController alloc] initWithEngine:self.flutterEngine nibName:nil bundle:nil];
         // 设置初始路由为测试页面（取消注释）
         [flutterViewController setInitialRoute:@"/test"];
         // 呈现FlutterViewController
         [self presentViewController:flutterViewController animated:YES completion:nil];
         NSLog(@"FlutterViewController presented");
     }

4. 调用Flutter页面：
   • 当你的iOS应用需要加载Flutter页面时，通过实例化FlutterViewController并设置其initialRoute属性来指定要加载的Flutter页面。然后，将这个FlutterViewController添加到你的UI视图中，从而显示Flutter页面。

五、处理原生代码与Flutter代码的交互

1. 使用MethodChannel：
   • MethodChannel是Flutter中用于原生代码和Dart代码之间通信的一种机制。
   • 你可以通过定义一个MethodChannel的实例，并在原生代码和Dart代码中分别实现相应的方法来处理通信。
2. 处理数据传递：
   • 通过MethodChannel，你可以实现数据的双向传递。在iOS原生代码中发送数据给Flutter Dart代码，或在Dart代码中发送数据给iOS原生代码。 

六、调试和优化 

​​​​​​​

1. 调试Flutter代码：
   • 使用Flutter提供的调试工具来调试Flutter代码，包括热重载和热重启等。
   • 使用vscode开发工具，打开flutter工程，执行flutter attach命令行
2. 优化性能：
   • 集成Flutter后，关注应用的性能表现，优化Flutter页面的渲染性能，减少不必要的资源加载。
3. 处理内存管理：
   • 注意Flutter和iOS使用不同的内存管理机制，确保及时释放不再使用的资源，避免内存泄漏和内存占用过高的问题。
   
    

七、断点调试 

一旦将flutter模块集成到原生项目中，由其是iOS的原生项目，我们是否能够保留flutter的快速开发调试的优势呢？
即是否还可以通过Hot reload 或者 Hot Restart来快速开发呢？
那么对应flutter模块，我们如何使用hot reload加速我们的调试速度呢？

答案就是：flutter attach 调试 （开发工具：Xcode 、Visual Studio Code ）

 一：Visual Studio Code

1、 Xcode 启动原生项目 （此处flutter模块已嵌入原生,
2、创建launch.json 文件 如下图

 3、VSCode 编辑 launch.json -> 追加如下代码：

{
    "name": "Flutter: Attach to Device",
    "type": "dart",
    "request": "attach"
}

 

 4、如下图选中刚刚配置的 "request": "attach" 点击 Run

5、完成配置 现在可在iOS 断点Xcode 中调试，Flutter VSCode 中断点调试