Flutter Desktop Mac版小白体验

  相关文章：GO Flutter Desktop Mac版小白体验

  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：github.com/google/flut… ），怎么切换分支请自行百度：

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中添加了上述环境变量后，并无卵用。。。。）
  （更正：重启了Mac以后该配置忽然生效了，感受是AS本身的问题。。。。）

关于插件

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，实际运行效果如图：

Question 2：如何编写插件？

  暂时依然是不支持命令行建立，可是官方说之后会支持命令行（flutter create -t plugin）的，所以若是须要开发插件，请去github下载壳儿：github.com/google/flut…
  和Flutter插件同样，若是须要平台定制，你须要必定的macos、linux和windows平台开发知识，一个完整的非纯Dart的插件是须要lib、linus、macos、windows这四个包的：

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'),
          ],
        ),
复制代码

  注意Mac使用平台插件须要pod版本1.6.1+，若是报错请更新cocospod。若是同时用gem和homebrew装过cocospod，可能会致使pod指向混乱，请用which pod命令查看实际指向，而后使用对应的更新便可。