在 macOS 上運行 Flutter 桌面端項目

18年12月5號，Flutter 發布了 1.0 正式版本，關於這次版本發布的評論不再細說，可以參考我的回答：

如何評價 Google 發布 Flutter 1.0 正式版？?

www.zhihu.com

Flutter 1.0 版本發布 Live 上提到了 Flutter 的 flutter-desktop-embedding 項目，即，讓 Flutter 可以跑在桌面端以及嵌入式設備上，本人對此很感興趣，今天有時間，就跑一個 macOS 系統的 Flutter Demo 程序吧！

準備工作：Cocoapods 配置

務必確保 Cocoapods 安裝好，一會兒 XCode 編譯時需要用到。

首先對編譯運行環境進行檢查：

flutter doctor -v


結果中如果有下面一段，表示 CocoaPods 已經安裝好，可以進行下一步，如果顯示叉號，根據要求進行操作安裝 CocoaPods：

[?] iOS toolchain - develop for iOS devices (Xcode 10.1)
? Xcode at /Applications/Xcode.app/Contents/Developer
? Xcode 10.1, Build version 10B61
? ios-deploy 1.9.4
? CocoaPods version 1.5.3


由於 CocoaPods 包有500兆左右的大小，直接 pod setup會從 github 上 clone 得極其漫長，推薦跳過 pod setup 直接從國內鏡像源 clone 到相應目錄，參考下面網址：

• https://mirrors.tuna.tsinghua.edu.cn/help/CocoaPods/

第一步：部署 flutter-desktop-embedding

方式還是相當簡單，找到 Flutter SDK 的部署路徑，把 flutter-desktop-embedding 部署在同一路徑下就可以了。

git clone https://github.com/google/flutter-desktop-embedding.git


(當然你可以部署在其它地方，但是要修改配置文件標明路徑，今天就不走彎路了。)

第二步：編譯生成 FlutterEmbedderMac.framework

進入 /flutter-desktop-embedding/library/macos，雙擊FlutterEmbedderMac.xcodeproj 打開 xcode 項目，直接編譯此項目，出現 Build Succeeded 編譯成功，關閉此項目即可。

注意，這裡有容易混淆的地方，這個前置項目將會生成一個依賴給之後的macOS 桌面程序編譯時使用，即生成FlutterEmbedderMac.framework，而這個 library 項目本身依賴FlutterEmbedder.framework，名字差一個 Mac，這個封裝了 Flutter engine，不要搞混。

第三步：編譯運行 macOS 桌面端 Flutter demo 程序

這次要進入 /flutter-desktop-embedding/example/macos，注意，是example文件夾，找到 /macos 裡面的 ExampleEmbedder.xcodeproj，雙擊運行 xcode 項目。

同樣，點擊左上角的編譯運行箭頭，稍等片刻即可跑起來 demo。

注意，如果編譯輸出 FlutterEmbedderMac.framework失敗，缺少這個依賴是沒法跑起來 demo 的。

簡單演示

在 macOS 上運行 Flutter 桌面端 https://www.zhihu.com/video/1056242041092141056

注意這裡一個Bug，就是拖動窗口調整大小時，窗口整體會出現紅色的閃爍。

總結

Flutter 的發展速度大家有目共睹，我們也了解了 Google 拿 Flutter 一統全端開發的野心，大家都對此充滿期待。今天在 macOS 上跑的這個 Flutter 桌面端 demo ，儘管步驟有些繁瑣，儘管還有小 Bug，但是我覺得還 ok 了，畢竟這個項目才剛剛開始，如同 Flutter 本身一樣，我們應該給予足夠的耐心。

推薦閱讀：