科技引領我們前行
【前言】
1：先簡單的介紹下Flutter，它是一款跨平台應用SDK，高性能跨平台實現方案(暫時討論iOS和Android)，
它不同於RN，少了像RN的JS中間橋接層，所以它的性能相比RN有了很好的提升。
2：Flutter從谷歌推出以來，我就開始關注，到現在3.0以上的版本，SDK也逐步穩定，目前我們的網約車項目也開始集成Flutter組件，並且效果不錯。
3：Flutter弊端也是很明顯，目前支持移動端的第三方框架可選性還不多。
對於iOS和Android來說，使用Flutter開發一套完整的APP，還是需要了解兩端的開發知識，所以使用Flutter，還得並行學習提高跨平台技能。
4：對於Flutter跨平台實現方案，目前我整理了2套可行方案：
（1）：全部使用Flutter框架，包括核心功能部分，缺點未知風險可能比較多，不做優先選擇。
（2）：核心功能使用原生，其他功能使用原生與Flutter交互，優點是風險最小並可控，也是最好選擇方案。當然對於跨平台開發者的跨平台技能要求較高。
【跨平台選擇】
1：我們項目中目前使用原生與Flutter交互，實現的跨平台方案，所以本文主要介紹‘原生與Flutter’集成和交互功能（暫時討論iOS和Android）。
2：之前公司有過一次Flutter的技術分享會，相關資料和項目實踐資料都有整理過，因為開發需求一直比較多，所以拖到今天才在博客上分享和大家一起研究。
3：Flutter環境的配置和安裝本文就不講了，最全面的教程可以去官網找。
【iOS原生集成Flutter】
注意：iOS原生集成Flutter方案已經又更新，所以原來的操作已經行不通了，下面的是新版方案。
使用 cocodpods 把 Flutter 模塊集成到工程中，步驟如下：
（1）：生成的Flutter工程（或者是git上下載的Flutter工程）放在與iOS原工程同級目錄， 如下：（紅色部分為flutter項目名稱）
---指定目錄，創建Flutter工程（生成指令：flutter create -t module flutter_module_test），放在與iOS原工程同級目錄：
（2）：使用cocodpods，把 Flutter 工程集成到iOS項目環境中
打開 主工程 pod PodFile 添加 flutter_application_path，配置集成 Flutter 工程，案例如下：
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
use_frameworks!
flutter_application_path = '/Users/a/Desktop/Flutter-Test/flutter_module_test'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
target 'iOS-TestFlutter' do
# Comment the next line if you don't want to use dynamic frameworks
# Pods for iOS-TestFlutter
pod 'SnapKit'
install_all_flutter_pods(flutter_application_path)
end
注意： flutter_application_path = '/Users/a/Desktop/Flutter-Test/flutter_module_test' 文件路徑一定不要搞錯了！！
打開項目：
，集成完成。
（3）：運行報錯處理
flutter集成完成運行Xcode，Xcode11.0、模擬器 iPhone11 Pro Max 13.0 系統會報錯：
解決方案：切換 flutter 的channel為master，目前是stable。參考https://github.com/flutter/flutter/issues/43151解決辦法。
終端指令：flutter channel master
切換成功之后，flutter 版本由v1.9.1+hotfix.6變成了v1.12.16-pre.32。刪掉 flutter 模塊，重新建模塊然后pod install，重新編譯成功。
（4）：完成上面步驟，通過終端 pod install 指令，flutter項目集成到iOS原生項目中的就完成了。
這里不過先要編譯下flutter項目，編譯通過后，iOS項目再執行下 pod install 就可以運行了，集成完成。
每次fluter項目中代碼有改動（我使用的VSCode開發fluter），iOS只要通過終端 pod install 指令，就能同步fluter的最新代碼到Xcode中。
【iOS 跳轉指定 Flutter 頁面和交互】
---實現方案：通過創建 FlutterViewController，通知channel發送信號實現：
（1）：iOS 跳轉指定 Flutter 頁面實現（swift代碼演示）
let flutterViewController = FlutterViewController(project: nil, nibName: nil, bundle: nil) // 創建 FlutterViewController
flutterViewController?.setInitialRoute("page_home") // home參數: 用於區分跳轉頁面
let channelName = "com.page_home/native_post" // 信號通道名稱：與flutter中注冊的一致
// FlutterEventChannel：創建事件通道對象
let evenChannal = FlutterEventChannel(name: channelName, binaryMessenger: flutterViewController!)
evenChannal.setStreamHandler(self) // 回調代理，flutter主動交互iOS時使用
flutterMainVC?.present(flutterViewController!, animated: true, completion: nil) // 開始跳轉，flutterMainVC 必須是最后一層VC
（2）：flutter判斷來自iOS的跳轉目標實現（Dart代碼演示）
void main(){ //flutter主入口
（3）：flutter主動交互iOS（Dart代碼演示）
class HomePage extends StatefulWidget {
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
static const EventChannel eventChannel = const EventChannel('com.pages.your/native_post'); //注冊一個信號通道
void _onEvent(Object event) { // iOS 交互回調，返回值FlutterError為nill，執行此方法。FlutterError是什么數據，情況下面。
// iOS 交互成功
}
void _onError(Object error) { // iOS 交互回調，返回值FlutterError有值，執行此方法
// iOS 交互失敗
}
}
（4）：iOS 接送處理來自flutter的交互（swift代碼演示）
注：iOS 接送處理來自flutter的交互，主要通過FlutterStreamHandler代理方法
extension ViewController: FlutterStreamHandler {
// arguments：是 flutter給native的參數 EventSink：是用來傳數據的載體 FlutterError：返回給flutter的報錯信息
func onListen(withArguments arguments: Any?, eventSink events: @escaping FlutterEventSink) -> FlutterError? {
events("push傳值給flutter的vc");
return nil;
}
// arguments：是 flutter給native的參數 FlutterError：返回給flutter的報錯信息。
// 注： 此代理方法主要用來提前處理交互定義內容，無相關的內容提前判斷，進行過濾處理。
func onCancel(withArguments arguments: Any?) -> FlutterError? {
print(arguments as Any)
return nil;
}
}
【iOS and Flutter結語】
人生就像美麗的花朵
1：谷歌推出Flutter時間大概一年左右，版本也一直在更新和推進，所以與原生的集成和交互也一直在更新，這就需要我們時刻保持學習狀態，動態更新技能。
2：iOS 和 Flutter的交互方式，並非就上面我分享的一種，也有其他的方式，相比而言，我的方案還是比較簡潔和實用。
3：作為一個移動端專業開發者，我們應該保持對新技術的熱情，跨平台方案離我們已經不再遙遠，相信未來會普及和更加完善。
4：需要了解Android最新版本Flutter使用，請在我的博客專欄里查看。
5：如果技術上有不同看法或者新的技術，歡迎聯系一起討論，本人QQ： 497609288。