[譯]Flutter:從手機到桌面

WhatsXie發表於2019-04-29

之前一篇部落格介紹了藉助 Feather 平臺在 MacOS 和 Windows 上執行我們的 Flutter 應用程式,並且可以直接釋出在其平臺上,但實際使用下來發現 Feather 極不穩定,因此就繼續探索別的方法,進而整理了這篇文章~

??‍? Github Demo

使用 Google 框架構建智慧手機和桌上型電腦的應用程式。

Flutter 多端跨平臺

介紹

如果您正在為智慧手機開發應用程式,可能您已經聽說過新的開發框架,Google 的 Flutter。它是一個框架,允許您使用 Dart 語言(也來自 Google)開發一套程式碼的跨平臺應用程式,併為Android 和 iOS 平臺釋出它們。

該框架現已達到 v1.4.9 版本,並且自從今年 5 月釋出的 beta 3 版本以來,谷歌已經宣佈準備好用於生產。此外,還可以使用 Flutter 為桌面環境(Windows,macOS 和 Linux)構建應用程式,這是本文將要討論的主題。

目前通過兩個仍在開發中的專案提供對桌面平臺的支援。其中一個甚至是谷歌開發的,但有跡象表明該公司不支援它。可以在以下 Github 儲存庫中找到這些專案:

這兩個專案都歸類為 Custom Flutter Engine Embedders,也就是說,它們是 Flutter API 的實現,因此在此框架中開發的專案可以在 Flutter 專案(Android,Fuchsia 和 iOS)正式支援的作業系統之外執行。

桌面端跨平臺

他們通過 GLFW 庫使用 OpenGL(除了 Google 專案的 macOS 版本),它提供了一個 API,用於在桌面平臺上建立視窗以及處理鍵盤和滑鼠輸入等功能。因此,正在開發的應用程式執行的平臺必須安裝 OpenGL 驅動程式。

安裝 Flutter

要安裝 Flutter,請根據您的作業系統,按照官方安裝頁面上列出的步驟進行操作。單擊此處訪問安裝頁面。將需要在本文後面執行專案。不要忘記在您的 PATH 環境變數中包含 Flutter。

也可以檢視我之前的部落格文章進行安裝。

方法一:Flutter 的桌面嵌入(Google)

該專案目前存在一些限制,這些限制在儲存庫文件的“注意事項”部分中指出。

與將在本文後面介紹的第二個專案不同,該專案沒有二進位制檔案,可以快速執行示例專案或設定自己的 Flutter 專案以在桌面平臺上執行它。

您需要在作業系統中編譯此專案的原始碼,然後將生成的庫包含到將成為應用程式一部分的可執行檔案中。將來,此過程將簡化,如當前儲存庫文件中所述。

要通過此專案編譯專案原始碼並使用 Flutter 建立桌面應用程式,請按照此處的說明進行操作。

方法二:Go Flutter 桌面嵌入器(Drakirus)

第二個專案是通過 Google 的 Go(Golang)程式語言開發的。

在專案儲存庫中有下載版本,您可以通過已編譯的可執行檔案測試桌面應用程式的示例。此外,建立新的 Flutter 桌面應用程式非常簡單。

以下各項說明如何在專案儲存庫中執行現有示例專案,以及如何執行在 Flutter 中開發的自己的專案,現在作為桌面應用程式。

執行示例專案:

1.在此處訪問專案版本。 2.根據您的平臺,在 Linux,Windows 和 MacOS 的 vpr.2.1-alpha 版本的預建二進位制檔案示例部分中下載示例檔案。 3.將下載的檔案解壓縮到您選擇的位置。 4.在未壓縮檔案集的根目錄中執行stocks可執行檔案(macOS 和 Linux)或 socks.exe(Windows)。它將像您使用的任何其他作業系統應用程式一樣執行(下圖中的示例)。

效果演示

在 Windows 10 桌面環境中執行的 Flutter 中開發的示例應用程式:

Windows 10 下執行截圖

在 Flutter 中開發的示例應用程式在 macOS Mojave 桌面環境中執行:

macOS Mojave 下執行截圖

在 Flutter 中開發的示例應用程式在 Ubuntu Budgie 18.04 桌面環境中執行:

Ubuntu Budgie 下執行截圖

注意:在以下指南中,桌面應用程式的 macOS 版本以黑屏開始,但應用程式在最大化螢幕後正常載入。一旦我找到解決這個問題的方法,我就會更新這篇文章。

操作步驟

