Flutter Desktop Mac版小白体验

This is not an officially supported Google product.

Mac版是官方认为做的最成熟的版本，坑少，配置简单，总的来说体验还是不错的，有插件系统，感觉体验比Web还要好。

准备工作

Step 1

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)

Step 2

打开.bash_profile文件，添加环境变量export ENABLE_FLUTTER_DESKTOP=true，请一定要配置这个，否则你在运行的时候，Flutter SDK只会识别手机设备，不会识别你的系统，会报错no device connected。

如何运行demo

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": {
    "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

desktop_flare.gif

Question 2：如何编写插件？

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'),
          ],
        ),

desktop_file_choose.gif

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

全部栏目