flutter-desktop-embedding这个项目其实已经存在很久了,之前看文档什么都没有,小白表示完全不会编译,最近发现官方终于更新readme了!!虽然文档依然简陋,但是已经很友好了,配置对了,一句flutter run
项目就跑起来了。
当然,这并不是一个Google官方承认的项目,还没有正式纳入官方flutter,所以只能体验体验。而且暂时没有看到文档说明怎么打包,不知道有没有大佬能研究下。
This is not an officially supported Google product.
Mac版是官方认为做的最成熟的版本,坑少,配置简单,总的来说体验还是不错的,有插件系统,感觉体验比Web还要好。
准备工作
Step 1
首先请确保你的Flutter SDK是跑在master分支上的。我偷懒用了dev分支,果然报错了,哈哈哈哈。所以master外的其他分支是会报错的(报错很长,就不贴全了,具体可以看这个issue:https://github.com/google/flutter-desktop-embedding/issues/430
),怎么切换分支请自行百度:
Build process failed
#0 throwToolExit (package:flutter_tools/src/base/common.dart:24:3)
#1 buildMacOS (package:flutter_tools/src/macos/build_macos.dart:67:5)
#2 MacOSDevice.startApp (package:flutter_tools/src/macos/macos_device.dart:78:1
#3 FlutterDevice.runHot (package:flutter_tools/src/resident_runner.dart:370:54)
#4 HotRunner.run (package:flutter_tools/src/run_hot.dart:253:39)
#5 RunCommand.runCommand (package:flutter_tools/src/commands/run.dart:430:37)
如果你嫌切分支麻烦,可以参考低调大佬的这篇文章Flutter Desktop Mac版(一) 初探,为desktop单独配置一份master分支的SDK,可以避免在开发Flutter项目和desktop项目时,将分支切来切去的困扰。
Step 2
打开.bash_profile
文件,添加环境变量export ENABLE_FLUTTER_DESKTOP=true
,请一定要配置这个,否则你在运行的时候,Flutter SDK只会识别手机设备,不会识别你的系统,会报错no device connected
。
如何运行demo
首先要注意,暂时没有命令行可以新建项目,需要去Github下载官方demo flutter-desktop-embedding当壳。
clone完毕后,控制台进入example
目录,运行flutter run
命令,看到以下文字就表示运行成功了:
yumideMacBook-Pro:example yumi$ flutter run
Launching lib/main.dart on macOS in debug mode...
Building macOS application...
flutter: NAME Favorite
flutter: NAME Unfavorite
Syncing files to device macOS...
2,034ms (!)
🔥 To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on macOS is available at: http://127.0.0.1:61427/_u3S3YtMF1c=/
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".
支持hot reload,但是要注意暂时desktop项目只能运行在debug模式,即使你在命令行加了--release
并且运行成功了,你还是在debug模式。
使用什么IDE开发
开发其实和写Flutetr一样,你可以用VS Code、IntelliJ、Android Studio,如果需要从IDE中启动项目,需要做额外的配置:
- VS Code请在
settings.json
中添加dart.env
配置:
"dart.env": {
"ENABLE_FLUTTER_DESKTOP": true,
}
-
IntelliJ/Android Studio请进入设置页面:Preferences | Appearance & Behavior | Path Variables ,添加以下变量:
(但是我个人在Android Studio中添加了上述环境变量后,并没有卵用。。。。)
关于插件
Question 1:是否可以使用pub上的库?
纯Dart的库是可以使用的,比如Flare
动画库,使用姿势依然是在pubspec.yaml
中添加依赖就行:
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.0
flare_flutter: ^1.5.2
flare_dart: ^1.4.2
测试的时候我试着用了flare的这个example:favorite,实际运行效果如图:
![](https://img.haomeiwen.com/i4044518/d5ae825983aa5ea2.gif)
Question 2:如何编写插件?
暂时依然是不支持命令行创建,但是官方说以后会支持命令行(flutter create -t plugin
)的,因此如果需要开发插件,请去github下载壳儿:https://github.com/google/flutter-desktop-embedding/blob/master/plugins/example_plugin
和Flutter插件一样,如果需要平台定制,你需要一定的macos、linux和windows平台开发知识,一个完整的非纯Dart的插件是需要lib、linus、macos、windows这四个包的:
![](https://img.haomeiwen.com/i4044518/1e41e5ac7b5bfbff.png)
Question 3:如何使用插件
- 纯Dart包可以使用pub依赖;
- 平台插件暂时需要使用path加载本地依赖,以官方的
file_chooser
插件为例:
file_chooser:
path: ../plugins/file_chooser
我们可以写一个简单的例子看下这个插件的使用:
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
onPressed: () {
showOpenPanel((results, path) {
setState(() {
paths = path;
});
print('results: $results, path = $path');
});
},
child: Text('点我选择文件'),
),
Text('文件路径:$paths'),
],
),
![](https://img.haomeiwen.com/i4044518/90b24769ee02dc39.gif)
注意Mac使用平台插件需要pod版本1.6.1+,如果报错请更新cocospod。如果同时用gem和homebrew装过cocospod,可能会导致pod指向混乱,请用which pod命令查看实际指向,然后使用对应的更新即可。
网友评论