Flutter實戰3 — PC上執行Flutter APP

小德_koudle發表於2019-03-04

FlutterAPP

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

前面兩篇文章實現了一個簡單的天氣查詢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-desktop-embedding/example/macos路徑有一個ExampleEmbedder.xcodeproj，雙擊在xcode中開啟，執行後效果如下

感覺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裡，需要的依賴有四個如下：

flutter-desktop-embedding/library/macos下的 FlutterEmbedderMac.xcodeproj
flutter-desktop-embedding/plugins/color_panel/macos下的 FlutterEmbedderColorPanel.xcodeproj
flutter-desktop-embedding/plugins/file_chooser/macos下的 FlutterEmbedderFileChooser.xcodeproj
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的工程，所以也沒有細講，好在有一個更方便的方法！