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

写在文章前!

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

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

     
     
     

     混合开发之Flutter项目创建.png

2. • iOS原生项目创建一份

3. • 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

4. • pod install

5. • Xcode中在Build Setting 里面设置Bitcode 设置为NO

6. • 要想让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完整项目嵌入到原生]