使用預編譯檔案

  1. 在此處下載適用於您的作業系統的預編譯檔案。
  2. 將內容解壓縮到您選擇的目錄中。
  3. 通過根據環境和應用程式的資訊更改引數的值來編輯模板目錄的 config.json 檔案。 FlutterPath: Flutter 安裝的目錄。 FlutterProjectPath:您的專案(在Flutter中開發)目錄。IconPath:桌面應用程式圖示檔案的路徑(可以保留預設值)。ScreenHeight:桌面應用程式的初始螢幕高度。ScreenWidth:桌面應用程式的初始螢幕寬度。如果您使用的是 Windows,請在目錄路徑中使用雙反斜槓(\)而不是簡單的反斜槓(\)。
  4. 執行撲桌面模板的可執行檔案,在 MacOS 或 Linux,或撲桌面 -template.exe 可執行檔案,在 Windows 和應用程式將啟動。它將像您使用的任何其他作業系統應用程式一樣執行。

編譯 Go 桌面專案

  1. 下載並通過其下載頁面下載安裝 Go 程式語言在這裡(用於安裝並提供了下載頁面上的 PATH 環境變數的工具配置說明)。
  2. 如果您的計算機上沒有安裝 GCC,則需要安裝它以從 Go 中的桌面專案編譯一些程式碼檔案。對於 Windows,我建議使用 tdm64-gcc。對於 macOS,使用 Xcode Command Line Tools 提供的那個。對於 Linux,可能您已經在系統上安裝了 GCC。
  3. 如果您沒有在系統中安裝 Git,請在此處下載並安裝 Git。
  4. 通常通過 flutter create 命令或 IDE 建立Flutter 專案。
  5. 在 Flutter 專案的 main.dart 檔案中包含以下匯入:import 'package:flutter/foundation.dart' show debugDefaultTargetPlatformOverride;
  6. 在 Flutter 專案的 main.dart 檔案的 main 方法開頭(在呼叫 runApp 方法之前)中包含以下程式碼(此程式碼是必需的,因為 Flutter 專案不正式支援桌面平臺): debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
  7. 在終端中,flutter build bundle 在 Flutter 專案的目錄中執行該命令(將使用將在以下步驟中下載和配置的模板在 Flutter 中執行應用程式所需的檔案建立目錄)。
  8. 同樣在終端中,執行 go get -u github.com/go-gl/glfw/v3.2/glfw 命令以下載 Go 語言的 GLFW 庫(如果出現問題,請檢視本文末尾的“ 故障排除”項)。在安裝之前,您必須驗證此連結中是否包含所有依賴項。
  9. 在 Go here 下載桌面專案(當前正在執行並支援 Windows,macOS 和 Linux 的版本)。
  10. 將下載檔案的內容解壓縮到作業系統上的任何目錄。
  11. 將從 go-flutter-desktop-embedder-0.2.1-alpha 中提取的目錄重新命名為 go-flutter-desktop-embedder
  12. 將提取的(現在重新命名的)目錄複製到 src\github.com\Drakirus 目錄(或 Windows 上的 src/github.com/Drakirus),該目錄必須在 GOPATH 中建立(GOPATH 是一個環境變數,指示安裝的位置為Go語言下載的庫;在 Windows 和 macOS 上,通常是使用者個人資料夾中的 go 目錄)。
  13. 下載或複製需要此演練模板庫在這裡(它會被用來製造更容易,而不必在 Go 語言程式設計執行應用程式)。如果您已選擇下載檔案而不是克隆儲存庫,請將下載的檔案解壓縮到您首選的目錄中。
  14. 使用 Linux, 連結下載 Flutter 庫(模板操作所需)。 Windows 上的 (替換粗體文字,這是測試版 v0.9.4,使用與您在專案中使用的 Flutter 版本對應,通過檢視檔案可以獲得什麼在 Flutter 安裝路徑中的 bin\internal\engine.version)。
  15. 解壓縮下載的檔案並將 Linux 上的 libflutter_engine.so 檔案,FlutterEmbedder.framework(FlutterEmbedder.framework.zip 檔案的內容,檔名為FlutterEmbedder.framework,目錄名為FlutterEmbedder.framework)複製到 macOS 上,或者將 Windows 上的 flutter_engine.dll 複製到目錄模板中,main.go 檔案所在的位置,以及之前複製到 GOPATH 的 go-flutter-desktop-embedder 目錄。
  16. 在終端上,轉到 go-flutter-desktop-embedder 目錄並 export CGO_LDFLAGS="-L${PWD}" 在 Linux 上執行命令,set CGO_LDFLAGS=-L%cd% 在 Windows 上執行命令或 export CGO_LDFLAGS="-F${PWD} -Wl,-rpath,@executable_path"在 macOS 上執行命令。保持終端開放。
  17. 在同一終端上,go install 在 go-flutter-desktop-embedder 目錄中執行命令。仍然保持終端開放。
  18. 通過根據環境和應用程式的資訊更改引數的值來編輯模板目錄的 config.json 檔案。FlutterPath: Flutter 安裝的目錄。FlutterProjectPath:您的專案(在 Flutter 中開發)目錄。IconPath:桌面應用程式圖示檔案的路徑(可以保留預設值)。ScreenHeight:桌面應用程式的初始螢幕高度。ScreenWidth:桌面應用程式的初始螢幕寬度。如果您使用的是 Windows,請在目錄路徑中使用雙反斜槓(\)而不是簡單的反斜槓(\)。
  19. 仍然在同一個終端中,重複步驟 16 並執行 go build 命令,但現在在解壓縮模板的目錄中,main.go 檔案所在的位置。在 Windows 上,使用該 go build -ldflags -H=windowsgui 命令而不是 go build 在執行時終端不與應用程式一起顯示。在 macOS 上,可能需要根據平臺標準打包目錄,以便終端不與應用程式一起顯示。
  20. 可執行檔案將被建立(這將具有相同的名稱作為專案目錄,撲桌面模板在 Linux 和 Mac 或 Hover,桌面 template.exe 在 Windows 上,如果模板目錄是 Hover 桌面模板)。 21.執行建立的可執行檔案,應用程式將啟動。它將像您使用的任何其他作業系統應用程式一樣執行。
  • 當對 Flutter 專案進行任何更改時,請重複步驟 7(在專案目錄中執行 flutter build bundle 命令)。
  • 專案中使用的 Flutter 版本應與步驟 14 中下載的版本相同。
  • 每當您對模板的 config.json 檔案進行任何更改時,請重複步驟 16 和 19。

