Flutter開發(fā)-為項目添加Desktop桌面平臺支持

前言

我們都知道Flutter 的目標是：Run in any screen乐横！就目前已經(jīng)在iOS,Android和Web端都做到了很好的支持冒版。而目前對桌面端的支持绘雁，還沒有正式發(fā)布票彪。從目前的官網(wǎng)文檔上看，F(xiàn)lutter已經(jīng)支持了macOS,Linux和Windows平臺外莲，但目前的這部分功能還是在dev分支上,處于alpha階段猪半，依然沒有正式發(fā)布。本篇文章我們就使用Fultter-dev分支SDK嘗試創(chuàng)建桌面端項目偷线。

官方描述：
Warning: Alpha! This page covers desktop support, which is available as alpha-quality features in the Flutter dev channel. Support still has notable feature gaps, including accessibility support.

本篇文章磨确，我們就根據(jù)官方文檔的向?qū)В瓿蒑acOS平臺支持声邦。

環(huán)境配置

Flutter SDK
Android Studio, IntelliJ IDEA 或 Visual Studio Code
Xcode
CocoaPods

創(chuàng)建一個新的Fultter項目

打開終端,執(zhí)行如下命令

flutter channel dev
flutter upgrade
flutter config --enable-<platform>-desktop

這里的<platform>指macos或linux,這里我們是macos

flutter config --enable-macos-desktop

檢測--enable-macos-desktop是否生效：

flutter devices

2 connected devices:

iPhone 8 (mobile) ? 31E81583-69D8-460B-90A1-14BC313D65AC ? ios  ? com.apple.CoreSimulator.SimRuntime.iOS-13-4
(simulator)
macOS (desktop)  ? macos  ? darwin-x64 ? Mac OS X 10.15.4 19E266

這里輸出了2個鏈接設備乏奥，其中一個為? macos,說明config操作成功。
這里需要注意的是：在以上操作完成之后亥曹，重新啟動你的IDE,這里我以Android Studio 為例邓了，在選擇設備的時候就可以看到一個macOS(desktop):

截屏2020-09-16 下午6.11.28.png

**創(chuàng)建項目并運行

flutter create myapp

此時我們會發(fā)現(xiàn)工程目錄中多了一個macos文件夾

截屏2020-09-16 下午6.20.13.png

在MacOS上運行項目

flutter run -d macos

這里同樣可以通過IDE的方式運行，這里就不做舉例了媳瞪。
運行結(jié)果：

截屏2020-09-16 下午6.25.26.png

此時此刻骗炉，熟悉的頁面就展示在了面前！

在已有的項目中添加MacOS支持

通過終端進入到項目的根目錄蛇受，然后執(zhí)行以下操作

flutter create .

之后會出現(xiàn)如下輸出：

Recreating project ....                     
  macos/Runner.xcworkspace/contents.xcworkspacedata (created)
  macos/Runner.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_16.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_1024.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_256.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_64.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_512.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_128.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_32.png (created)
  macos/Runner/DebugProfile.entitlements (created)
  macos/Runner/Base.lproj/MainMenu.xib (created)
  macos/Runner/MainFlutterWindow.swift (created)
  macos/Runner/Configs/Debug.xcconfig (created)
  macos/Runner/Configs/Release.xcconfig (created)
  macos/Runner/Configs/Warnings.xcconfig (created)
  macos/Runner/Configs/AppInfo.xcconfig (created)
  macos/Runner/AppDelegate.swift (created)
  macos/Runner/Info.plist (created)
  macos/Runner/Release.entitlements (created)
  macos/Runner.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (created)
  macos/Runner.xcodeproj/project.pbxproj (created)
  macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme (created)
  macos/Flutter/Flutter-Debug.xcconfig (created)
  macos/Flutter/Flutter-Release.xcconfig (created)
  macos/.gitignore (created)
Running "flutter pub get" in flutter_app...                         1.8s
Wrote 29 files.

All done!
[?] Flutter: is fully installed. (Channel dev, 1.22.0-12.0.pre, on Mac OS X 10.15.4 19E266, locale zh-Hans-CN)
[!] Android toolchain - develop for Android devices: is partially installed; more components are available. (Android
    SDK version 29.0.2)
[?] Xcode - develop for iOS and macOS: is fully installed. (Xcode 11.4.1)
[?] Android Studio: is fully installed. (version 3.4)
[?] VS Code: is fully installed. (version 1.45.1)
[?] Connected device: is fully installed. (2 available)

Run "flutter doctor" for information about installing additional components.

In order to run your application, type:

  $ cd .
  $ flutter run

Your application code is in ./lib/main.dart.

同樣的會在根目錄新增一個macos文件夾

zeze@localhost flutter_app % ls
README.md   build       images      lib     pubspec.lock    test
android     flutter_app.iml ios     macos       pubspec.yaml

同樣運行項目：

截屏2020-09-16 下午6.37.14.png

再次句葵，熟悉的界面又呈現(xiàn)在了眼前。

關于443錯誤信息

flutter: Another exception was thrown: SocketException: Connection failed (OS Error: Operation not permitted, errno = 1), address = randomuser.me, port = 443

關于這個錯誤,請移步蘋果開發(fā)者中心 App Sandbox和Entitlements查閱龙巨，類似于iOS的一些權限白名單笼呆，需要進行配置。

總結(jié)

非常期待Flutter 對桌面支持的 release發(fā)布旨别，早日實現(xiàn)Run in any screen!??
參考文獻：https://flutter.dev/desktop#add-desktop-support-to-an-existing-app