已經三年了
Desktop Embedding for Flutter項目，從提交“Initial commit”（2018年2月15日）到現在，已經三年了。
一年前的官方文檔仍然警告用戶，“不打算用于生產”
終于可以用于生產了
目前該文檔已經改成如下：
有兩個要點：
- 從一個獨立的項目到嵌入到flutter，可以說由干兒子變成了親兒子了
- 去掉了不適用于生產環境的提示:
- The code and examples here, and the desktop Flutter libraries they use, are in early stages, and not intended for production use.
- 這里的代碼和示例，以及它們使用的桌面Flutter庫處于早期階段，不打算用于生產。
目前新的文檔在：Desktop-shells
從文檔的歷史記錄我們可以看到這個發展過程：
2019年12月5日：支持了macos
2020年7月8日：linux平臺就已經進入了alpha階段
2020年9月24日：windows平臺進入alpha階段
截止2020年9月文檔中windows平臺的狀態由“early technical preview”改成了“alpha”，至此三大平臺的狀態都進入了alpha。
用Flutter開發桌面應用，可以說是蓄勢待發了。
2021年2月25日文檔有進行了一次變更但僅僅是文本格式變更，難道是在做發布前的準備？
今天有時間，忍不住體驗了一下macos端app的開發。分享一下過程：
Flutter桌面應用開發初體驗
由于目前處于目前尚處于alpha階段，因此我們必須將Flutter的channel切換到dev才行。
切換channel
輸入“flutter channel dev”結果如下：
$ flutter channel dev
Switching to flutter channel 'dev'...
....
flutter upgrade
git: Switched to a new branch 'dev'
git: Branch 'dev' set up to track remote branch 'dev' from 'origin'.
Successfully switched to flutter channel 'dev'.
To ensure that you're on the latest build from this channel, run 'flutter
upgrade'
更新flutter
上一步的提示，按照提示我們執行“flutter upgrade”進行更新
$ flutter upgrade
Downloading Dart SDK from Flutter engine 6993cb229b99e6771c6c6c2b884ae006d8160a0f...
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 199M 100 199M 0 0 10.5M 0 0:00:18 0:00:18 --:--:-- 10.7M
Building flutter tool...
Flutter is already up to date on channel dev
Flutter 1.27.0-8.0.pre ? channel dev ? https://github.com/flutter/flutter.git
Framework ? revision b7d4806243 (7 days ago) ? 2021-02-19 09:22:45 -0800
Engine ? revision 6993cb229b
Tools ? Dart 2.13.0 (build 2.13.0-30.0.dev)
驗證
看一下我們的桌面設備是否能找到了
$ flutter devices
Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure
you trust this source!
Downloading Material fonts... 457ms
Downloading Gradle Wrapper... 33ms
Downloading package sky_engine... 158ms
Downloading flutter_patched_sdk tools... 1,111ms
Downloading flutter_patched_sdk_product tools... 1,094ms
Downloading darwin-x64 tools... 3.3s
Downloading darwin-x64/font-subset tools... 543ms
2 connected devices:
macOS (desktop) ? macos ? darwin-x64 ? Mac OS X 10.15.7 19H524 darwin-x64
Chrome (web) ? chrome ? web-javascript ? Google Chrome 88.0.4324.192
添加platform
以往我們創建的項目都是不帶macos的平臺的。
我們可以通過下面這條命令，向已有項目添加platform：
“flutter create --platforms=macos .”
執行完這條命令我們可以在項目根目錄下發現一個macos目錄。
接下來就是激動人心的flutter run 時刻了。
然而和以往不同的是，現在需要我們選擇設備了。
即便你沒有連接手機，你也已經有兩個設備了：
macOS (desktop) ? macos ? darwin-x64 ? Mac OS X 10.15.7 19H524 darwin-x64
Chrome (web) ? chrome ? web-javascript ? Google Chrome 88.0.4324.192
這樣我們就需要傳遞設備id了
現在我們通過這條命令就可以啟動我們的macos桌面app了。
運行桌面app
flutter run -d macos
桌面應用的一個特點是鼠標移動到一個控件上的時候，可以給用戶一個提示。
默認的例子中floatingActionButton的tooltip就是用來設置提示文案的。
當我們將鼠標移動到右下角的懸浮按鈕上的時候，就會見到這個提示了。
import 'package:flutter/material.dart';
// ...
class _MyHomePageState extends State<MyHomePage> {
// ...
@override
Widget build(BuildContext context) {
return Scaffold(
// ...
body: Center(
// ...
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
如果我們還想在手機上開發應用需要指定設備
列出設備：
如果我們同時連接了安卓和ios手機結果會是這樣
$ flutter devices
4 connected devices:
Redmi K30 Pro (mobile) ? c7e616ee ? android-arm64 ? Android 10 (API 29)
xxx的iPhone (mobile) ? 1cbcdf88d261301317e2d83b07fcfbb48501e47d ? ios ? iOS 13.6.1
macOS (desktop) ? macos ? darwin-x64 ? Mac OS X 10.15.7 19H524 darwin-x64
Chrome (web) ? chrome ? web-javascript ? Google Chrome 88.0.4324.192
按照設備運行
此時如果我們想用安卓手機調試則需要輸入：
flutter run -d c7e616ee
如果想要用ios手機調試則輸入：
flutter run -d 1cbcdf88d261301317e2d83b07fcfbb48501e47d
折騰完hello word并不過癮，又將以前的項目拿出來實驗。
解決聯網問題
然而意外發生了。
SocketException: Connection failed (OS Error: Operation not permitted, errno = 1)
開始我天真的以為這是蘋果禁用http的后果，
然后添加了NSAllowsArbitraryLoads：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
<!--- ... --->
</dict>
</plist>
上次就是這樣成功的解決了iPhone上無法顯示圖片的問題，
然而這次并不管用。
隨后經過探索發現macos還有其獨特的權限控制。
參考：
https://github.com/flutter/flutter/issues/47606
https://flutter.dev/desktop#entitlements-and-the-app-sandbox
Important: The com.apple.security.network.server entitlement, which allows incoming network connections, is enabled by default only for debug and profile builds to enable communications between Flutter tools and a running app. If you need to allow incoming network requests in your application, you must add the com.apple.security.network.server entitlement to Runner-Release.entitlements as well, otherwise your app will work correctly for debug or profile testing, but will fail with release builds.
說人話就是：
需要在macos/Runner/DebugProfile.entitlements文件中添加com.apple.security.network.client權限。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>com.apple.security.app-sandbox</key>
<true/>
<key>com.apple.security.cs.allow-jit</key>
<true/>
<key>com.apple.security.network.server</key>
<true/>
<key>com.apple.security.network.client</key>
<true/>
</dict>
</plist>
如果你想發布還需要在
macos/Runner/Release.entitlements添加“com.apple.security.network.server”和“com.apple.security.network.client"
再次運行桌面應用：
有點太丑了，隨后適配了一下：
感興趣的同學可以看一下源碼：
https://github.com/ovotop/flutterame
| ?? | ?????? | ?? |
|---|---|---|
| ?? | 眼巴巴盼著你點贊
|
?? |
| ?? | 轉發請保持文章完整 | ?? |
| ?? | 轉發請注明出處：http://www.lxweimin.com/p/ecc8fad9117e | ?? |
| ?? | 本文作者正眼巴巴盼著你點贊 | ?? |
