With Windows coming, are Mac, Linux and Web still far behind?

Translated from medium.com/flutter/ann…

Our mission is to provide developers with an open source, highly productive framework for building beautiful native applications on any platform. So far, we’ve released stable releases for Android and iOS, with eight stable releases and over 100,000 apps on the Google Play Store alone. We will continue to expand our focus to include other platforms such as the Web, macOS and Linux. Today, we are pleased to announce another goal of Flutter, namely Flutter support for the Alpha version of Windows.

Windows remains the popular choice for desktop and laptop devices, with Microsoft reporting more than a billion active devices running Windows 10. Our own statistics show that more than half of all Flutter developers use Windows, so it is a natural Flutter target. Native desktop support opens up many exciting possibilities for Flutter, including improved developer tools that reduce the burden on new users and, of course, the application’s ability to access any device a user might have from a single code base.

Add Windows to Flutter

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

Each new platform we add to Flutter extends the core framework with new services that enable it to shine on that platform. We started on Android and iOS using Material Design and a touch-based, mobile-centric user interface designed to achieve pixel perfection on both mobile platforms. Adding support for the desktop form factor via the Web, Windows, macOS, and Linux brings a whole new set of services, including powerful support for input-side keyboards, mice, mouse wheels, and controllers, as well as widgets that fit and work best in these areas. Larger screen sizes that come with Web and desktop applications.

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

  • ** Toolchain update: ** Adds new targets to CLI and IDE tools (in this case, Windows)
  • **Shell: ** supports passWM_*Message processing Windows input and passANGLE of theOutput, usingSkiaRender to the underlying DirectX surface at native speed
  • **Runner: ** Each project gets a Shell application for the supported target. For Windows, this is a Win32 / C ++ program that loads the Flutter code and executes it at runtime. You can add native code to your application here if you want.
  • ** Plug-ins: ** Plug-ins are a mix of Dart code and native code for each platform that the plug-in supports. This native code needs to be added for each plug-in compiled in the Flutter application on Windows.

This Alpha release provides a solid foundation that we will stabilize over the coming months. With support for Windows 7 and later, we hope this will provide a primer for adventurous developers.

Explore some sample applications

To see Flutter support for Windows, you may want to try out some of the sample applications we created that run just fine on Windows with our new support. The first is the Flokk application, which was created in collaboration with the designers and developers at GSkinner.com. The goal is to demonstrate that Flutter is ready for the desktop by creating an innovative and elegant Flutter desktop application. Flokk is an application that works with your real Google Contacts data and displays 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, see his excellent blog post: Flokk- How We Built desktop Applications using Flutter.

In addition, the Flutter Gallery application (our display application for everything we use for Flutter) has recently been completely rewritten to add support for desktop size. This allows us to check that it works on the Web as well as Windows, macOS, and Linux.

Many of the studies in the library show ideas for different application styles recommended when designing your own Windows applications using Flutter. When you find something you like, the code is available on GitHub.

Introduction to Flutter for Windows

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

$ flutter channel dev
$ flutter upgrade
$ flutter config --enable-windows-desktop
Copy the code

The first command sets up Flutter to use an experiment-quality “dev” channel (rather than the default “stable” channel). This way, you can use platforms that are still supported in Alpha, such as Windows. The second command pulls down the latest bit on the channel. The third command enables Windows application development on your PC.

Once set up, it creates a Windows subfolder each time a New Flutter application is created using Android Studio or Visual Studio Code’s extended support, or from the command line.

If you’re curious, run the default application on Windows, as follows:

Finally, once the application is created, building the application creates a native EXE file in publish mode along with the necessary supporting DLLS. Until then, if you want to try running a new Windows application on any Windows 10 computer, even if you don’t have Flutter installed, you can follow these steps to compress the necessary files and run Flutter.

Windows plug-in

Even though we have just released Alpha, the Flutter community is already working on a Windows plugin. Here are a few:

  • Url_launcher: Launch the URL from your application in the browser
  • Path_provider: Finds a path on the user’s machine to a particular direction, such as Document or temp
  • Shared_preferences: Keeps user preferences serialized on disk between application sessions
  • Biometric_storage: Storage encrypted by biometric technology
  • Flutter_audio_desktop: plays audio from desktop applications

The advantage of using these plug-ins is that most of them also support other Flutter platforms, which allows you to target applications to Android, iOS, Web, etc., as well as Windows. In addition, while about one-third of the packages available on Pub. dev (the package manager for Dart and Flutter) are plug-ins 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 run on Windows. To see a complete list of packages running on Windows, run this query on pub.dev.

