Google released Flutter Alpha: Windows support

Lao Meng's Guide : Windows is here, are Mac, Linux, and the Web still far away?

This article is translated from https://medium.com/flutter/announcing-flutter-windows-alpha-33982cd0f433

Our mission is to provide developers with an open source, high-productivity framework to build beautiful native applications on any platform. So far, we have provided stable releases for Android and iOS. The Google Play Store alone provides 8 stable releases and more than 100,000 applications. We will continue to expand our focus to include other platforms such as Web, macOS and Linux. Today, we are happy to announce another goal of Flutter, which is Flutter's support for the Alpha version of Windows.

Windows remains a popular choice for desktop and laptop devices, and Microsoft reports more than one billion active devices running Windows 10 . Our own statistics show that more than half of all Flutter developers use Windows, so it is natural that Flutter is the target. Local desktop support opens up many exciting possibilities for Flutter, including improved developer tools, reducing the burden on new users, and of course, applications can access any device the user may have through a single code base.

Add Windows to Flutter

As mentioned in our architecture overview, Flutter is a cross-platform UI toolkit designed to allow code reuse between operating systems such as iOS and Android, while also allowing applications to directly interact with basic platform services. The goal is to enable developers to deliver high-performance applications that feel natural on different platforms, and embrace their differences while having as much code as possible. The core of Flutter is the engine, which supports all Flutter applications necessary. Whenever a new frame needs to be drawn, the engine is responsible for rasterizing the composite scene. It provides a low-level implementation of Flutter's core API, including graphics, text layout, file and network I/O, accessibility support, plugin architecture, and Dart runtime and compilation toolchain.

Every new platform we add to Flutter will extend the core framework with new services to enable it to shine on that platform. We started with Material Design and a touch-based, mobile-centric user interface on Android and iOS, which aims to achieve pixel perfection on both mobile platforms. Adding support for desktop form factors through the Web, Windows, macOS, and Linux brings a whole new set of services, including strong support for keyboard, mouse, mouse wheel and controller on the input side, as well as adapting and even adapting to these aspects The widget that works best. The larger screen size that comes with web and desktop applications.

In addition, each new platform will not only affect the Flutter framework and engine, but also many other aspects:

• Toolchain update: add new targets to CLI and IDE tools (in this case, Windows)
• Shell: Support for WM_*processing Windows input and output through ANGLE through messages , and use Skia to render to the underlying DirectX surface at native speed
• Runner: Each project will get a Shell application for the supported target. For Windows, this is a Win32/C++ program that can load Flutter code and execute it at runtime. If needed, you can add native code to the application here.
• Plugins: Plugins are a mix of Dart code and native code for each platform supported by the plugin. This native code needs to be added for each plug-in compiled in the Flutter application on Windows.

This Alpha version provides a solid foundation, which we will stabilize in the coming months. With support for Windows 7 and later, we hope this can provide some introductory knowledge for adventurous developers.

Explore some sample applications

To check Flutter's support for Windows, you might want to try some of the sample applications we created, which run well on Windows with our new support. The first is Flokk application, it is gskinner.com designers and developers together to create . The goal is to prove that Flutter is ready for the desktop by creating an innovative and beautiful Flutter desktop application. Flokk is an application that can be used with your real Google Contacts data and display contact activity on GitHub and Twitter.

If you want to use the Flokk application on a Windows machine, you can download the latest version on GitHub . If you want to learn how gskinner built this application, please refer to its excellent blog post: Flokk-How we use Flutter to build a desktop application .

In addition, the Flutter Gallery app (the show app for everything we use for Flutter) has recently been completely rewritten to add support for desktop sizes. This allows us to check whether it can run properly on the Web as well as Windows, macOS and Linux.

Many studies in the library show ideas for different application styles that are recommended when designing your own Windows applications using Flutter. When you find something you like, the code can be found on GitHub .

Getting started with Flutter for Windows

Start installing the Flutter SDK according to the Windows installation instructions . To locate the Windows desktop, you first need to install the tools described in the Desktop docs . By default, Flutter assumes that you are building production software and are not configured to develop Windows applications. However, it can be easily solved from the command line:

$ flutter channel dev
$ flutter upgrade
$ flutter config --enable-windows-desktop

The first command sets Flutter to use the experimental quality "dev" channel (instead of the default "stable" channel). This way, you can use platform support that is still in Alpha, such as Windows. The second command pulls down the latest bit on the channel. The third command can be used for Windows application development on your PC.

After setting it up, every time you use the extended support of Android Studio or Visual Studio Code , or create a new Flutter application from the command line, it will create a Windows subfolder.

If you are curious, please run the default application on Windows as follows:

Finally, once the application is created, building the application will create a native EXE file in release mode and the necessary supporting DLLs. At that time, if you want to try to run a new Windows application on any Windows 10 computer, even if you don't have a computer with Flutter installed, you can follow the steps below to compress the necessary files and run it.

Windows plugin

Even if we just released the Alpha version, the Flutter community is already developing for Windows plugins. Here are some:

• url_launcher : Launch the URL from your application in the browser
• path_provider : Find a path pointing to a special direction on the user's machine, such as Document or temp
• shared_preferences : Keep user preferences serialized on disk between application sessions
• biometric_storage : storage encrypted by biometric technology
• flutter_audio_desktop : Play audio from the desktop application

The advantage of using these plugins is that most of them also support other Flutter platforms, which allows you to target apps to Android, iOS, Web, etc., as well as Windows. Also, while about a third of the available packages on pub.dev (the package manager for Dart and Flutter) are plugins with platform-specific code, most are not. For example, many of the highest quality and most commonly used software packages are part of the Flutter Favorite program, and most of them run on Windows. If you want to see a complete list of packages running on Windows, you can run this query on pub.dev .

