在 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 到相應目錄,參考下面網址:

  • mirrors.tuna.tsinghua.edu.cn

第一步:部署 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 本身一樣,我們應該給予足夠的耐心。

推薦閱讀:

TAG:Flutter | Android | 前端開發 |