iOS Flutter 搭建集成

这一步是基于系统Flutter环境已经搭建的前提下。

刚接触,正在摸索阶段,有不好的地方,欢迎指教!

环境:macOS Mojave 10.14.5

Xcode 10.2.1

参考:https://segmentfault.com/a/1190000018804821?utm_source=tag-newest(在原生ios项目中集成flutter)

内容如下:创建+配置项目,达到如下效果:


iOS Flutter 搭建集成_第1张图片

步骤如下:

一、创建工程项目

二、创建Flutter模块

三、调用



一、创建工程项目

这一步比较简单,做过iOS开发都很熟悉

新建工程:

iOS Flutter 搭建集成_第2张图片
iOS Flutter 搭建集成_第3张图片
iOS Flutter 搭建集成_第4张图片
新建工程
iOS Flutter 搭建集成_第5张图片
iOS Flutter 搭建集成_第6张图片
新建文件MainViewController:
iOS Flutter 搭建集成_第7张图片
关联点击方法

二、创建Flutter模块

打开终端,cd进去项目文件中

使用flutter自带命令创建一个flutter模块项目

flutter   create-t   module   my_flutter

iOS Flutter 搭建集成_第8张图片
执行成功后
iOS Flutter 搭建集成_第9张图片
看到生成文件my_flutter

同样,cd在当前目录

pod init

iOS Flutter 搭建集成_第10张图片

编辑Podfile,以便将flutter包括在里面(注意核对路径对不对)

platform :ios, '9.0'

target 'myproject' do

end

#新添加的代码

flutter_application_path = './'

eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)

运行pod安装

pod install


iOS Flutter 搭建集成_第11张图片

关闭项目,使用pod新创建的文件myproject.xcworkspace打开


iOS Flutter 搭建集成_第12张图片

若是编译报错:

ld: '/SourceCode/myproject/myproject/DerivedData/myproject/Build/Products/Debug-iphoneos/FlutterPluginRegistrant/libFlutterPluginRegistrant.a(GeneratedPluginRegistrant.o)' does not contain bitcode. You must rebuild it with bitcode enabled (Xcode setting ENABLE_BITCODE), obtain an updated library from the vendor, or disable bitcode for this target. file '/SourceCode/myproject/myproject/DerivedData/myproject/Build/Products/Debug-iphoneos/FlutterPluginRegistrant/libFlutterPluginRegistrant.a' forarchitecture arm64

clang: error: linker command failed with exit code 1 (use -v to see invocation)

使用修改下图解决:

iOS Flutter 搭建集成_第13张图片

三、调用

在上面步骤一按钮关联的方法中添加代码:

- (IBAction)srart:(id)sender

iOS Flutter 搭建集成_第14张图片

运行代码,点击“启动”按钮,进入空白页面

iOS Flutter 搭建集成_第15张图片

日志报错:

iOS Flutter 搭建集成_第16张图片

第一个错误

解决办法:

iOS Flutter 搭建集成_第17张图片

另外的问题(PS:这个花了我多了点点时间)

2019-07-08 19:25:11.734547+0800 myproject[5642:673211] [VERBOSE-1:callback_cache.cc(132)] Could not parse callback cache, aborting restore

2019-07-08 19:25:14.449479+0800 myproject[5642:673211] Failed to find assets path for "Frameworks/App.framework/flutter_assets"

2019-07-08 19:25:14.552308+0800 myproject[5642:673274] [VERBOSE-2:engine.cc(115)] Engine run configuration was invalid.

2019-07-08 19:25:14.552336+0800 myproject[5642:673274] [VERBOSE-2:FlutterEngine.mm(304)] Could not launch engine with configuration.

2019-07-08 19:25:14.580422+0800 myproject[5642:673281] flutter: Observatory listening on http://127.0.0.1:59755/47Ovn9gwZYo=/

项目中缺少了文件,所以找到对应的文件,引用过来。拖过去即可


iOS Flutter 搭建集成_第18张图片

(1)    Debug.xcconfig、Flutter.xcconfig、Release.xcconfig文件获取位置:项目文件->my_flutter->.ios(隐藏文件)->Config文件夹里面

(2)    App.framework文件获取位置:. 项目文件->my_flutter->.ios(隐藏文件)-> Flutter文件夹里面

(3)    Flutter.framework文件获取位置:. 项目文件->my_flutter->.ios(隐藏文件)-> Flutter-> engine文件夹里面

(4)    Generated.xcconfig文件获取位置:. 项目文件->my_flutter->.ios(隐藏文件)-> Flutter文件夹里面

App.framework文件会找不到,请做如下配置:

iOS Flutter 搭建集成_第19张图片
iOS Flutter 搭建集成_第20张图片

# Type a script or drag a script file from your workspace to insert its path.

# Type a script or drag a script file from your workspace to insert its path.

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

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

再次运行APP,App.framework便会生成在上述(2)的位置中

将文件引用添加入项目中:

iOS Flutter 搭建集成_第21张图片

再次运行项目,点击“启动”,便可看到效果

iOS Flutter 搭建集成_第22张图片

以上便是这次学习记录过程,继续研究学习中…

你可能感兴趣的:(iOS Flutter 搭建集成)