源碼接入方案，后續(xù)探索交互傳值、產(chǎn)物集成方案。

步驟

一、創(chuàng)建iOS原生項(xiàng)目

二、創(chuàng)建Flutter模塊

WX20200414-132327@2x.png

1. 需要在項(xiàng)目的同級(jí)目錄下創(chuàng)建。

2. 通過(guò)命令行創(chuàng)建。

flutter create -t module my_flutter

3. 進(jìn)入到FlutterDemo的iOS 主工程目錄。

4. 使用Cocoapods。

   • 創(chuàng)建podfile文件。

     pod init

   • 執(zhí)行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填入相對(duì)路徑

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

     • 老版本的配置如下：

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

   最后記得根據(jù)上圖的提示，將Run Script到緊挨著Target Dependencies phase的下面，接下來(lái)就可以通過(guò)?B構(gòu)建你的項(xiàng)目了。如果找不到這個(gè)sh文件，也可以填入完整路徑。

除此之外老版本還需要在build phase中添加腳本代碼用來(lái)構(gòu)建Dart代碼。

添加腳本

添加腳本

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

5. 禁用Bitcode

   Flutter 暫時(shí)不支持Bitcode

三、iOS原生界面跳轉(zhuǎn)到Flutter界面

1. 導(dǎo)包

   #import <Flutter/Flutter.h>
   #import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h> // 如果你需要用到Flutter插件時(shí)
   

2. 界面彈出，這里使用模態(tài)視圖

   FlutterViewController *flutterViewController = [FlutterViewController new];
   //GeneratedPluginRegistrant.register(with: flutterViewController);//如果你需要用到Flutter插件時(shí)
   [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/
http://www.itdecent.cn/p/aa7f3d5b93fc
http://www.itdecent.cn/p/7a7780dca2a3