It's been three years
The Desktop Embedding for Flutter project has been three years since submitting the "Initial commit" (February 15, 2018).
The official document a year ago still warns users, "not intended for production"
Finally ready for production
At present, the document has been changed to the following:
There are two main points:
- From an independent project to being embedded in flutter, it can be said that a godson has become a pro-son
- Removed the tips that are not applicable to the production environment:
- The code and examples here, and the desktop Flutter libraries they use, are in early stages, and not intended for production use.
- 这里的代码和示例，以及它们使用的桌面Flutter库处于早期阶段，不打算用于生产。
The new document is currently in: Desktop-shells
From the history of the document, we can see this development process:
December 5, 2019: Supported macos
July 8, 2020: The linux platform has entered the alpha stage
September 24, 2020: The windows platform enters the alpha stage
As of September 2020, the status of the windows platform in the document has changed from "early technical preview" to "alpha". So far, the status of the three major platforms has entered alpha.
Using Flutter to develop desktop applications can be said to be ready to go.
On February 25, 2021, the document has undergone a change but only the text format is changed. Is it to make preparations before publishing?
I have time today and can't help but experience the development of macos app. Share the process:
Initial experience of Flutter desktop application development
Since it is currently in the alpha stage, we must switch the Flutter channel to dev.
Switch channel
Enter "flutter channel dev" and the result is as follows:
$ 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'
Update flutter
According to the prompt in the previous step, follow the prompts to execute "flutter upgrade" to update
$ 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)
verification
See if our desktop device can be found
$ 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
Add platform
In the past, the projects we created were all platforms without macos.
We can add a platform to an existing project through the following command:
"flutter create --platforms=macos." After
executing this command, we can find a macos directory under the project root directory.
Next is the exciting flutter run moment.
However, what is different from the past is that we now need to choose equipment.
Even if you are not connected to a mobile phone, you already have two 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
So we need to pass the device id.
Now we can start our macos desktop app with this command.
Run the desktop app
flutter run -d macos
A feature of desktop applications is that when the mouse moves over a control, it can give the user a prompt.
In the default example, the tooltip of the floatingActionButton is used to set the prompt copy.
When we move the mouse to the floating button in the lower right corner, we will see this prompt.
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.
);
}
}
If we still want to develop applications on mobile phones, we need to specify the device
List devices:
If we connect the Android and ios phones at the same time, the result will be like this
$ 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
Run according to equipment
At this point, if we want to debug with an Android phone, we need to enter:
flutter run -d c7e616ee
If you want to use ios phone to debug, enter:
flutter run -d 1cbcdf88d261301317e2d83b07fcfbb48501e47d
After tossing hello word is not enough, and I took out the previous project to experiment.
Solve networking issues
However, an accident happened.
SocketException: Connection failed (OS Error: Operation not permitted, errno = 1)
At first I naively thought this was a consequence of Apple's disabling http,
and then added 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>
This was the last time I successfully solved the problem of not being able to display pictures on the iPhone,
but this time it didn’t work.
Afterwards, after exploration, it was discovered that macos has its unique permission control.
Reference:
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.
Talking about people is:
Need to add com.apple.security.network.client permission in the macos/Runner/DebugProfile.entitlements file.
<?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>
If you want to publish, you need to
add "com.apple.security.network.server" and "com.apple.security.network.client" in macos/Runner/Release.entitlements
Run the desktop application again:
It was a bit too ugly, and then adapted it:
Interested students can look at the source code:
https://github.com/ovotop/flutterame
| ⭐️ | ⭐️⭐️⭐️ | ⭐️ |
|---|---|---|
| ⭐️ | Forward please keep the article intact | ⭐️ |
| ⭐️ | Please indicate the source for forwarding: https://blog.csdn.net/windcao/article/details/112341856 | ⭐️ |
| ⭐️ | The author of this article is looking forward to your likes | ⭐️ |