Flutter 開發桌面應用——遷移已有App應用到桌面版

炸雞叔發表於2019-06-09

前言

最近用flutter做了一款App,已經發布了Android和iOS的版本,因為有計劃支援全部平臺。所以開始嘗試flutter desktop的解決方案。在github上我們能發現兩個方案,一個是flutter官方的方案flutter-desktop-embedding還有一個是使用go和glfw開發的go-flutter

兩種方案對比

在選擇使用flutter-desktop還是go-flutter之前,我們先對兩種方案做一些介紹和對比。

Flutter 開發桌面應用——遷移已有App應用到桌面版

兩種方式的專案結構:

Flutter 開發桌面應用——遷移已有App應用到桌面版

Flutter Desktop Embedding:

在flutter desktop中我們可以看到目錄結構和flutter開發手機App的結構是類似的,一個主專案下有各個平臺的殼工程(這裡面也可以包含Android和iOS),然後由殼工程整合flutter的渲染引擎。flutter的程式碼寫在lib目錄中。

如果我們懂一些macOS開發或者windows開發,可以直接在專案中修改原生程式碼,比如你想修改整個程式的window的樣式直接在原工程中就能修改,又比如macOS你要整合蘋果的IAP,可以直接在原生專案中實現即可。

它的缺點就是三個平臺的開發你最好都得懂一些

Go Flutter:

Go Flutter由於本身Go語言就是跨平臺的,所有它只有一個desktop目錄,表示桌面版,相比於flutter desktop它讓開發者完全不需要去關心macOS或者windows開發了,desktop中全是go語言編寫的內容,最後desktop可以編譯成三中平臺的可執行檔案。開發者只需要會Go語言即可。

它的缺點就是如果win或者mac或者linux你要在不同的平臺做一些特殊的功能或者介面,會特別麻煩,不像在Flutter desktop中直接在宿主專案中實現即可。

對比結果如何選擇

首先我們要明確,兩種方案都不太成熟,但是如果要用來開發,也不是用不了。大家選擇的時候可以根據自身技術棧,以及產品的特性來選擇。

如果你懂Go語言,同時你的程式是閱讀類,或者偏業務類,基本不需要和本身Native互動的,選 Go Flutter真的很爽。

如果你懂一點macOS或者windows開發,同時你的程式經常三個桌面端各有特色,而且需要修改本身整個window的一些樣式,那麼選擇Flutter desktop embedding。

Go Flutter實際使用

上面說了這麼多,我們來實際體驗一下Go flutter。先說一下背景,我已經使用flutter開發了一款App,現在我要把App變成可以執行到桌面的版本。我寫的軟體叫做Everything是一款記錄類軟體,在這裡可以下載到everythings.app大家可以先看一下效果。

  1. 安裝Go ,由於Go flutter使用Go編寫,所以需要安裝Go工具包。大家可以在官網下載安裝

  2. 安裝hover,hover是 Go Flutter的一個命令列工具,簡化了專案初始化以及執行等步驟。

    使用下面命令安裝

    go get -u github.com/go-flutter-desktop/hover
    複製程式碼

    注意如果上面的命令卡住下載不下來,大家可以設定一下代理,設定命令列代理可以開啟ss或者v2ray,然後在命令列輸入命令設定

    export http_proxy="http://127.0.0.1:8001"; export HTTP_PROXY="http://127.0.0.1:8001"; export https_proxy="http://127.0.0.1:8001"; export HTTPS_PROXY="http://127.0.0.1:8001"
    //8001改成你的ss或者v2ray監聽的埠
    複製程式碼

    ⚠️ 注意:安裝好hover之後,官網上說就可以使用hover命令了,但是可能你在命令列裡敲hover可能還是得到的是command not found。 這裡我用的是mac系統,在安裝好之後,在home目錄多了一個go的目錄,需要在你的環境變數里加入一下go的包路徑。

    export PATH=$PATH:/usr/local/go/bin
    export PATH=$PATH:/Users/{你的使用者名稱}/go/bin
    //可以檢查一下你的home目錄是否有了go的目錄,裡面有個bin,將那個目錄加入到環境變數即可
    複製程式碼
  3. 進入你以前開發App的flutter專案,執行命令初始化專案

    hover init github.com/my-organization/simpleApplication
    //後面這個github.com xxxx就是你的專案倉庫地址。沒有的話隨便寫也行
    複製程式碼

    初始化專案完成後,你會在你的專案中發現一個desktop目錄,和以前的iOS和Android是平級的。這個desktop目錄就是桌面版的專案。

  4. 把你的main.dart複製一份名字改為main_desktop.dart,Go flutter有個特別的地方,就是程式的入口不是用的main.dart,而是用的main_desktop.dart。

    修改main_desktop.dart為使用桌面版執行

    void main() {
      // 關鍵是下面這一句
      debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
      runApp(new MyApp());
    }
    複製程式碼
  5. 大功告成,執行專案吧。

    hover run
    //執行 hover run 可以執行專案
    複製程式碼

我們先來看一下執行效果下面是App的執行效果和桌面版的執行效果。

手機版本身效果:

Flutter 開發桌面應用——遷移已有App應用到桌面版

Go Flutter執行的桌面版效果:

Flutter 開發桌面應用——遷移已有App應用到桌面版

FAQ:

1.程式按照上面那樣遷移完成就能跑?

當然不是,我們都知道我們用了很多外掛,其實是隻支援Android或者iOS的,如果你用得比較多的這種外掛,那麼你可能遷移到桌面端過來會比較麻煩。我的整體遷移的時間大概只用了2-3個小時,我用到了sqflite和shared preference,這兩個外掛Go flutter已有實現,所以很容易替換。

2.如何使用Go flutter的外掛

我們知道我們所有和原生通訊都是通過定義一個method channel來通訊的。如果你用到的外掛只支援Android或者iOS,那麼你就需要在desktop中去實現這個外掛的method channel的所有方法。目前Go flutter只有三個外掛可以用,在這裡可以找到。github.com/go-flutter-… 點選某個外掛,就可以看到使用方法,就是把對應程式碼貼到,desktop裡面的option檔案中即可,不要找錯地方了,官網沒說得太清楚。

最後

感謝大家的閱讀,我用flutter開發了個小App也歡迎大家試用:

Everything 把記賬本日記本,行程,待辦等等都裝進一個App裡。

everythings.app/

Flutter 開發桌面應用——遷移已有App應用到桌面版

相關文章