如果你是一位前端開發工程師，對“跨平臺”一詞應該不會感到陌生。像常見的前端框架：比如React、Vue、Angular，它們可以做網頁端，也可以做移動端，但很少能做到跨PC、Mac端，也就是我們熟知的Windows、Linux以及macOS上的應用程式。即使有，受限於JS的效能瓶頸，當有大量的科學計算需求時，則會略顯疲態。
有沒有一個理想的UI框架能夠通殺它們所有呢？答案是——Flutter。
Flutter的效能優勢
做為一個通用的跨平臺的UI框架，Flutter在效能方面的突出表現是非常引人奪目的。拿Android舉例，一個安卓的原生APP在繪圖的時候，要先呼叫Android框架的Java程式碼，然後再呼叫skia（C/C++）繪圖引擎程式碼，最後生成的CPU或者gpu的指令，在裝置上完成繪圖。而Flutter的APP在繪圖的時候，是先呼叫Flutter框架的Dart程式碼，然後直接呼叫skia（C/C++）程式碼。所以只要Flutter框架Dart程式碼的效率可以媲美原生框架的Java程式碼的時候，那麼Flutter的效能就可以媲美原生APP。
而如React Native，它首先要呼叫框架本身的JavaScript程式碼，然後再呼叫Android框架的Java程式碼，然後呼叫skia，這比原生的App執行過程多出了一個步驟，所以它的這個效能肯定是不及原生的。
國內知名的“閒魚”技術團隊對於Flutter在效能上逼近原生App的解釋如下：
1.預先(AOT)編譯，執行時直接執行Native(arm)程式碼；
2.必需的同Native通訊(channel)是C++層次，效能好；
3.其執行緒模型中Dart程式碼執行(在UI TaskRunner)，圖片下載(IO TaskRunner)，真正的渲染(GPU TaskRunner)，同平臺的通訊等(Platform TaskRunner即Native概念下的主執行緒)是互相隔離的。透過將耗時的邏輯放入IO TaskRunner或新開Isolate(會在Dart執行緒池中執行);GPU TaskRunner可以將幀資料提交給GPU時UI TaskRunner已在準備下一幀資料這種流水線的機制提高了渲染速度；
4.Flutter層面針對佈局等的優化:佈局計算時單次樹走動即可完成;Relayout Boundary機制:如果Child 的size是固定的，那麼不會因為Child的Relayout導致Parent ReLayout；Repaint Boundry機制:如果樹的某個子樹如果同樹的其他部分不同頻地重繪，那麼RenderRepaintBoundary可以改善效能。
5.Skia團隊針對Flutter的優化。
6.框架的佈局優化對上層開發透明。
如果你有一定的前端開發經驗，特別是移動端的開發經驗，或者深入探究過Flutter，上述內容應該不難理解。
如今，使用Flutter開發移動端App的教程鋪天蓋地，我來手把手教你如何使用Flutter搞定PC、Mac端開發，從此徹底打通前端跨平臺。
PC端實戰
1. 準備工作
首先我們要確保Flutter開發環境準備就緒。有關搭建開發環境的步驟，可參閱：
https://flutter.cn/docs/get-started/install
此處不再贅述，我們重點關注下面的操作：
到今天為止，在Stable分支上的Flutter SDK可以設定啟用PC端開發的能力，但實際上是無法使用的。因此，我們需要將其切換到master分支上。切換的方法是在命令列視窗執行下面的語句：
flutter channel master
或許也可以直接git方式切換，但我沒有嘗試，感興趣的朋友可以自行嘗試。
在回顯切換成功的提示後，記得執行
flutter upgrade
升級到最新的SDK（包含Dart）版本。
另外，如果你使用的是Windows的話，還需要安裝Visual Studio開發軟體，並安裝Desktop development with C++的Workload（中文名為：工作負載）。如果是macOS，則無需安裝Visual Studio。
2. 啟用PC端開發支援
在命令列執行
flutter config --enable-windows-desktop
稍等幾秒後即可完成。控制檯將如下輸出：
Setting "enable-windows-desktop" value to "true".
You may need to restart any open editors for them to read new settings.
成功啟用後，執行
flutter devices
列出已連線的除錯裝置列表，首次執行可能會花費一些時間下載必要的開發工具包。隨後，可以看到如下類似的輸出結果：
1 connected device:
Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.18363.900]
其他作業系統環境類似。
另外，我們也可以隨時執行
flutter config
檢視目前的配置。還可以隨時還原為預設設定。
Settings:
enable-windows-desktop: true
3. 建立專案
這一步無需多言，在相應的目錄下執行
flutter create [專案名]
即可。
4. 遷移專案
對於之前沒有啟用PC端開發支援的工程，或者需要遷移到PC、Mac端的工程，需要在專案根目錄下執行
flutter create .
（注意最後的點）
5. 執行程式
這一步無需多言，進入專案根目錄，然後執行
flutter run
即可看到執行結果。
好了，接下來就是實現具體業務的環節了。
希望各位讀者有所收穫，祝工作順利！