Flutter （七） 混合开发 [配置]

写在文章前!

  • 当你看到这篇文章时,你电脑已经有了Flutter环境 。其次安装了Xcode。再者安装了CocoaPods。遇到问题欢迎评论交流! 文末有Demo
  • 本文Mac系统是10.15.1
  • CocoaPod环境是1.8.3
  • Xcode版本是11.2.1
  • Flutter版本是1.13.6

    • Flutter项目创建时选择module选项


      混合开发之Flutter项目创建.png
    • iOS原生项目创建一份
    • Xcode工程目录下新建Podfile文件(添加如下依赖)
      1.注意:本事例是Xcode工程和Flutter工程在同一级目录下
      2.Podfile里面的flutter_module是Flutter 工程名字 
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '9.0'
inhibit_all_warnings!
target 'Navitiv_Demo' do
    flutter_application_path = '../flutter_module'
    load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
    install_all_flutter_pods(flutter_application_path)
end
    • pod install
    • Xcode中在Build Setting 里面设置Bitcode 设置为NO

    • 要想让Xcode对Flutter代码进行一些操作再配置一下脚本


      Xcode配置Flutter脚本.png
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed

上面路径是您电脑安装Flutter SDK里面Xcode脚本路径 如下图:

flutterSDK让Xcode编译flutter代码脚本.png

7.测试Xcode 弹出Flutter 界面 事例代码 见下图


Xcode弹出Flutter界面事例代码.png

原生弹出Flutter界面.png

注:Demo中包括Flutter和Xcode项目各一份、交互更全面、解释更清晰!!!

Demo中交互方法使用.png

重磅！！！

这篇文章为大家提供了：1.完整的Flutter和原生混合开发案例 2.Flutter项目嵌入到原生项目 两个项目链接

点下赞呗！！！

Flutter （二）布局
Flutter （三） 状态管理
Flutter （四） Map转模型
Flutter （五） 网络请求
Flutter （六） 保留界面状态
Flutter （七） 混合开发 [配置]
Flutter （八） 混合开发 [Flutter完整项目嵌入到原生]

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容