前面兩篇文章實現了一個簡單的天氣查詢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.\n'
      '${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 第一步

 

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

 

4.2 第二步

寫APP的名字

 

4.3 第三步

選ICON

 

 

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

 

4.4 第四步

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

 

 

然後點選UPDATE

4.5 第五步

 

點選OPEN XCODE
然後就建好了,建好的工程就在Flutter工程的目錄下。

歡迎加入學習交流群；964557053。進群可免費領取一份最新技術大綱和Android進階資料。請備註csdn