1. 基本介紹

Flutter 是一門支持跨平臺(tái)編譯的語言，支持獨(dú)立開發(fā)，然后分發(fā)到各種應(yīng)用平臺(tái)。但是在實(shí)際運(yùn)用中，可能并不是單獨(dú)使用 Flutter 進(jìn)行開發(fā)，而是選擇在原生中嵌入 Flutter，這里主要講一下如何在 iOS 端嵌入 flutter 使用。

2. 環(huán)境安裝

• Xcode 安裝。

AppStore 下載安裝即可。

• CocoaPods 安裝。

網(wǎng)上大把教程，不在贅述。

• Flutter 環(huán)境安裝。

Native - Flutter 混編，需要保證雙端代碼的運(yùn)行。如何使用 Android Studio 開始 Flutter 編程。這是我之前寫 flutter 教程時(shí)的文章，建議安裝完成 Android Studio 并可以運(yùn)行 Flutter Demo 后在進(jìn)行混編操作。

3. Xcode Workspace 創(chuàng)建

打開 Xcode， File -> New -> Project，生成一個(gè) Project，如下圖。

Xcode Project

打開命令行進(jìn)入到新建的工程目錄下，和 .xcodeproj 文件同級(jí)。

pod init

執(zhí)行 pod init 后，會(huì)新增一個(gè) Podfile 文件如下圖。

Xcode Podfile.png

pod install

執(zhí)行 pod install，完成 .workspace 文件創(chuàng)建，如下圖。

Terminal pod install

Xcode workspace

雙擊 .xcworkspace 文件，打開 Native 工程。

4. Flutter 環(huán)境檢測

flutter doctor

先執(zhí)行 flutter doctor，檢查 flutter 環(huán)境是否 OK。

command not found: flutter

如果有上述報(bào)錯(cuò)，執(zhí)行 source ~/.bash_profile ，然后在執(zhí)行一次 flutter doctor

正常運(yùn)行如下圖，Android 相關(guān)錯(cuò)誤可以忽略。如果 x 比較多，建議研究一下 如何使用 Android Studio 開始 Flutter 編程。

flutter doctor

5. Flutter Module 創(chuàng)建

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

打開命令行，進(jìn)入到 Podfile 同級(jí)目錄下（flutter module 存放位置可以自定義，但是要注意 Podfile 文件中相對(duì)路徑的編輯）。

flutter create -t module flutter_lib

執(zhí)行上述命令，創(chuàng)建 flutter_lib

flutter create module

flutter_lib

6. Xcode (Native端) 集成 Flutter

雙擊 .workspace 文件打開項(xiàng)目，更改 Podfile 文件以下兩處，注意 flutter_application_path 一定指向剛剛創(chuàng)建的 Flutter Module 路徑，否則會(huì)報(bào)錯(cuò)。

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

更改完成后，命令行進(jìn)入到 Podfile 所在文件夾下，執(zhí)行 pod install

pod install

Native pod install

完成后，工程文件下 Pods 目錄會(huì)新增以下 3 個(gè) Flutter 文件。

Native Flutter Pods

7. Native 跳轉(zhuǎn) Flutter 頁面

完成以上步驟后，只需要新建 FlutterViewController ，然后跳轉(zhuǎn)過去就行了。

Native push Flutter

8. Native 與 Flutter 雙向通信

這個(gè)另開一篇來寫，寫完后會(huì)在這里更新鏈接。