Flutter开发-为项目添加Desktop桌面平台支持

前言

我们都知道Flutter 的目标是:Run in any screen!就目前已经在iOS,AndroidWeb端都做到了很好的支持。而目前对桌面端的支持,还没有正式发布。从目前的官网文档上看,Flutter已经支持了macOS,LinuxWindows平台,但目前的这部分功能还是在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>macoslinux,这里我们是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

**创建项目并运行

flutter create myapp

此时我们会发现工程目录中多了一个macos文件夹

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

MacOS上运行项目

flutter run -d macos

这里同样可以通过IDE的方式运行,这里就不做举例了。
运行结果:


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

此时此刻,熟悉的页面就展示在了面前!

在已有的项目中添加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

同样运行项目:


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

再次,熟悉的界面又呈现在了眼前。

关于443错误信息

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

关于这个错误,请移步苹果开发者中心 App SandboxEntitlements查阅,类似于iOS的一些权限白名单,需要进行配置。

总结

非常期待Flutter 对桌面支持的 release发布,早日实现Run in any screen!😺
参考文献:https://flutter.dev/desktop#add-desktop-support-to-an-existing-app

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350