[譯]Flutter：從手機到桌面

以前一篇博客介紹了藉助 Feather 平臺在 MacOS 和 Windows 上運行咱們的 Flutter 應用程序，而且能夠直接發佈在其平臺上，但實際使用下來發現 Feather 極不穩定，所以就繼續探索別的方法，進而整理了這篇文章~

👨🏻‍💻 Github Demo

使用 Google 框架構建智能手機和臺式機的應用程序。

介紹

若是您正在爲智能手機開發應用程序，可能您已經據說過新的開發框架，Google 的 Flutter。它是一個框架，容許您使用 Dart 語言（也來自 Google）開發一套代碼的跨平臺應用程序，併爲Android 和 iOS 平臺發佈它們。

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

目前經過兩個仍在開發中的項目提供對桌面平臺的支持。其中一個甚至是谷歌開發的，但有跡象代表該公司不支持它。能夠在如下 Github 存儲庫中找到這些項目：

• 【官方】Google 開源的 Flutter 嵌入桌面的 API 實現：flutter-desktop-embedding
• 【推薦】Go 語言實現工具：hover

這兩個項目都歸類爲 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 中開發的示例應用程序：

在 Flutter 中開發的示例應用程序在 macOS Mojave 桌面環境中運行：

在 Flutter 中開發的示例應用程序在 Ubuntu Budgie 18.04 桌面環境中運行：

注意：在如下指南中，桌面應用程序的 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…