作者 / Chris Sells, Product Manager, Flutter developer experience
Our mission is to provide developers with an open source and efficient framework to help them build beautiful native applications on any platform. So far, we have brought production-level support for Android and iOS, released 8 stable versions, and more than 100,000 apps use Flutter in the Google Play store alone . We are continuing to work hard to extend support to other platforms such as web, macOS, and Linux. Now, another goal of Flutter, that is, the Alpha version of Flutter that supports Windows has been released.
Windows is still a popular choice for desktop and laptop devices. According to a Microsoft report, Windows 10 has more than 1 billion active devices. Our statistics show that more than half of Flutter developers use Windows, and naturally Flutter should support this system. Native desktop support provides various possibilities for Flutter, which is really exciting, including the improvement of development tools and the reduction of the burden on new users. Of course, it can also allow developers to use a single code base for any device the user may have Build applications.
Windows 10: Powering 1 billion monthly active devices worldwide
https://blogs.windows.com/windowsexperience/2020/03/16/windows-10-powering-the-world-with-1-billion-monthly-active-devices/
Add Windows support to Flutter
As we said in the architecture overview, Flutter is a cross-platform interface toolkit designed to achieve code reuse between different operating systems (such as iOS and Android), while allowing applications to directly interface with the underlying platform services. Our goal is to allow developers to deliver high-performance applications that can run naturally and smoothly on different platforms, while sharing code as much as possible, while tolerating the differences between different platforms. The core of Flutter is the engine, which supports the necessary primitives and provides support for all Flutter applications. Whenever a new frame needs to be drawn, the engine is responsible for rasterizing the composite scene. The engine provides the underlying implementation of Flutter's core API, including graphics, text layout, file and network I/O, accessibility support, plug-in architecture, and Dart runtime and compilation tool chain.
Architecture overview
https://flutter.cn/docs/resources/architectural-overview
Whenever we add a new target platform to Flutter, we will extend the core framework with new services to enable it to run well on that platform. We first implemented Material Design on Android and iOS, as well as a touch interface for mobile devices, in order to achieve a pixel-level perfect experience on these two mobile platforms. In desktop environments such as web, Windows, macOS and Linux, Flutter also provides a whole new set of services, including strong support for keyboard, mouse, scroll wheel and controller input methods, as well as widgets that can adapt to these platforms (some widgets even work better on large screens in web and desktop applications).
In addition, each new platform will not only affect Flutter's framework and engine, but also many other aspects:
Toolchain update : add new target platforms for CLI and IDE tools (such as Windows in this article)
Shell : Supports input from Windows through WM_* message processing, and output through ANGLE, ANGLE uses Skia to render to the underlying DirectX interface at native speed
Runner : Each project will run on the target platform through a container application. For Windows, the container application is a Win32/C++ program that can load your Flutter code and execute it at runtime. If you need, you can add native code for your application here.
Plug-ins : Plug-ins are a collection of Dart code and native code for each platform it supports. Native code needs to be added to each plug-in, and these plug-ins will be compiled into your Windows version of Flutter application.
ANGLE
https://opensource.google/projects/angle
Skia
https://skia.org/
The alpha version released this time has laid a solid foundation for our work in the coming months. With support for Windows 7 and later, we hope it can provide a starting point for developers who like early adopters.
Sample application introduction
To actually understand Flutter's support for Windows, you can check out some of the sample applications we have created. These applications run well on Windows with our new support. The first example is the Flokk application, which is the result of our collaboration with the designers and developers of gskinner.com. We aim to show that Flutter is ready for the desktop by creating a creative and beautiful Flutter desktop application. Flokk is an app that can use your real Google Contacts data and display the activities of your contacts on GitHub and Twitter.
If you want to use the Flokk app on your Windows device, you can download the latest version on GitHub. If you want to know how gskinner developed this app, you can check out their blog post: Flokk-How we use Flutter to build desktop apps.
Download Flokk
https://github.com/gskinnerTeam/Flokk/releases
Flokk-How we use Flutter to build desktop apps
https://blog.gskinner.com/archives/2020/09/flokk---how-we-built-a-desktop-app-using-flutter.html
In addition, our sample app Flutter Gallery can show you all aspects of Flutter. This app has recently been completely rewritten to add support for desktop devices. Therefore, we can ensure that it runs well on the web, Windows, macOS and Linux.
Flutter Gallery (web 版)
https://gallery.flutter.cn/
Many cases in the Flutter Gallery represent application styles with different concepts. We recommend that you refer to them when designing your own Windows applications using Flutter. If you are interested, you can find the source code on GitHub.
Source code address
https://github.com/flutter/gallery
Start using Flutter for Windows
Please follow the Windows installation instructions to start installing the Flutter SDK. To target Windows desktop devices, you first need to install the tools described in the desktop documentation. By default, Flutter assumes that you are building the official version of the software and have not configured it for developing Windows applications. However, this is easily solved via the command line:
$ flutter channel dev
$ flutter upgrade
$ flutter config --enable-windows-desktop
Install and configure Flutter development environment on Windows system
https://flutter.cn/docs/get-started/install/windows
Tools described in the desktop documentation
https://flutter.cn/desktop#additional-windows-requirements
The first command sets Flutter to use the experimental "dev" channel (instead of the default "stable" channel). This way you can use platform support that is still in the alpha stage, such as Windows. The second command can get the latest version on the channel. The third command allows you to develop Windows applications on your PC.
After completing these settings, every time you create a new Flutter app through the Android Studio or Visual Studio Code extension, or through the command line, a Windows subfolder will be created.
Android Studio
https://flutter.cn/docs/get-started/editor?tab=androidstudio
Visual Studio Code
https://flutter.cn/docs/get-started/editor?tab=vscode
If you are curious, please run the default application on Windows as follows:
After you create the application, building the application will generate a native EXE file in release mode and the necessary supporting DLL. If you want to run this new Windows application on any Windows 10 device that does not have Flutter installed, you can compress and package the necessary files according to the instructions here.
Distribute applications in the desktop environment
https://flutter.cn/desktop#distribution
Windows plugin
Although the current Windows support is still an alpha version, Flutter community members are already developing Windows plug-ins. include:
url_launcher: Launch the browser from your app and open the given URL
https://pub.flutter-io.cn/packages/url_launcher
path_provider: Provide the path of special directories on the user's device, such as Documents and temp
https://pub.flutter-io.cn/packages/path_provider
shared_preferences: serialize user preferences to disk for sharing between your application sessions
https://pub.flutter-io.cn/packages/shared_preferences
biometric_storage: storage encrypted by biometrics
https://pub.flutter-io.cn/packages/biometric_storage
flutter_audio_desktop: Play audio in the desktop application
https://pub.flutter-io.cn/packages/flutter_audio_desktop
The advantage of using these plugins is that most of them also support other Flutter platforms, so you can adapt your apps to Android, iOS, web, Windows and other platforms. In addition, although on pub.dev (Dart and Flutter's package management platform), about one-third of packages are plug-ins that contain platform-specific code, but most plug-ins are not. For example, many of the highest quality and most commonly used packages are on the Flutter Favorite plan list, and most of them can run on Windows. If you want to see the complete list of packages that can run on Windows, you can query on pub.dev.
Flutter Favorite
https://pub.flutter-io.cn/flutter/favorites
Package for Windows platform
https://pub.flutter-io.cn/flutter/packages?platform=windows
Interoperability with Windows
You can also build your own Windows plug-ins. When you are in the dev channel and have enabled Windows development for the device, you can use the following command:
$ flutter create --template plugin --platforms windows hello_plugin
At this point, you can add your Flutter code to the lib subfolder, and add the Windows code to the Windows subfolder of the plug-in project. You will use Platform Channels to communicate between the two stacks, which is essentially messaging between Dart and C++ code. For the best example on this topic, see the implementation of url_launcher.
Write dual-terminal platform code (plug-in writing implementation)
https://flutter.cn/docs/development/platform-integration/platform-channels
Implementation of url_launcher
https://github.com/flutter/plugins/tree/master/packages/url_launcher/url_launcher_windows
However, the platform channel is not your only option for interoperability with Windows. You can also use Dart FFI (foreign function interface) to load libraries and call C-style APIs, such as Win32 APIs. As you can see in the GitHub repo, the path_provider plugin is implemented using FFI, which is different from the url_launcher that uses the platform channel. FFI does not need to switch back and forth between Dart and C++, but allows you to write code to directly import the API you want. For example, here is the code to call the MessageBox API:
typedef MessageBoxNative = Int32 Function(
IntPtr hWnd,
Pointer<Utf16> lpText,
Pointer<Utf16> lpCaption,
Int32 uType
);
typedef MessageBoxDart = int Function(
int hWnd,
Pointer<Utf16> lpText,
Pointer<Utf16> lpCaption,
int uType
);
final user32 = DynamicLibrary.open('user32.dll');
final win32MessageBox = user32.lookupFunction<MessageBoxNative, MessageBoxDart>('MessageBoxW');
void showMessageBox(String message, String caption) => win32MessageBox(
0, // No owner window
Utf16.toUtf16(message), // Message
Utf16.toUtf16(caption), // Window title
0 // OK button only
);
...
// call just like any other Dart function
showMessageBox('Test Message', 'Window Caption');
Use dart:ffi to call native code
https://flutter.cn/docs/development/platform-integration/c-interop
path_provider (Windows 版)
https://github.com/flutter/plugins/tree/master/packages/path_provider/path_provider_windows
This code does not have the problem of switching between two threads like platform channels. FFI includes support for many different kinds of APIs, including Win32, WinRT, and COM. But don't rush to encapsulate the entire C-based Windows API by yourself. Please take a look at the win32 plug-in. It is already doing this, and it does it well. In fact, the path_provider plug-in itself is implemented using win32 plug-ins. For the development process and working principle of the win32 plug-in, please read "Use Dart FFI to Enhance the Fun of Windows Development".
Win32 plugin
https://pub.flutter-io.cn/packages/win32
path_provider
https://pub.flutter-io.cn/packages/path_provider
Use Dart FFI to enhance the fun of Windows development
https://medium.com/@timsneath/windows-fun-with-dart-ffi-687c4619e78d
Flutter for Windows resources
No matter where you are in the Flutter for Windows journey, you should read the desktop development documentation on flutter.dev, which includes the latest details. In addition, you can also use codelab to familiarize yourself with writing desktop Flutter applications for Windows, macOS, and Windows, including code for real scenarios such as using OAuth for authentication, accessing GitHub API, and using GraphQL. Or check out Photo Search, another Flutter desktop code sample that runs on Windows.
Flutter desktop support
http://flutter.cn/desktop
Codelab
https://codelabs.developers.google.com/codelabs/flutter-github-graphql-client
Photo Search
https://github.com/flutter/samples/tree/master/experimental/desktop_photo_search
Photo Search uses standard Windows file opening dialogs, tree view widgets, split view widgets, and uses real REST APIs to present search results.
As for other desktop-oriented widgets, we recommend the menubar (menubar) plug-in, NavigationRail widget and DataTable widget. You may also be interested in the InteractiveViewer widget, which provides complete desktop support and allows you to pan and zoom its child widgets through mouse actions.
Menubar
https://github.com/google/flutter-desktop-embedding/tree/master/plugins/menubar
NavigationRail
https://api.flutter.cn/flutter/material/NavigationRail-class.html
DataTable
https://api.flutter.cn/flutter/material/DataTable-class.html
InteractiveViewer
https://api.flutter.cn/flutter/widgets/InteractiveViewer-class.html
Another group of very useful widgets comes from SyncFusion. They are well known in the Windows development community and provide a large number of enterprise-quality widgets for creating charts, metering slots, and data grids.
SyncFusion widgets
https://pub.flutter-io.cn/publishers/syncfusion.com/packages
These widgets are licensed for community and enterprise use, so you can rest assured to find the right tool for your project.
Flutter for Windows application case
In addition to Windows (and Flutter desktop support in a broad sense) packages and plug-ins, Flutter developers have also been building excellent applications for Windows, such as this experimental work by Invoice Ninja:
Invoice Ninja
https://www.invoiceninja.com/
Invoice Ninja is a company that provides receipt software, and Flutter has brought a solid boost to its profitability. Their software currently supports Android and iOS systems, and provides product demonstrations on the web, and provides users with a desktop version is already within the company's plan.
Product Demo
https://demo.invoiceninja.com/
Invoice Ninja has been exhausted in the past, but can only provide support for the web and mobile terminals, and once maintained three independent code bases. With Flutter and most recently Flutter Desktop, we have been able to use a single code base to build applications for every major platform. We obtained the desktop version of the application at almost zero cost, and its performance is the best of all versions!
— Hillel Coren, Co-founder of Invoice Ninja
If you want to build a real and profitable Flutter application on mobile and desktop devices, you can visit GitHub to get its source code for reference.
GitHub: Invoice Ninja
https://github.com/invoiceninja/flutter-client
Aartos has many good works, and the real-time drone detection system is one of them. They use Flutter to build the client software of the system on multiple platforms. This video is an early version of the Windows client, running simultaneously with its mobile client.
Aartos
https://drone-detection-system.com/
UAV detection system client software
https://drone-detection-system.com/aartos-dds/product-overview/
Windows demo video
https://www.bilibili.com/video/BV1p54y1R79t/
Both iOS and Windows versions share the same code base.
If you are an experienced Flutter developer, you may find that you need to switch back and forth between different versions of Flutter: For example, one version is used to release the official version of the mobile app, and the other version is used to experiment with Windows alpha, then You might like Flutter Version Manager (Version Manager), it now comes with a Windows graphical user interface, you can download it here.
Flutter Version Manager
https://github.com/leoafarias/fvm/releases
Demo video
https://www.bilibili.com/video/BV1LK411A7MX/
This tool is open source, and you can see for yourself how Leo makes it look so great.
FVM
https://github.com/leoafarias/fvm
Future plan
After the alpha version is released, our attention will shift to improving the feature set and stable products. As an open source project, you can track the progress of the beta version on GitHub, and there is still some work to be done, including accessibility features, globalization and localization, enhanced keyboard and text processing, support for command line parameters, etc.
Flutter for Windows Beta
https://github.com/flutter/flutter/projects/55
In addition to supporting the classic Win32 API, we are also experimenting with UWP-based Flutter container applications. This version allows Flutter to log in to more Windows devices, including Xbox. As part of this experiment, this week we released a UWP-based Flutter Gallery on the Windows Store.
UWP
https://docs.microsoft.com/en-us/windows/uwp/get-started/universal-application-platform-guide
Windows Store: Flutter Gallery
https://www.microsoft.com/en-us/p/flutter-gallery/9pdwctdfc7qq
The following screenshot shows the UWP-based Flutter Gallery running on Xbox:
The picture below is the same application running on a dual-screen Windows device (on the Windows 10X emulator):
Windows 10X emulator
https://docs.microsoft.com/en-us/dual-screen/windows/get-dev-tools
You can learn more about the progress of Flutter for UWP on GitHub.
Add UWP support
https://github.com/flutter/flutter/issues/14967#issuecomment-697108439
to sum up
This alpha version brings the powerful features of Flutter to Windows, and provides developers with a declarative, composable and responsive architecture. This version's adaptive implementation of the Material specification allows you to design applications according to your own needs and use a full set of Flutter development and debugging tools. After your app is developed, it will be compiled into native 64-bit code. Just like any other native app, you can package it and run it on other Windows devices. Finally, you can use the same code base to build apps for Android, iOS, web, macOS, and Linux platforms.
If you want to start building Windows apps with Flutter, we look forward to hearing your feedback! If you prefer to use your Windows expertise to build Windows implementations of popular plug-ins, or build some Windows-specific tools for Flutter (such as creating MSIX command-line tools through the output of the flutter build windows command), we also warmly welcome!
Submit feedback
https://github.com/flutter/flutter/issues
Build a Windows implementation of popular plugins
https://flutter.cn/docs/development/packages-and-plugins/developing-packages#plugin
As Flutter starts to support Windows, what kind of wonderful applications do you plan to build? Welcome to share your thoughts with us in the comments section.
Recommended reading
Click the screen at the end | read read the original article | access Flutter Chinese developer community resources