前言
我们都知道Flutter 的目标是:Run in any screen!就目前已经在iOS
,Android
和Web
端都做到了很好的支持。而目前对桌面端的支持,还没有正式发布。从目前的官网文档上看,Flutter已经支持了macOS
,Linux
和Windows
平台,但目前的这部分功能还是在dev
分支上,处于alpha
阶段,依然没有正式发布。本篇文章我们就使用Fultter-dev
分支SDK尝试创建桌面端项目。
官方描述:
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.
本篇文章,我们就根据官方文档的向导,完成MacOS平台支持。
环境配置
创建一个新的Fultter项目
打开终端,执行如下命令
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)
:
**创建项目并运行
flutter create myapp
此时我们会发现工程目录中多了一个macos
文件夹
在
MacOS
上运行项目
flutter run -d macos
这里同样可以通过IDE的方式运行,这里就不做举例了。
运行结果:
此时此刻,熟悉的页面就展示在了面前!
在已有的项目中添加MacOS支持
通过终端进入到项目的根目录,然后执行以下操作
flutter create .
之后会出现如下输出:
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
同样运行项目:
再次,熟悉的界面又呈现在了眼前。
关于443错误信息
flutter: Another exception was thrown: SocketException: Connection failed (OS Error: Operation not permitted, errno = 1), address = randomuser.me, port = 443
关于这个错误,请移步苹果开发者中心 App Sandbox和Entitlements查阅,类似于iOS的一些权限白名单,需要进行配置。
总结
非常期待Flutter 对桌面支持的 release发布,早日实现Run in any screen!😺
参考文献:https://flutter.dev/desktop#add-desktop-support-to-an-existing-app