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.png

pod 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 doctor

5. Flutter Module 创建

Flutter Module 就是存放 flutter 代码的地方了。

打开命令行，进入到 Podfile 同级目录下（flutter module 存放位置可以自定义，但是要注意 Podfile 文件中相对路径的编辑）。

flutter create -t module flutter_lib

执行上述命令，创建 flutter_lib

flutter create module

flutter_lib

6. 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 Pods

7. Native 跳转 Flutter 页面

完成以上步骤后，只需要新建 FlutterViewController ，然后跳转过去就行了。

Native push Flutter

8. Native 与 Flutter 双向通信

这个另开一篇来写，写完后会在这里更新链接。

iOS/Xcode 与 Flutter 混编（1）：Xcode 中集成 Flutter