谷歌发布Flutter Alpha：支持Windows

忘是亡心i 2022-12-10 07:29 169阅读 0赞

![20200924203851579.png][]

> **老孟导读**：Windows来了，Mac、Linux、Web还远吗？
> 
> 本文翻译自[https://medium.com/flutter/announcing-flutter-windows-alpha-33982cd0f433][https_medium.com_flutter_announcing-flutter-windows-alpha-33982cd0f433]

我们的使命是为开发人员提供一个开源，高生产率的框架，以便在任何平台上构建漂亮的本机应用程序。到目前为止，我们已经为Android和iOS提供了正式版本（stable releases），仅Google Play商店就提供了8个稳定版本和100,000多个应用。我们将继续扩大关注范围，包括Web，macOS和Linux等其他平台。今天，我们很高兴地宣布Flutter的另一个目标，即Flutter对Windows的Alpha版本的支持。

Windows仍然是台式机和笔记本电脑设备的流行选择，Microsoft报告了超过[十亿台运行Windows 10的活动设备][Windows 10]。我们自己的统计数据显示，所有Flutter开发人员中有超过一半使用Windows，因此，它自然Flutter是的目标。本地桌面支持为Flutter开辟了许多激动人心的可能性，包括改进的开发人员工具，减少了新用户的负担，当然，应用程序可以通过单个代码库访问用户可能拥有的任何设备。

# 将Windows添加到Flutter #

如我们的[架构概述中所述][Link 1]Flutter是一种跨平台的UI工具包，旨在允许在iOS和Android等操作系统之间重复使用代码，同时还允许应用程序直接与基础平台服务交互。目的是使开发人员能够交付在不同平台上感觉自然的高性能应用程序，在存在尽可能多的代码的同时，拥抱它们存在的差异。Flutter的核心是引擎，它支持所有Flutter应用程序所必需的。每当需要绘制新框架时，引擎负责对合成场景进行栅格化。它提供Flutter核心API的低级实现，包括图形，文本布局，文件和网络I / O，可访问性支持，插件体系结构以及Dart运行时和编译工具链。

我们添加到Flutter的每个新平台都会通过新服务扩展核心框架，使其能够在该平台上发光。我们从使用Material Design以及基于触摸的，以移动设备为中心的用户界面开始在Android和iOS上开始，该界面旨在在两个移动平台上都达到像素完美。通过Web，Windows，macOS和Linux添加对台式机外形的支持，带来了一整套全新的服务，其中包括对输入侧的键盘，鼠标，鼠标滚轮和控制器的强大支持，以及在这些方面适应甚至工作得最好的小部件。 Web和桌面应用程序随附的更大的屏幕尺寸。

此外，每个新平台不仅会影响Flutter框架和引擎，还会影响很多其他方面：

*  **工具链更新：**向CLI和IDE工具添加新目标（在本例中为Windows）
 *  **Shell：**支持通过`WM_*`消息处理Windows的输入和通过[ANGLE的][ANGLE]输出，使用[斯基亚（Skia）][Skia]以本机速度渲染到底层DirectX表面
 *  **Runner：**每个项目都会获得针对受支持目标的Shell应用程序。对于Windows，这是一个Win32 / C ++程序，可加载Flutter代码并在运行时执行它。如果需要，可以在此处向应用程序添加本机代码。
 *  **插件：**插件是Dart代码和该插件支持的每个平台的本机代码的混合。需要为在Windows上Flutter应用程序中编译的每个插件添加该本地代码。

此Alpha版本提供了坚实的基础，我们将在未来几个月中稳定该基础。借助对Windows 7及更高版本的支持，我们希望这可以为喜欢冒险的开发人员提供一些入门知识。

# 探索一些示例应用 #

要查看Flutter对Windows的支持，您可能想尝试一些我们创建的示例应用程序，这些应用程序在Windows上使用我们新增的支持可以很好地运行。第一个是Flokk应用程序，它是与[gskinner.com][]的设计师和开发人员[共同创建的][gskinner.com]。目的是通过创建创新的，精美的Flutter桌面应用程序来证明Flutter已准备好用于桌面。Flokk是一款可与您的真实Google Contacts数据配合使用并在GitHub和Twitter上显示联系人活动的应用程序。

![图片发布][20200924203859430.png]

如果您想在Windows机器上使用Flokk应用程序，则可以[在GitHub上下载最新版本][GitHub]。如果您想了解gskinner如何构建此应用程序，请参阅其出色的博客文章：[Flokk-我们如何使用Flutter构建桌面应用程序][Flokk-_Flutter]。

此外，Flutter Gallery应用程序（我们用于Flutter的所有事物的展示应用程序）最近已完全重写，以增加对台式机尺寸的支持。这使我们能够检查它是否可以在[Web][]以及Windows，macOS和Linux上正常运行。

![图片发布][20200924203904117.png]

库中的许多研究都展示了在使用Flutter设计自己的Windows应用程序时建议使用的不同应用程序风格的想法。当您找到自己喜欢的东西时，[该代码可在GitHub上找到][GitHub 1]。

# Flutter for Windows入门 #

根据[Windows安装说明][Windows]开始安装Flutter SDK 。要定位Windows桌面，首先需要[安装Desktop docs中描述的工具][Desktop docs]。默认情况下，Flutter假定您正在构建生产软件，并且未配置为开发Windows应用程序。但是，可以从命令行轻松解决：

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

第一条命令将Flutter设置为使用实验质量的“ dev”通道（而不是默认的“ stable”通道）。这样，您就可以使用仍在Alpha中的平台支持，例如Windows。第二条命令下拉该通道上的最新位。第三个命令可在您的PC上进行Windows应用开发。

设置好之后，每次使用[Android Studio][]或[Visual Studio Code][]的扩展支持，或者从命令行创建新的Flutter应用程序时，它都会创建一个Windows子文件夹。

![图片发布][20200924203908757.png]

如果您感到好奇，请在Windows上运行默认应用程序，如下所示：

![图片发布][20200924203909604.png]

最后，一旦创建了应用程序，构建该应用程序将创建一个发布模式的本机EXE文件以及必要的支持DLL。到那时，如果您想尝试在任何Windows 10计算机上运行新的Windows应用程序，即使没有安装Flutter的计算机，也可以按照[以下步骤压缩必要的文件][Link 2]并运行。

# Windows插件 #

即使我们刚刚发布Alpha版，Flutter社区也已经在为Windows插件进行开发。这里有一些：

*  [url\_launcher][url_launcher]：从您的应用程序在浏览器中启动URL
 *  [path\_provider][path_provider]：在用户的机器上找到指向特殊方向的路径，例如Document或temp
 *  [shared\_preferences][shared_preferences]：保持用户首选项在应用程序会话之间的磁盘上序列化
 *  [biometric\_storage][biometric_storage]：通过生物识别技术加密的存储
 *  [flutter\_audio\_desktop][flutter_audio_desktop]：从桌面应用播放音频

使用这些插件的好处是它们中的大多数还支持其他Flutter平台，这使您可以将应用定位到Android，iOS，Web等以及Windows。此外，虽然[pub.dev][]（Dart和Flutter的软件包管理器）上[约有][pub.dev]三分之一的可用软件包是具有特定于平台的代码的插件，但大多数不是。例如，[许多最高质量和最常用的软件包][Link 3]是Flutter Favorite程序的一部分，并且大多数都在Windows上运行。如果要查看在Windows上运行的软件包的完整列表，可以[在pub.dev上运行此查询][pub.dev 1]。

# 与Windows互操作 #

如果您想为Windows构建自己的插件，则可以。进入开发人员通道并为计算机启用Windows后，可以使用以下命令开始：

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

届时，您将能够在插件项目中将Flutter代码添加到`lib`子文件夹中，并将Windows代码添加到`windows`子文件夹中。您将使用[Platform Channels][]在两个堆栈之间进行通信，这实际上是Dart和C ++代码之间传递的消息。有关此示例的精心制作，[请参见url\_launcher实现][url_launcher 1]。

但是，平台通道并不是与Windows互操作的唯一选择。如果愿意，可以使用[Dart FFI（外部功能接口）][Dart FFI]加载库并调用C样式的API，例如Win32 API。与使用平台通道的url\_launcher不同，path\_provider插件是使用FFI实现的，如您在[GitHub repo中][GitHub repo]所见。FFI无需在Dart和C ++之间来回切换，而是允许您编写代码以直接导入所需的API。例如，以下是用于调用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

此代码不会产生在平台通道之类的两个线程之间进行转换的开销。FFI包括对许多不同种类的API的支持，包括Win32，WinRT和COM。但是，在运行并包装整个基于C的Windows API之前，请检查[win32插件][win32]，该[插件][win32]已经可以很好地做到这一点。实际上，[path\_provider][path_provider]插件本身是使用win32插件实现的。有关win32插件如何开发以及如何工作的详细信息，请查看博客文章[Dart FFI的Windows乐趣][Dart FFI_Windows]。

# Windows资源Flutter #

无论您在Flutter for Windows之旅中的任何地方，都应确保[阅读flutter.dev上的桌面文档][flutter.dev]，其中包括最新详细信息。另外，您将需要[熟悉][Link 4] Flutter代码[实验室，以编写Windows，macOS和Windows桌面目标应用程序][Link 4]，其中包括用于真实场景的代码，例如使用OAuth进行身份验证，访问GitHub API和使用GraphQL。或者，对于在Windows上运行的Flutter桌面代码的另一个很好的例子，[请查看照片搜索示例][Link 5]。

![图片发布][20200924203912291.png]

它使用标准的Windows文件打开对话框，树视图小部件，拆分器小部件，并将结果与真实世界的REST API集成在一起。

对于其他有用的面向桌面的小部件，我们建议[使用菜单栏插件][Link 6]，[NavigationRail小部件][NavigationRail]和[DataTable小部件][DataTable]。您可能还对[InteractiveViewer小部件][InteractiveViewer]感兴趣，[该小部件][InteractiveViewer]具有完整的桌面支持，可通过鼠标手势来平移和缩放子小部件。

可以探索的另一组有用的小部件是[SyncFusion][]中的[那些][SyncFusion]，它们已经在Windows开发社区中广为人知。它们提供了广泛的企业质量小部件，用于创建图表，仪表，数据网格等。

![图片发布][20200924203912906.png]

![图片发布][20200924203914121.png]

这些小部件具有社区和企业许可证，因此您可以找到最适合您的项目的工具。

# 适用于Windows的Flutter #

除了Windows（通常是Flutter桌面）的软件包和插件外，Flutter开发人员还一直在开发针对Windows的出色应用，例如[Invoice Ninja的][Invoice Ninja]实验性构建：

![图片发布][2020092420391737.png]

Invoice Ninja是一家依靠Flutter带来收入的发票公司。他们的目标是今天生产中的Android和iOS，并具有[基于Web的演示][Web 1]供您尝试，但也期待提供桌面版本。

> “在过去的Ninja中，我们一直在努力仅支持Web和移动设备，一次只能维护三个单独的代码库。借助Flutter，以及最近的Flutter Desktop，我们已经能够使用单个代码库为每个主要平台构建应用程序。我们不仅可以从根本上获得应用程序的免费桌面版本，而且还拥有所有应用程序中最好的性能！”
> 
> —Invoice Ninja 联合创始人Hillel Coren

如果您对实现可在移动和台式机上运行的现实世界中可产生收入的Flutter应用感兴趣，[则可在GitHub上找到源代码][GitHub 2]。

[Aartos][]是另一家制造出色产品的公司，其中包括带有[Flutter编写的具有多平台客户端][Flutter]的实时无人机检测系统。这是在移动客户端旁边运行的Windows客户端的早期版本：

视频地址：[https://youtu.be/mGvPCT7Vc2Y][https_youtu.be_mGvPCT7Vc2Y]

这两个针对iOS和Windows的版本共享完全相同的代码库。

如果您是经验丰富的Flutter开发人员，并且发现自己在Flutter的不同版本之间进行切换；例如，一个版本用于交付生产型移动应用程序，另一个版本用于测试Windows alpha，那么您可能会喜欢Flutter版本管理器，该版本管理器现在带有[Windows GUI，您可以下载该版本][Windows GUI]。

视频地址：[https://youtu.be/\_WA71wSt2ww][https_youtu.be_WA71wSt2ww]

该工具是开源的，因此您可以[亲自][Link 7]了解Leo如何使其看起来如此出色。

# 下一步是什么 #

现在，我们已经发布了Alpha版，我们的注意力转移到完成功能集和稳定产品的发布上。作为一个开源项目，您可以[在GitHub网站上][GitHub 3]关注我们的[beta测试进展][GitHub 3]，尚需完成的其他工作包括可访问性，全球化和本地化，增强的键盘和文本处理，对命令行参数的支持等等。

除了支持经典的Win32 API外，我们还在试验[基于UWP的Flutter shell版本，该版本][UWP_Flutter shell]使Flutter可以访问更广泛的基于Windows的设备，包括Xbox。作为该实验的一部分，本周我们[向Windows应用商店][Windows 1]发布了基于UWP的[Flutter Gallery][Windows 1]版本。

以下屏幕快照显示了在Xbox上运行的基于UWP的Flutter Gallery：

![图片发布][20200924203930390.png]

这是在[Windows 10X模拟器][Windows 10X]上运行的双屏Windows设备上运行的同一应用[程序][Windows 10X]：

![图片发布][2020092420393298.png]

![图片发布][20200924203933966.png]

[您可以在GitHub上了解有关Flutter for UWP的进度的更多信息][GitHub_Flutter for UWP]。

# 摘要 #

在此版本中，我们将Flutter的功能引入Windows，它具有声明式，可组合的，反应式的框架，可提高开发人员的工作效率，并具有适应性的Material规范实现，因此您还可以使应用外观和感觉达到您希望的方式作为Flutter的全套开发和调试工具。完成后，您的应用程序将编译为本机64位代码，您可以将其打包并带到其他Windows计算机上，就像其他任何本机应用程序一样。最后，您可以使用相同的代码库来创建针对Android，iOS，Web，macOS和Linux的应用程序。

如果您想开始使用Flutter构建Windows应用程序，我们希望[收到您的反馈][Link 8]！如果您希望利用Windows的专业知识来[构建流行插件的Windows实现][Windows 2]，或者为Flutter构建一些以Windows为中心的工具（也许是一个CLI，它可以从`flutter build windows`命令的输出中创建MSIX ……），那也欢迎您！

有了Flutter对Windows的新支持，您将要构建什么？

## 交流 ##

老孟Flutter博客（330个控件用法+实战入门系列文章）：[http://laomengit.com][http_laomengit.com]

欢迎加入Flutter交流群（微信：laomengit）、关注公众号【老孟Flutter】：

[20200924203851579.png]: /images/20221123/bacbd9f6e3544cfe9935395d837e6c42.png
[https_medium.com_flutter_announcing-flutter-windows-alpha-33982cd0f433]: https://medium.com/flutter/announcing-flutter-windows-alpha-33982cd0f433
[Windows 10]: https://blogs.windows.com/windowsexperience/2020/03/16/windows-10-powering-the-world-with-1-billion-monthly-active-devices/
[Link 1]: https://flutter.dev/docs/resources/architectural-overview
[ANGLE]: https://opensource.google/projects/angle
[Skia]: https://skia.org/
[gskinner.com]: http://gskinner.com/
[20200924203859430.png]: /images/20221123/4b2b705e614a48728215b9cffffeb3e9.png
[GitHub]: https://github.com/gskinnerTeam/Flokk/releases
[Flokk-_Flutter]: https://blog.gskinner.com/archives/2020/09/flokk---how-we-built-a-desktop-app-using-flutter.html
[Web]: https://gallery.flutter.dev/
[20200924203904117.png]: /images/20221123/a5a7086c9c5e4342873186bf9ac8f8fd.png
[GitHub 1]: https://github.com/flutter/gallery
[Windows]: https://flutter.dev/docs/get-started/install/windows
[Desktop docs]: https://flutter.dev/desktop#additional-windows-requirements
[Android Studio]: https://flutter.dev/docs/get-started/editor?tab=androidstudio
[Visual Studio Code]: https://flutter.dev/docs/get-started/editor?tab=vscode
[20200924203908757.png]: /images/20221123/1a5dab83112f4437a84f3de1d4f46edf.png
[20200924203909604.png]: /images/20221123/2f49b090a71a4084a6327d4ab6c4222c.png
[Link 2]: https://flutter.dev/desktop#distribution
[url_launcher]: https://pub.dev/packages/url_launcher
[path_provider]: https://pub.dev/packages/path_provider
[shared_preferences]: https://pub.dev/packages/shared_preferences
[biometric_storage]: https://pub.dev/packages/biometric_storage
[flutter_audio_desktop]: https://pub.dev/packages/flutter_audio_desktop
[pub.dev]: http://pub.dev/
[Link 3]: https://pub.dev/flutter/favorites
[pub.dev 1]: https://pub.dev/flutter/packages?platform=windows
[Platform Channels]: https://flutter.dev/docs/development/platform-integration/platform-channels
[url_launcher 1]: https://github.com/flutter/plugins/tree/master/packages/url_launcher/url_launcher_windows
[Dart FFI]: https://flutter.dev/docs/development/platform-integration/c-interop
[GitHub repo]: https://github.com/flutter/plugins/tree/master/packages/path_provider/path_provider_windows
[win32]: https://pub.dev/packages/win32
[Dart FFI_Windows]: https://medium.com/@timsneath/windows-fun-with-dart-ffi-687c4619e78d
[flutter.dev]: http://flutter.dev/desktop
[Link 4]: https://codelabs.developers.google.com/codelabs/flutter-github-graphql-client
[Link 5]: https://github.com/flutter/samples/tree/master/experimental/desktop_photo_search
[20200924203912291.png]: /images/20221123/76622ad0b17a42b1a8b05aa2a94019c5.png
[Link 6]: https://github.com/google/flutter-desktop-embedding/tree/master/plugins/menubar
[NavigationRail]: https://api.flutter.dev/flutter/material/NavigationRail-class.html
[DataTable]: https://api.flutter.dev/flutter/material/DataTable-class.html
[InteractiveViewer]: https://api.flutter.dev/flutter/widgets/InteractiveViewer-class.html
[SyncFusion]: https://pub.dev/publishers/syncfusion.com/packages
[20200924203912906.png]: /images/20221123/66855fdbba1246078b44f266257acca6.png
[20200924203914121.png]: /images/20221123/1253f24981a748918ae441a7c9ef0df0.png
[Invoice Ninja]: https://www.invoiceninja.com/
[2020092420391737.png]: /images/20221123/499cfdc9b9c34e179caf0804c00013db.png
[Web 1]: https://demo.invoiceninja.com/
[GitHub 2]: https://github.com/invoiceninja/flutter-client
[Aartos]: https://drone-detection-system.com/
[Flutter]: https://drone-detection-system.com/aartos-dds/product-overview/
[https_youtu.be_mGvPCT7Vc2Y]: https://youtu.be/mGvPCT7Vc2Y
[Windows GUI]: https://github.com/leoafarias/fvm/releases
[https_youtu.be_WA71wSt2ww]: https://youtu.be/_WA71wSt2ww
[Link 7]: https://github.com/leoafarias/fvm
[GitHub 3]: https://github.com/flutter/flutter/projects/55
[UWP_Flutter shell]: https://docs.microsoft.com/en-us/windows/uwp/get-started/universal-application-platform-guide
[Windows 1]: https://www.microsoft.com/en-us/p/flutter-gallery/9pdwctdfc7qq
[20200924203930390.png]: /images/20221123/16067ba839644de9bb1d17b1ad126885.png
[Windows 10X]: https://docs.microsoft.com/en-us/dual-screen/windows/get-dev-tools
[2020092420393298.png]: /images/20221123/96314f5e2d8a4913846b9507703b683a.png
[20200924203933966.png]: /images/20221123/d0f22585071843e49a2167c344426ebb.png
[GitHub_Flutter for UWP]: https://github.com/flutter/flutter/issues/14967#issuecomment-697108439
[Link 8]: https://github.com/flutter/flutter/issues
[Windows 2]: https://flutter.dev/docs/development/packages-and-plugins/developing-packages#plugin
[CC BY-SA 4.0]: https://creativecommons.org/licenses/by-sa/4.0/
[http_laomengit.com]: http://laomengit.com