1. 基本介绍
Flutter 是一门支持跨平台编译的语言,支持独立开发,然后分发到各种应用平台。但是在实际运用中,可能并不是单独使用 Flutter 进行开发,而是选择在原生中嵌入 Flutter,这里主要讲一下如何在 iOS 端嵌入 flutter 使用。
2. 环境安装
- Xcode 安装。
AppStore 下载安装即可。
- CocoaPods 安装。
网上大把教程,不在赘述。
- Flutter 环境安装。
Native - Flutter 混编,需要保证双端代码的运行。如何使用 Android Studio 开始 Flutter 编程。这是我之前写 flutter 教程时的文章,建议安装完成 Android Studio 并可以运行 Flutter Demo 后在进行混编操作。
3. Xcode Workspace 创建
打开 Xcode, File -> New -> Project,生成一个 Project,如下图。
Xcode Project打开命令行进入到新建的工程目录下,和 .xcodeproj 文件同级。
pod init
执行 pod init 后,会新增一个 Podfile 文件如下图。
Xcode Podfile.pngpod install
执行 pod install,完成 .workspace 文件创建,如下图。
Terminal pod install Xcode workspace双击 .xcworkspace 文件,打开 Native 工程。
4. Flutter 环境检测
flutter doctor
先执行 flutter doctor,检查 flutter 环境是否 OK。
command not found: flutter
如果有上述报错,执行 source ~/.bash_profile ,然后在执行一次 flutter doctor
正常运行如下图,Android 相关错误可以忽略。如果 x 比较多,建议研究一下 如何使用 Android Studio 开始 Flutter 编程。
flutter doctor5. Flutter Module 创建
Flutter Module 就是存放 flutter 代码的地方了。
打开命令行,进入到 Podfile 同级目录下(flutter module 存放位置可以自定义,但是要注意 Podfile 文件中相对路径的编辑)。
flutter create -t module flutter_lib
执行上述命令,创建 flutter_lib
flutter create module flutter_lib6. Xcode (Native端) 集成 Flutter
双击 .workspace 文件打开项目,更改 Podfile 文件以下两处,注意 flutter_application_path 一定指向刚刚创建的 Flutter Module 路径,否则会报错。
Native Podfile# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
@flutter_application_path = './flutter_lib/'
def flutter_source_project_embased_function()
load File.join(@flutter_application_path, ‘.ios’, ‘Flutter’, ‘podhelper.rb’)
install_all_flutter_pods(@flutter_application_path)
end
target 'NativeFlutterDemo' do
# Comment the next line if you don't want to use dynamic frameworks
use_frameworks!
# Pods for NativeFlutterDemo
flutter_source_project_embased_function
target 'NativeFlutterDemoTests' do
inherit! :search_paths
# Pods for testing
end
target 'NativeFlutterDemoUITests' do
# Pods for testing
end
end
更改完成后,命令行进入到 Podfile 所在文件夹下,执行 pod install
pod install
Native pod install
完成后,工程文件下 Pods 目录会新增以下 3 个 Flutter 文件。
Native Flutter Pods7. Native 跳转 Flutter 页面
完成以上步骤后,只需要新建 FlutterViewController ,然后跳转过去就行了。
Native push Flutter8. Native 与 Flutter 双向通信
这个另开一篇来写,写完后会在这里更新链接。
网友评论