Flutter Desktop Mac版小白體驗

吉原拉麵發表於2019-07-03
FlutterMac

  **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 ，新增以下變數：
    Flutter Desktop Mac版小白體驗
    （但是我個人在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，實際執行效果如圖：

desktop_flare.gif

Question 2：如何編寫外掛？

  暫時依然是不支援命令列建立，但是官方說以後會支援命令列（flutter create -t plugin）的，因此如果需要開發外掛，請去github下載殼兒：github.com/google/flut…
  和Flutter外掛一樣，如果需要平臺定製，你需要一定的macos、linux和windows平臺開發知識，一個完整的非純Dart的外掛是需要lib、linus、macos、windows這四個包的：

Flutter Desktop Mac版小白體驗

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命令檢視實際指向，然後使用對應的更新即可。

相關文章