It’s been three years
It has been three years since the Desktop Embedding for Flutter project submitted its “Initial commit” (February 15, 2018).
Official documents from a year ago still warn users, “Not intended for production”
Finally ready for production
At present, the document has been changed as follows:
There are two main points:
- From an independent project to being embedded into Flutter, it can be said that the adopted son has become the real son
- Removed the warning not suitable for production environment:
- The code and examples here, and the desktop Flutter libraries they use, are in early stages, And not intended for production use. - The code and examples here, along with the desktop Flutter library they use, are at an early stage and not intended for production use.Copy the codeThe new documents are at:Desktop-shells
From the documentation history, we can see the development process:
December 5, 2019: Support for MacOS
July 8, 2020: The Linux platform has entered its alpha phase
September 24, 2020: The Windows platform enters alpha
By September 2020, the status of Windows platform in the document was changed from “Early Technical Preview” to “alpha”, so far the status of the three platforms has entered alpha.
Developing desktop applications with Flutter is poised to take off. On February 25, 2021, the document was changed once, but only the text format was changed. Is it in preparation for release?
Today I have time, I can’t help but experience the development of macOS terminal app. Share the process:
Initial experience of Flutter desktop application development
Since Flutter is currently in alpha, we must switch the channel of Flutter to dev.
Switch the 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'Copy the codeUpdate the flutter
Execute “flutter upgrade” as prompted to update the flutter
$ 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 10.5 M 0 0 0:00:18 0:00:18 - : -- : -- 10.7 M Building flutter tool... Flutter is already up to date on channel dev Flutter 1.27.0-8.0 https://github.com/flutter/flutter.git Framework, revision b7d4806243 7 days (a line), the 2021-02-19 09:22:45-0800 Engine, Tools • Dart 2.13.0 (build 2.13.0-30.0. Dev)Copy the codeconfiguration
flutter config --enable-macos-desktop
Copy the codeReference: flutter. Dev /desktop
flutter config --enable-windows-desktop
flutter config --enable-macos-desktop
flutter config --enable-linux-desktop
Copy the codevalidation
Let’s see if we can find our desktop device
$ 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... 1111 ms Downloading flutter_patched_sdk_product tools... 1094 ms Downloading Darwin - x64 tools... 3.3 s 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.192Copy the codeAdd the platform
In the past, we’ve created projects without MacOS.
We can add platforms to existing projects with the following command: “flutter create –platforms=macos.” After executing this command we can find a macOS directory under the project root directory.
Now comes the exciting flutter Run moment. What’s new, however, is that we now have to choose the device. Even if you’re not connected to your 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.192Copy the codeSo we need to pass in the device ID and now we can launch our MacOS desktop app with this command.
Running a desktop App
flutter run -d macos
Copy the code
A feature of desktop applications is the ability to give the user a hint when the mouse moves over a control.
The default example of floatingActionButton’s Tooltip is used to set the prompt text.
We see this when we hover over the hover button in the lower right corner.
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.); }}Copy the codeIf we want to develop apps on mobile, we need to specify devices
List equipment:
This is what happens if we connect android and ios phones at the same time
$ flutter devices 4 connected devices: Redmi K30 Pro (Mobile) • C7E616EE • Android-ARM64 • Android 10 (API 29) XXX iPhone (Mobile) • 1 cbcdf88d261301317e2d83b07fcfbb48501e47d, 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.192Copy the codeRun by device
At this point, if we want to debug with an Android phone, we need to enter:
flutter run -d c7e616ee
Copy the codeIf you want to debug on an ios phone, type:
flutter run -d 1cbcdf88d261301317e2d83b07fcfbb48501e47d
Copy the codeIt was not enough to finish the “Hello Word”, so I tried my previous project.
Solving networking problems
Then something unexpected happened.
SocketException: Connection failed (OS Error: Operation not permitted, errno = 1)
Copy the codeAt first I naively thought this was a consequence of Apple disabling HTTP and then added NSAllowsArbitraryLoads:
<! DOCTYPEplist PUBLIC "- / / / / DTD PLIST Apple 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>
Copy the codeThat worked last time, but it didn’t work this time.
Subsequent exploration revealed that MacOS also has its own unique permission control. Reference: github.com/flutter/flu… Flutter. Dev/desktop# ent…
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.
Copy the codeSpeaking English is:
Need the macos/Runner/DebugProfile entitlements file to add the com.apple.security.net work. The client access.
<! DOCTYPEplist PUBLIC "- / / / / DTD PLIST Apple 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>
Copy the codeIf you want to publish need in macos/Runner/the entitlements to add “com.apple.security.net work. Server” and “com.apple.security.net work. The client”
Run the desktop application again:
A little too ugly, then adapted:
Interested students can take a look at the source: github.com/ovotop/flut…
| ⭐ ️ | ⭐ ️ ⭐ ️ ⭐ ️ | ⭐ ️ |
|---|---|---|
| ⭐ ️ |  |
⭐ ️ |
| ⭐ ️ | Please keep the article complete | ⭐ ️ |
| ⭐ ️ | Please quote the source for forwarding:Juejin. Cn/post / 684490… | ⭐ ️ |
| ⭐ ️ | The author of this article is looking forward to your likes | ⭐ ️ |