寫在文章前!

• 當你看到這篇文章時,你電腦已經有了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完整項目嵌入到原生]