Interoperability with Windows

If you want to build your own plug-in for Windows, you can. After entering the developer channel and enabling Windows for your computer, you can start with the following command:

$ flutter create --template plugin --platforms Windows hello_plugin

At that time, you will be able to add Flutter code to libsubfolders in the plug-in project , and add Windows code to windowssubfolders. You will use Platform Channels to communicate between the two stacks, which are actually messages passed between Dart and C++ code. For the elaborate production of this example, see url_launcher implementation .

However, platform channels are not the only option for interoperability with Windows. If you want, you can use Dart FFI (External Function Interface) to load the library and call C-style APIs, such as Win32 APIs. Unlike url_launcher, which uses platform channels, the path_provider plugin is implemented using FFI, as you can see in the GitHub repo . FFI does not need to switch back and forth between Dart and C++, but allows you to write code to directly import the required API. For example, the following is the code used 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');
view rawmbox.dart hosted with ❤ by GitHub

This code does not incur the overhead of switching between two threads such as platform channels. FFI includes support for many different kinds of APIs, including Win32, WinRT and COM. However, before the entire package and run C-based Windows API, please check win32 plug , the plug-in can be very good to do this. In fact, the path_provider plugin itself is implemented using win32 plugins. For details on how win32 plugins are developed and how they work, check out the blog post Dart FFI's Fun for Windows .

Windows Resources Flutter

No matter where you are in your Flutter for Windows journey, make sure to read the desktop documentation on flutter.dev , which includes the latest details. In addition, you will need to be familiar with the Flutter code lab to write Windows, macOS, and Windows desktop target applications , which include code for real-world scenarios, such as authentication using OAuth, access to the GitHub API, and using GraphQL. Or, for another good example of Flutter desktop code running on Windows, check out the photo search example .

It uses standard Windows file opening dialogs, tree view widgets, splitter widgets, and integrates the results with real-world REST APIs.

For other useful desktop-oriented widgets, we recommend using the menu bar plugin , NavigationRail widget and DataTable widget . You may also be interested in the InteractiveViewer widget , which has full desktop support and can pan and zoom sub-widgets with mouse gestures.

Can explore another useful set of widgets is SyncFusion of those , they are already well known in the Windows development community. They provide a wide range of enterprise quality widgets for creating charts, gauges, data grids, etc.

These widgets have community and enterprise licenses, so you can find the best tool for your project.

Flutter for Windows

In addition to Windows (usually Flutter desktop) software packages and plugins, Flutter developers have been developing excellent applications for Windows, such as Invoice Ninja’s experimental build:

Invoice Ninja is an invoicing company that relies on Flutter for revenue. They are targeting Android and iOS in production today, and have web-based demos for you to try, but they also look forward to providing a desktop version.

"In the past Ninja, we have been struggling to only support web and mobile devices and can only maintain three separate code bases at a time. With Flutter, and recently Flutter Desktop, we have been able to use a single code base for each major platform Build applications. Not only do we get a free desktop version of the application fundamentally, but we also have the best performance of all applications!"

--Hillel Coren, co-founder of Invoice Ninja

If you are interested in implementing real-world revenue-generating Flutter applications that can run on mobile and desktop computers, you can find the source code on GitHub .

Aartos is another company that manufactures excellent products, including a real-time drone detection system with a multi-platform client written by Flutter . This is an earlier version of the Windows client running alongside the mobile client:

Video address: https://youtu.be/mGvPCT7Vc2Y

The two versions for iOS and Windows share exactly the same code base.

If you are an experienced Flutter developer and find yourself switching between different versions of Flutter; for example, one version for delivering production mobile apps and another version for testing Windows alpha, then you might like Flutter version manager, which now has a Windows GUI, you can download this version .

Video address: https://youtu.be/_WA71wSt2ww

The tool is open source, so you can see for yourself how Leo makes it look so great.

What's next

Now that we have released the Alpha version, our attention has shifted to the completion of the feature set and the release of stable products. As an open source project, you can follow our beta test progress on the GitHub website. Other work that needs to be done includes accessibility, globalization and localization, enhanced keyboard and text processing, support for command line parameters, etc. .

In addition to supporting the classic Win32 API, we are also experimenting with a UWP-based version of the Flutter shell, which allows Flutter to access a wider range of Windows-based devices, including Xbox. As part of the experiment, this week we released a UWP-based version of Flutter Gallery to the Windows App Store .

The following screenshot shows the UWP-based Flutter Gallery running on Xbox:

This is the Windows 10X simulator of the same application running on a dual-screen device running on Windows program :

You can learn more about the progress of Flutter for UWP on GitHub .

Summary

In this version, we introduce the functions of Flutter to Windows. It has a declarative, composable, and reactive framework that can improve the work efficiency of developers and has an adaptive Material specification implementation, so you can also make applications Look and feel the way you want it as a full set of development and debugging tools for Flutter. When finished, your application will be compiled to native 64-bit code, and you can package it and bring it to other Windows computers, just like any other native application. Finally, you can use the same code base to create applications for Android, iOS, Web, macOS, and Linux.

If you want to start building Windows applications with Flutter, we hope to receive your feedback ! If you want to use Windows expertise to build Windows implementations of popular plugins , or build some Windows-centric tools for Flutter (maybe a CLI that can flutter build windowscreate MSIX from the output of commands...), you are also welcome !

With Flutter's new support for Windows, what are you going to build?

Copyright statement: This article is original and authorized under the CC BY-SA 4.0 license. Please attach the source link and this statement for reprinting.

`

communicate with

communicate with

Laomeng Flutter blog (330 control usage + actual combat introduction series): http://laomengit.com

Welcome to join the Flutter exchange group (WeChat: laomengit) and follow the public account [Lao Meng Flutter]: