Flutter App打包為桌面端程式

程式設計之路從0到1發表於2019-06-10
FlutterAPP

到目前為止，Flutter雖沒有在桌面端發力，但仍然提供了直接將Flutter App專案打包到桌面端的途徑。在我們看來，這更像一種實驗性質的嘗試。無論如何，我還是相信Flutter在跨平臺UI方面的優秀表現，現在就讓我們來體驗一下Flutter在桌面上的表現吧。

直接使用 flutter-desktop-embedding 打包體驗並不友好，像很多其他的框架一樣，我們需要一個腳手架來輔助，這裡推薦 go-flutter-desktop 專案，這是一個Go語言開發的將Flutter App打包為桌面程式的庫。Go語言也是我非常喜歡的語言！

關於Flutter環境搭建等等基礎就不說了，預設讀者具備Flutter開發能力，接下來請看詳細步驟

步驟一：搭建環境

  • flutter 環境略

  • golang go 語言開發環境

  • hover go-flutter-desktop 提供的腳手架工具

先看Go語言環境準備

  1. 訪問Go語言中文網 下載相應的包，記住要下載最新的版本，本篇以Windows為例，下載 go1.12.5.windows-amd64.msi。如你本地已安裝舊的Go版本，請務必更新到最新的
  2. 指定安裝目錄，點選安裝
  3. 配置環境變數。安裝完成後，將安裝目錄下的bin目錄加入到系統環境變數Path中，也就是go.exe所在的路徑加入到環境變數Path中。
  4. 檢查環境。開啟cmd命令列，輸入go env，成功輸出Go的環境路徑，則Go環境完成。

說明，如大家還有興趣學習Go語言的開發，則還需要配置GOPATH環境變數。

下載安裝 hover 庫。這是一個Go語言庫 在cmd命令列執行以下命令安裝，如網路不穩定，可能需要一定時間

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

步驟二：建立工程

若沒有現成的Flutter 工程，先建立一個。請先確保Flutter環境正常可用

flutter create myapp
複製程式碼

cd 到 flutter 專案路徑下，即myapp下。這裡以建立的測試工程為例，進入到myapp下的lib 資料夾，將main.dart刪除。由於flutter桌面專案的特殊要求，因此這裡需要給工程配置兩個入口檔案，分別建立main.dart、main_desktop.dart檔案，注意檔名是固定的，不可隨意修改。然後在建立一個app.dart檔案，這裡充當我們測試app的具體程式碼，命名無要求

main.dart程式碼如下，這是移動端app需要用到的入口程式碼

import 'package:flutter/material.dart';
import 'app.dart';

void main() => runApp(MyApp());
複製程式碼

main_desktop.dart內容如下，這是桌面端需要的入口程式碼

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart' show debugDefaultTargetPlatformOverride;
import 'app.dart';

void main() {
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
  runApp(MyApp());
}
複製程式碼

app.dart內容如下，UI的實際程式碼，即在螢幕上顯示一個Hello World!

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
      return Scaffold(appBar: AppBar(title: Text("Demo")),
        body: Center(child: Text('Hello World!'),),
      );
  }
}
複製程式碼

步驟三：初始化為桌面工程

在Flutter專案的根路徑下，有android目錄和ios目錄，但沒有桌面端的編譯目錄，這一步即是藉助hover 庫自動生成桌面端的專案編譯目錄

確保當前命令列環境在myapp專案路徑下，否則cd過去，然後執行以下命令

hover init github.com/my-organization/myapp
複製程式碼

如果你有相應的github專案路徑，請修改為自己的，否則可以像上面一樣隨便寫一個。本例中是一個測試工程，沒上傳到GitHub，這裡隨便寫了一個。注意這裡的坑，這個GitHub路徑是必須要寫的，否則無法正常打包，這可能是該腳手架工具的BUG

步驟四：執行與打包

如你需要以熱載入啟動app，請在當前命令列中執行hover run，注意，此時會聯網下載一些依賴，會耗費一些時間，而且還要看人品，根據自己的網路情況，被牆也是很有可能的。如果你在後臺使用了Socks5代理，則會發生遠端伺服器關閉連線的錯誤，請關閉Socks5代理，開啟Http代理

依賴準備完成後，會啟動app

在這裡插入圖片描述
如需替換圖示和資源，可以進入我們生成的專案下的desktop路徑下的assets目錄操作

打包為可執行程式 還可以使用hover build命令打包為exe可執行檔案，進入專案下的desktop\build\outputs\windows路徑檢視

還存在的問題

如果大家有現成的Flutter App，可以按照以上步驟打包成桌面程式進行嘗試，只需要注意分離出桌面端的入口檔案main_desktop.dart即可，目前直接將Flutter App打包為桌面端程式，仍然會存在一些可能的相容性問題，另外go-flutter-desktop專案還不支援釋出模式，僅支援除錯模式，這意味著編出來的桌面程式，始終有一個黑框控制檯，且不斷的輸出日誌。

參考： github.com/go-flutter-…

歡迎關注我的公眾號：程式設計之路從0到1

程式設計之路從0到1

相關文章