Flutter Desktop Mac版小白體驗

時間 2019-11-05

原文原文鏈接

flutter-desktop-embedding 這個項目其實已經存在好久了，以前看文檔什麼都沒有，小白表示徹底不會編譯，最近發現官方終於更新readme了！！雖然文檔依然簡陋，可是已經很友好了，配置對了，一句flutter run項目就跑起來了。
固然，這並非一個Google官方認可的項目，尚未正式歸入官方flutter，因此只能體驗體驗。並且暫時沒有看到文檔說明怎麼打包，不知道有沒有大佬能研究下。git

This is not an officially supported Google product.github

Mac版是官方認爲作的最成熟的版本，坑少，配置簡單，總的來講體驗仍是不錯的，有插件系統，感受體驗比Web還要好。macos

準備工做

Step 1

首先請確保你的Flutter SDK是跑在master分支上的。我偷懶用了dev分支，果真報錯了，哈哈哈哈。因此master外的其餘分支是會報錯的（報錯很長，就不貼全了，具體能夠看這個issue：github.com/google/flut… ），怎麼切換分支請自行百度：json

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項目時，將分支切來切去的困擾。windows

Step 2

打開.bash_profile文件，添加環境變量export ENABLE_FLUTTER_DESKTOP=true，請必定要配置這個，不然你在運行的時候，Flutter SDK只會識別手機設備，不會識別你的系統，會報錯no device connected。bash

如何運行demo

首先要注意，暫時沒有命令行能夠新建項目，須要去Github下載官方demo flutter-desktop-embedding當殼。
clone完畢後，控制檯進入example目錄，運行flutter run命令，看到如下文字就表示運行成功了：app

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

使用什麼IDE開發

開發其實和寫Flutetr同樣，你能夠用VS Code、IntelliJ、Android Studio，若是須要從IDE中啓動項目，須要作額外的配置：post

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'),
          ],
        ),
複製代碼