源码接入方案,后续探索交互传值、产物集成方案。
步骤
一、创建iOS原生项目
二、创建Flutter模块
WX20200414-132327@2x.png-
需要在项目的同级目录下创建。
-
通过命令行创建。
flutter create -t module my_flutter
-
进入到FlutterDemo的iOS 主工程目录。
-
使用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
-
禁用Bitcode
Flutter 暂时不支持Bitcode
三、iOS原生界面跳转到Flutter界面
-
导包
#import <Flutter/Flutter.h> #import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h> // 如果你需要用到Flutter插件时
-
界面弹出,这里使用模态视图
FlutterViewController *flutterViewController = [FlutterViewController new]; //GeneratedPluginRegistrant.register(with: flutterViewController);//如果你需要用到Flutter插件时 [flutterViewController setInitialRoute:@"route1"]; [self presentViewController:flutterViewController animated:true completion:nil];
-
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
网友评论