Interoperate 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 begin with the following command:

$ flutter create --template plugin --platforms Windows hello_plugin
Copy the code

At that point, you will be able to add Flutter code to the Lib subfolder and Windows code to the Windows subfolder in the plug-in project. You’ll use Platform Channels to communicate between the two stacks, which are actually messages passed between Dart and C ++ code. For elaboration of this example, see the URl_launcher implementation.

However, platform channels are not the only option for interoperating with Windows. If desired, you can use the Dart FFI (External Functional Interface) to load the library and call a C-style API, such as the Win32 API. Unlike url_launcher, which uses platform channels, the Path_Provider plug-in is implemented using FFI, as you can see in the GitHub repO. Instead of switching back and forth between Dart and C ++, FFI allows you to write code to import the API you need directly. 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'); View Rawmbox.dart Hosted with ❤ by GitHubCopy the code

This code does not incur the overhead of converting between two threads, such as platform channels. FFI includes support for many different kinds of apis, including Win32, WinRT and COM. However, before running and wrapping the entire C-based Windows API, check out the Win32 plug-in, which already does this pretty well. In fact, the path_Provider plug-in itself is implemented using the Win32 plug-in. For more information on how win32 plug-ins are developed and how they work, check out the blog post Dart FFI for Windows Fun.

Windows resource Flutter

Wherever you are on your journey to Flutter for Windows, be sure to read the desktop documentation on Flutter. Dev, which includes the latest details. Additionally, 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, accessing GitHub APIS, 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 open dialogs, tree view widgets, splitter widgets, and integrates the results with real-world REST apis.

For other useful desktop-oriented widgets, we recommend menu-bar plug-ins, NavigationRail widgets, and DataTable widgets. You may also be interested in the InteractiveViewer widget, which has full desktop support for panning and zooming child widgets with mouse gestures.

Another set of useful widgets to explore are those in SyncFusion, which are already well known in the Windows development community. They provide a wide range of enterprise quality widgets for creating charts, meters, data grids, and more.

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

For Windows with Flutter

In addition to software packages and plug-ins for Windows (and usually the Flutter desktop), Flutter developers have been working on great Applications for Windows, such as the experimental build of Invoice Ninja:

Invoice Ninja is an Invoice company that relies on Flutter to generate revenue. They are targeted for Android and iOS in production today, and have a Web-based demo for you to try, but also look forward to offering a desktop version.

“With Ninja in the past, we’ve tried to only support Web and mobile devices, maintaining only three separate code bases at a time. With Flutter, and more recently With Flutter Desktop, we have been able to build applications for each major platform using a single code base. Not only do we get a free desktop version of the application essentially, but we also have the best performance of any application!”

— Hillel Coren, Co-founder of Invoice Ninja

If you are interested in implementing a real-world revenue-generating Flutter application that runs on mobile and desktop computers, the source code can be found on GitHub.

Aartos is another company making great products, including a real-time drone detection system with a multi-platform client written with Flutter. This is an early version of the Windows client running alongside the mobile client:

Video address: 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, if one version is used to deliver production mobile applications and another is used to test Windows Alpha, you might like the Flutter version manager, which now comes with a Windows GUI that you can download.

Video address: Youtu.be /_WA71wSt2ww

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

What’s next

Now that we’ve released Alpha, our focus has shifted to completing the feature set and securing the release of the product. As an open source project, you can follow the progress of our beta on GitHub. Other work still to be done includes accessibility, globalization and localization, enhanced keyboard and text processing, support for command-line arguments, and more.

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

The following screen shot shows the UWP based Flutter Gallery running on Xbox:

Here is the same application running on a dual-screen Windows device running on a Windows 10X emulator:

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

Abstract

In this release, we introduce the capabilities of Flutter into Windows, with a declarative, composible, reactive framework that improves developer productivity and an adaptable Material specification implementation. So you can also make the application look and feel the way you want it to as a full set of Flutter development and debugging tools. When you’re done, your application will compile into native 64-bit code, which you can package and bring 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’d like to hear from you! If you wish to leverage Windows expertise to build Windows implementations of popular plug-ins, or build some Windows-centric tool for Flutter (perhaps a CLI, which can create MSIX from the output of the Flutter Build Windows command…) You are welcome too!

With Flutter’s new support for Windows, what will you build?

Copyright notice: This article is originally published under CC BY-SA 4.0 license. Please attach the source link and this statement.

`

communication

Lao Meng Flutter blog (330 controls usage + practical primer series) : laomengit.com