打包應用程式以進行分發

要分發在 Flutter 中開發的桌面應用程式,以便它可以在未安裝 Flutter 的計算機上執行,請在執行上述指南之後按照以下步驟執行您自己的專案。

  1. 確保使用的是當前版本的模板,版本為 v1.1.0。
  2. 建立一個目錄來儲存執行應用程式所需的所有檔案。在以下步驟中,此目錄將被稱為應用程式目錄。
  3. 在應用程式目錄中包含 flutter-desktop-template 可執行檔案(在 Linux 和 macOS 上)或 flutter-desktop-template.exe(在 Windows 上)。根據應用程式的名稱重新命名可執行檔案。
  4. 還包括應用程式目錄中的 Flutter 庫。這個庫是 libflutter_engine.so Linux 上的檔案時,FlutterEmbedder.framework 在 MacOS 目錄,或 flutter_engine.dll 上的 Windows 檔案。
  5. 將 config.json 檔案複製到應用程式目錄。通過將 FlutterPath 和 FlutterProjectPath 的值更改為空白來編輯此檔案(將值保留為空)。
  6. 在應用程式目錄中包含帶有圖示影像的 assets 目錄。如果已選擇其他映像,請將該映像複製到應用程式目錄,並在 config.json 檔案的 IconPath 值中更正其路徑。
  7. 將 flutter_assets 目錄複製到應用程式目錄,該目錄位於 Flutter 專案的構建目錄中。
  8. 最後,複製位於 bin\cache\artifacts\engine\windows-x64 (在 Windows 平臺), bin/cache/artifacts/engine/linux-x64 (在 Linux 平臺) 或者 bin/cache/artifacts/engine/darwin-x64 (在 macOS 平臺) 上的 icudtl.dat 檔案從您的 Flutter 安裝到應用程式目錄的路徑。
  9. 在 macOS 上,可能需要根據平臺標準打包目錄,以便終端不與應用程式一起顯示。

現在,您可以分發應用程式並將其安裝在環境中,而無需同時安裝 Flutter。

結論

本文中介紹的兩個專案允許使用 Flutter 框架開發的應用程式在桌面環境中執行。

  • 第一個是谷歌自己開發的,但不提供支援。
  • 第二個方法既可以更輕鬆地執行基於 Flutter 和桌面應用程式構建的應用程式,也可以更加熟悉使用谷歌製作的 Go(Golang)程式語言的開發人員。

對於應該為桌面和移動環境開發應用程式以便可以重用程式碼的情況,本文中介紹的兩個專案都是很好的解決方案。

翻譯整理自:medium.com/flutter-com…

相關文章