iOS原生混编Flutter

源码接入方案，后续探索交互传值、产物集成方案。

步骤

一、创建iOS原生项目

二、创建Flutter模块

[email protected]

1. 需要在项目的同级目录下创建。

2. 通过命令行创建。

flutter create -t module my_flutter

3. 进入到FlutterDemo的iOS 主工程目录。

4. 使用Cocoapods。

   • 创建podfile文件。

     pod init

   • 执行pod install 看到安装了Flutter

     Downloading dependencies
     Installing Flutter (1.0.0)
     Installing FlutterPluginRegistrant (0.0.1)
     Generating Pods project
     Integrating client project
     

   • 在podfile文件中添加代码

      # Comment the next line if you don't want to use dynamic frameworks
      use_frameworks!
     ​
      # Pods for FlutterDemo
     ​
      flutter_application_path = '../my_flutter'
      load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
      install_all_flutter_pods(flutter_application_path)
     ​
     end
     

     • flutter_application_path填入相对路径

     • 这是Flutter 版本 >= 1.10.14版本的配置

     • 老版本的配置如下：

     flutter_application_path = 'path/to/my_flutter/'
     eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
     

   最后记得根据上图的提示，将Run Script到紧挨着Target Dependencies phase的下面，接下来就可以通过⌘B构建你的项目了。如果找不到这个sh文件，也可以填入完整路径。

除此之外老版本还需要在build phase中添加脚本代码用来构建Dart代码。

添加脚本

添加脚本

  "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
  "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed

5. 禁用Bitcode

   Flutter 暂时不支持Bitcode

三、iOS原生界面跳转到Flutter界面

1. 导包

   #import 
   #import  // 如果你需要用到Flutter插件时
   

2. 界面弹出，这里使用模态视图

   FlutterViewController *flutterViewController = [FlutterViewController new];
   //GeneratedPluginRegistrant.register(with: flutterViewController);//如果你需要用到Flutter插件时
   [flutterViewController setInitialRoute:@"route1"];
   [self presentViewController:flutterViewController animated:true completion:nil];
   

3. Dart中的路由配置

   void main() => runApp(_widgetForRoute(window.defaultRouteName));
   ​
   Widget _widgetForRoute(String route) {
   switch (route) {
   case 'route1':
   return MyApp();
   default:
   return Center(
   child: Text('Unknown route: $route', textDirection: TextDirection.ltr),
   );
   }
   }
   

参考

https://www.cnblogs.com/tanglei/p/10656525.html
https://rencheng.cc/2020/03/02/flutter/Flutter%E4%B8%8EiOS%E9%9B%86%E6%88%90/
https://www.jianshu.com/p/aa7f3d5b93fc
https://www.jianshu.com/p/7a7780dca2a3