已經(jīng)三年了
Desktop Embedding for Flutter項(xiàng)目，從提交“Initial commit”（2018年2月15日）到現(xiàn)在渊啰，已經(jīng)三年了探橱。
一年前的官方文檔仍然警告用戶，“不打算用于生產(chǎn)”
終于可以用于生產(chǎn)了
目前該文檔已經(jīng)改成如下：
有兩個(gè)要點(diǎn)：
- 從一個(gè)獨(dú)立的項(xiàng)目到嵌入到flutter绘证，可以說(shuō)由干兒子變成了親兒子了
- 去掉了不適用于生產(chǎn)環(huán)境的提示:
- The code and examples here, and the desktop Flutter libraries they use, are in early stages, and not intended for production use.
- 這里的代碼和示例，以及它們使用的桌面Flutter庫(kù)處于早期階段哗讥，不打算用于生產(chǎn)嚷那。
目前新的文檔在：Desktop-shells
從文檔的歷史記錄我們可以看到這個(gè)發(fā)展過(guò)程：
2019年12月5日：支持了macos
2020年7月8日：linux平臺(tái)就已經(jīng)進(jìn)入了alpha階段
2020年9月24日：windows平臺(tái)進(jìn)入alpha階段
截止2020年9月文檔中windows平臺(tái)的狀態(tài)由“early technical preview”改成了“alpha”，至此三大平臺(tái)的狀態(tài)都進(jìn)入了alpha杆煞。
用Flutter開發(fā)桌面應(yīng)用魏宽，可以說(shuō)是蓄勢(shì)待發(fā)了。
2021年2月25日文檔有進(jìn)行了一次變更但僅僅是文本格式變更决乎，難道是在做發(fā)布前的準(zhǔn)備队询？
今天有時(shí)間，忍不住體驗(yàn)了一下macos端app的開發(fā)构诚。分享一下過(guò)程：
Flutter桌面應(yīng)用開發(fā)初體驗(yàn)
由于目前處于目前尚處于alpha階段蚌斩，因此我們必須將Flutter的channel切換到dev才行。
切換channel
輸入“flutter channel dev”結(jié)果如下：
$ 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
上一步的提示范嘱，按照提示我們執(zhí)行“flutter upgrade”進(jìn)行更新
$ 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)
驗(yàn)證
看一下我們的桌面設(shè)備是否能找到了
$ 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
以往我們創(chuàng)建的項(xiàng)目都是不帶macos的平臺(tái)的送膳。
我們可以通過(guò)下面這條命令，向已有項(xiàng)目添加platform：
“flutter create --platforms=macos .”
執(zhí)行完這條命令我們可以在項(xiàng)目根目錄下發(fā)現(xiàn)一個(gè)macos目錄丑蛤。
接下來(lái)就是激動(dòng)人心的flutter run 時(shí)刻了叠聋。
然而和以往不同的是，現(xiàn)在需要我們選擇設(shè)備了受裹。
即便你沒(méi)有連接手機(jī)碌补，你也已經(jīng)有兩個(gè)設(shè)備了：
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
這樣我們就需要傳遞設(shè)備id了
現(xiàn)在我們通過(guò)這條命令就可以啟動(dòng)我們的macos桌面app了。
運(yùn)行桌面app
flutter run -d macos
桌面應(yīng)用的一個(gè)特點(diǎn)是鼠標(biāo)移動(dòng)到一個(gè)控件上的時(shí)候棉饶，可以給用戶一個(gè)提示厦章。
默認(rèn)的例子中floatingActionButton的tooltip就是用來(lái)設(shè)置提示文案的。
當(dāng)我們將鼠標(biāo)移動(dòng)到右下角的懸浮按鈕上的時(shí)候砰盐，就會(huì)見到這個(gè)提示了闷袒。
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.
);
}
}
如果我們還想在手機(jī)上開發(fā)應(yīng)用需要指定設(shè)備
列出設(shè)備：
如果我們同時(shí)連接了安卓和ios手機(jī)結(jié)果會(huì)是這樣
$ 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
按照設(shè)備運(yùn)行
此時(shí)如果我們想用安卓手機(jī)調(diào)試則需要輸入：
flutter run -d c7e616ee
如果想要用ios手機(jī)調(diào)試則輸入：
flutter run -d 1cbcdf88d261301317e2d83b07fcfbb48501e47d
折騰完hello word并不過(guò)癮，又將以前的項(xiàng)目拿出來(lái)實(shí)驗(yàn)岩梳。
解決聯(lián)網(wǎng)問(wèn)題
然而意外發(fā)生了囊骤。
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上無(wú)法顯示圖片的問(wèn)題，
然而這次并不管用也物。
隨后經(jīng)過(guò)探索發(fā)現(xiàn)macos還有其獨(dú)特的權(quán)限控制宫屠。
參考：
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.
說(shuō)人話就是：
需要在macos/Runner/DebugProfile.entitlements文件中添加com.apple.security.network.client權(quán)限。
<?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>
如果你想發(fā)布還需要在
macos/Runner/Release.entitlements添加“com.apple.security.network.server”和“com.apple.security.network.client"
再次運(yùn)行桌面應(yīng)用：
有點(diǎn)太丑了滑蚯，隨后適配了一下：
感興趣的同學(xué)可以看一下源碼：
https://github.com/ovotop/flutterame
| ?? | ?????? | ?? |
|---|---|---|
| ?? | 眼巴巴盼著你點(diǎn)贊
|
?? |
| ?? | 轉(zhuǎn)發(fā)請(qǐng)保持文章完整 | ?? |
| ?? | 轉(zhuǎn)發(fā)請(qǐng)注明出處：http://www.reibang.com/p/ecc8fad9117e | ?? |
| ?? | 本文作者正眼巴巴盼著你點(diǎn)贊 | ?? |
