【Flutter 环境配置传送门】 <https://flutter.io/docs/get-started/install>

 

1、在工程目录执行如下命令引入 flutter 配置
flutter create -t module flutter_module
补充:添加 flutter 依赖库流程:
cd flutter_module vim pubspec.yaml // (编辑 pubspec.yaml(类似于iOS Podfile)
添加需要引入的库,例如官方Demo中的 english_words: ^3.1.0) flutter packages get // 更新配置
之后工程结构大致如下,红框内的文件是需要在第四步中引入到Xcode内的产物。



2、Xcode内添加对应 XX.xcconfig 文件

(为的是引入对应 xcode_backend.sh 脚本的环境变量)

release.xcconfig
#include "flutter.xcconfig" FLUTTER_BUILD_MODE=release //
如果使用了POD,需要将pod的配置再次引入 #include "Pods/Target Support
Files/Pods-flutter_sdk_test/Pods-flutter_sdk_test.release.xcconfig"
debug..xcconfig
#include "flutter.xcconfig" // 如果使用了POD,需要将pod的配置再次引入 #include "Pods/Target
Support Files/Pods-flutter_sdk_test/Pods-flutter_sdk_test.debug.xcconfig"
flutter.xcconfig
#include "./flutter_module/.ios/Flutter/Generated.xcconfig" ENABLE_BITCODE=NO
备注:Generated.xcconfig内容(在执行完第一步的命令后会自动生成):
// This is a generated file; do not edit or check into version control.
FLUTTER_ROOT=/Users/yaheng/.flutterLib
FLUTTER_APPLICATION_PATH=/Users/yaheng/mySelf/Flutter/my_demo/flutter_sdk_test/flutter_module
FLUTTER_TARGET=/Users/yaheng/mySelf/Flutter/my_demo/flutter_sdk_test/flutter_module/lib/main.dart
FLUTTER_BUILD_DIR=build SYMROOT=${SOURCE_ROOT}/../build/ios
FLUTTER_BUILD_NAME=1.0.0 FLUTTER_BUILD_NUMBER=1
Xcode 工程内修改编译配置如下



3、在iOS工程里添加运行脚本 Build Phases(创建Run Scrip)
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
并且确保 Run Script 这一行在 "Target dependencies" 以及 "Check Pods Manifest.lock" 之后。



4、添加flutter产物引用

4.1、Framework * 2

* 在 Embedded Binaries 内点击 + 号添加
* 点击 Add Other...
* 进入 flutter_module/.ios/Flutter/ (看不到 .ios 隐藏文件可在该文件夹内同时按住 shift+command+.
开启显示)
* 选中 App.framework
* 注意引用形式选择 Create folder references
* flutter_module/.ios/Flutter/engine/Flutter.framework 的引用重复步骤1~5
4.2、assets

* Xcode项目内添加资源引用
* flutter_module/.ios/Flutter/flutter_assets
* 注意引用形式选择 Create folder references
如若找不到上述的三个文件,可在添加完步骤三之后,CMD + R 先运行一下工程,便于对应文件的生成。

最终的文件引用形式示例:



 

5、编写 Flutter 代码 flutter_module/lib/main.dart ,使用 Xcode 运行后即可查看效果。

最简加载 Flutter 界面代码示例:
#import <Flutter/Flutter.h> FlutterViewController *viewController =
[FlutterViewController new]; [self.navigationController
pushViewController:viewController animated:YES];
写在最后:

已有项目集成 Flutter 就先讨论到这,但是这么集成, Flitter 的工程代码是耦合进 Xcode
原工程内的,不过大家可以先通过这个集成逻辑大概了解到整体的流程,之后我们继续讨论如何隔离并同时集成进安卓项目中^_^~

注意:flutter_assets 文件内引入的资源在上线之前注意要仔细核实一遍是否有不需要的文件。

PS镇楼图
<https://itunes.apple.com/cn/app/%E9%97%B2%E9%B1%BC-%E6%8C%82%E9%97%B2%E9%B1%BC-%E9%97%B2%E7%BD%AE%E8%83%BD%E6%8D%A2%E9%92%B1/id510909506?mt=8>
尽量不要像先驱【咸鱼】
<https://itunes.apple.com/cn/app/%E9%97%B2%E9%B1%BC-%E6%8C%82%E9%97%B2%E9%B1%BC-%E9%97%B2%E7%BD%AE%E8%83%BD%E6%8D%A2%E9%92%B1/id510909506?mt=8>
一样莫名的将一张 130KB 的测试图随包发版上线...



 

友情链接
KaDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信