Flutter實戰3 — PC上執行Flutter APP

小德_koudle發表於2019-03-04

程式碼github地址,新增了PC的工程:github.com/koudle/GDG_…

前面兩篇文章實現了一個簡單的天氣查詢APP:

  1. Flutter實戰1 — 寫一個天氣查詢的APP
  2. Flutter實戰2 — 寫一個天氣查詢的APP

因為Flutter除了Andorid、iOS,還可以在PC上執行,所以一直想試試以下在PC上的跨平臺效果如何。發現Flutter想在PC上跑起來還不太簡單。

現在開始。

1. 開始

這個是支援Flutter在Windows, macOS, and Linux上執行的庫:

github.com/google/flut…

接下來將按照這個的指示操作。

2. 在PC上執行example工程

flutter-desktop-embedding
clone到本地,這時需要很重要的一個點:

  • flutter-desktop-embedding的工程要和Flutter SDK的目錄在同一級
Flutter實戰3 — PC上執行Flutter APP

flutter-desktop-embedding/example/macos路徑有一個ExampleEmbedder.xcodeproj,雙擊在xcode中開啟,執行後效果如下

Flutter實戰3 — PC上執行Flutter APP

感覺Flutter在PC上還挺簡單的,真是如此嗎??

3. 在PC上執行天氣查詢APP

接下來,實現在PC上跑通之前寫得天氣查詢APP

3.1 Flutter程式碼改造

因為現在Flutter預設還不支援PC,如果不改造就在PC上跑,會報Unknown platform的錯誤,為什麼會報這個錯誤呢?因為Flutter在執行的時候,都會根據當前平臺設定TargetPlatform的值,但是因為PC現在還不是Flutter預設支援的平臺,導致沒有給TargetPlatform賦值,從而丟擲Unknown platform的錯誤,具體我們看原始碼:

  • 在Flutter原始碼中的platform.dart中的如下程式碼:
//獲取 TargetPlatform只的函式
TargetPlatform get defaultTargetPlatform {
  TargetPlatform result;
  //這裡根據平臺來賦值,但是隻有iOS、Android、Fuchsia,沒有PC
  if (Platform.isIOS) {
    result = TargetPlatform.iOS;
  } else if (Platform.isAndroid) {
    result = TargetPlatform.android;
  } else if (Platform.isFuchsia) {
    result = TargetPlatform.fuchsia;
  }
  assert(() {
    if (Platform.environment.containsKey(`FLUTTER_TEST`))
      result = TargetPlatform.android;
    return true;
  }());
  //這裡判斷debugDefaultTargetPlatformOverride有沒有值,有值的話,就賦值給result
  if (debugDefaultTargetPlatformOverride != null)
    result = debugDefaultTargetPlatformOverride;
    
  //如果到這一步,還沒有取到 TargetPlatform 的值,就會拋異常   
  if (result == null) {
    throw FlutterError(
      `Unknown platform.
`
      `${Platform.operatingSystem} was not recognized as a target platform. `
      `Consider updating the list of TargetPlatforms to include this platform.`
    );
  }
  return result;
}
複製程式碼

Flutter只判斷了iOS、Android、Fuchsia三個平臺,PC平臺沒有判斷,result值為空,拋了Unknown platform的異常。

改造就很簡單,因為PC平臺沒有複製,所以我們要複製,怎麼複製呢?看上面程式碼:

  if (debugDefaultTargetPlatformOverride != null)
    result = debugDefaultTargetPlatformOverride;
複製程式碼

所以,要給debugDefaultTargetPlatformOverride複製,這裡就感覺是Google故意開的一個口子擴充套件用的。

main()函式,runApp()之前賦值,如下:

void main(){
  _setTargetPlatformForDesktop();
  runApp(MyApp());
}

/// If the current platform is desktop, override the default platform to
/// a supported platform (iOS for macOS, Android for Linux and Windows).
/// Otherwise, do nothing.
void _setTargetPlatformForDesktop() {
  TargetPlatform targetPlatform;
  if (Platform.isMacOS) {
    targetPlatform = TargetPlatform.iOS;
  } else if (Platform.isLinux || Platform.isWindows) {
    targetPlatform = TargetPlatform.android;
  }
  if (targetPlatform != null) {
    debugDefaultTargetPlatformOverride = targetPlatform;
  }

}
複製程式碼

Flutter程式碼改造完畢!

3.2 新建一個空的macOS工程

在Xcode中新建一個空的macOS工程,步驟如下:

File -> New -> Project -> macOS -> Cocoa APP

這樣我們就新建了一個空的macOS工程,這裡其實和Flutter在iOS和Android上是一樣的,都是建一個空殼程式,作為Flutter的一個容器,Flutter執行在上面。

接下來就是給macOS工程新增Flutter的依賴,需要新增的依賴都在flutter-desktop-embedding裡,需要的依賴有四個如下:

  1. flutter-desktop-embedding/library/macos下的 FlutterEmbedderMac.xcodeproj
  2. flutter-desktop-embedding/plugins/color_panel/macos下的 FlutterEmbedderColorPanel.xcodeproj
  3. flutter-desktop-embedding/plugins/file_chooser/macos下的 FlutterEmbedderFileChooser.xcodeproj
  4. flutter-desktop-embedding/plugins/menubar/macos下的 FlutterEmbedderMenubar.xcodeproj

還要新增flutter_assets的資源,就是Flutter工程在build目錄下生產的產物

終於加完,累死,覺得肯定能跑起來,一點執行,報錯!原來是路徑找不到,改好,在執行,又是Flutter SDK找不到,又改,又提示FlutterEmbedder.framework版本不對,原來是我本地Flutter的版本和flutter-desktop-embedding裡的版本不一樣,又替換到最新的版本,終於跑通了。

現在終於明白,為什麼要把flutter-desktop-embedding放到和Flutter SDK同一級的目錄了,如果不是同一級目錄,路徑不對,根本執行不了,這裡也可以看出,flutter-desktop-embedding現在確實還不太成熟,連依賴配置都沒有弄好,好在Google團隊也開始重視Flutter在PC上的執行了。

上面的太複雜了,我不推薦這麼來建PC的工程,所以也沒有細講,好在有一個更方便的方法!

4. Feather

使用這個Feather這個工具來建Flutter的PC工程,和自己建比起來,真是太方便了!

官網Feather

注意:使用這個工具需要翻牆

安裝好Feather,看怎麼來建PC工程:

4.1 第一步

Flutter實戰3 — PC上執行Flutter APP

點選BROWSE,選擇本地自己的工程,如果你沒有改造Flutter程式碼的,會有如下提示:

Flutter實戰3 — PC上執行Flutter APP

4.2 第二步

寫APP的名字

Flutter實戰3 — PC上執行Flutter APP

4.3 第三步

選ICON

Flutter實戰3 — PC上執行Flutter APP

然後就會看到建好的工程的列表:

Flutter實戰3 — PC上執行Flutter APP

4.4 第四步

在列表中,點選工程進到一個列表,點選TEST,提示如下:

Flutter實戰3 — PC上執行Flutter APP

然後點選UPDATE

4.5 第五步

Flutter實戰3 — PC上執行Flutter APP

點選OPEN XCODE

然後就建好了,建好的工程就在Flutter工程的目錄下

5、執行效果

Flutter實戰3 — PC上執行Flutter APP
Flutter實戰3 — PC上執行Flutter APP

相關文章