vlambda博客
学习文章列表

开始使用 Flutter 构建 Windows 桌面应用吧！

作者 / Chris Sells, Product Manager, Flutter developer experience


我们的使命是为开发者提供一个开源的高效框架，帮助他们在任何平台上构建美观的原生应用。截至目前，我们已经为 Android 和 iOS 带来了生产级别的支持，发布了 8 个稳定版本，仅在 Google Play 商店中就有超过 10 万款应用使用 。我们在继续努力，将支持范围扩展至 web、macOS 和 Linux 等其他平台。如今，Flutter 的另一个目标，即支持 Windows 的 Flutter Alpha 版本已经发布。


Windows 仍然是台式机和笔记本电脑设备的热门选择，据 Microsoft 报告称，Windows 10 的活跃设备数量超过 10 亿台。我们的统计数据显示，超过一半的 Flutter 开发者使用 Windows，自然 Flutter 应该支持该系统。原生桌面支持为 Flutter 提供了各种可能性，着实令人感到兴奋，其中包括开发工具的改进和新用户负担的降低，当然，还可以让开发者能通过单个代码库为用户可能拥有的任何设备打造应用。
  • Windows 10: 驱动全球 10 亿月活跃设备
    https://blogs.windows.com/windowsexperience/2020/03/16/windows-10-powering-the-world-with-1-billion-monthly-active-devices/


将 Windows 支持添加至 Flutter


正如我们在架构概览中所说的那样，Flutter 是一个跨平台界面工具包，旨在实现不同操作系统 (如 iOS 和 Android) 之间的代码重用，同时让应用可以直接与底层平台服务对接。我们的目标是让开发者能够交付高性能且在不同平台上都能自然流畅运行的应用，在尽可能共享代码的同时，包容不同平台间存在的差异。Flutter 的核心是引擎，用于支持必要的原语，为所有 Flutter 应用提供支持。每当需要绘制新的帧时，引擎负责对合成场景进行栅格化。引擎提供了 Flutter 核心 API 的底层实现，包括图形、文本布局、文件和网络 I/O、无障碍功能支持、插件架构以及 Dart 运行时和编译工具链。


  • 架构概览
    https://flutter.cn/docs/resources/architectural-overview


每当我们将新的目标平台添加到 Flutter，我们都会用新服务对核心框架进行扩展，使其能够在该平台上良好运行。我们先在 Android 和 iOS 上实现了 Material Design，以及适用于移动设备的触控界面，以便在这两个移动平台上实现像素级完美的体验。在 web、Windows、macOS 和 Linux 这些桌面环境中，Flutter 也提供了一整套全新的服务，包括对键盘、鼠标、滚轮和控制器等输入方式的强大支持，以及能适配这些平台的 widget (有些 widget 甚至在 web 和桌面应用的大屏幕上工作得更好)。


此外，每个新平台不仅会影响 Flutter 的框架和引擎，还会影响许多其他方面:
  • 工具链更新: 为 CLI 和 IDE 工具添加新目标平台（例如本文中的 Windows）
  • Shell: 支持通过 WM_* 消息处理来自 Windows 的输入，并通过 ANGLE 实现输出，ANGLE 使用 Skia 以原生速度渲染至底层的 DirectX 接口
  • Runner: 每个项目都会通过一个容器应用运行在目标平台上。对于 Windows，该容器应用是一个 Win32/C++ 程序，可以加载您的 Flutter 代码并在运行时执行。如果您需要，可以在这里为应用添加原生代码。
  • 插件: 插件是其自身所支持的每个平台的 Dart 代码和原生代码的集合。原生代码需要添加至每个插件中，而这些插件会被编译到您的 Windows 版 Flutter 应用中。


  • ANGLE
    https://opensource.google/projects/angle
  • Skia
    https://skia.org/


本次发布的 alpha 版本为我们未来几个月的工作打下了坚实的基础。凭借对 Windows 7 和更高版本的支持，我们希望它能给喜欢尝鲜的开发者提供一个出发点。



示例应用介绍


要实际了解 Flutter 对 Windows 的支持，可以查看我们创建的一些示例应用，这些应用通过我们新增的支持，在 Windows 上运行良好。第一个示例是 Flokk 应用，它是我们与 gskinner.com 的设计师和开发者合作的成果。我们旨在通过创建一个富有创意且美观的 Flutter 桌面应用，表明 Flutter 已经为桌面做好准备。Flokk 这款应用可以使用您的真实 Google Contacts 数据，并显示您的联系人在 GitHub 和 Twitter 上的活动。

开始使用 Flutter 构建 Windows 桌面应用吧！

您如果想在自己的 Windows 设备上使用 Flokk 应用，可以在 GitHub 上下载最新版本。如果您想了解 gskinner 是如何开发这款应用的，可以看看他们的博文: Flokk - 我们如何使用 Flutter 构建桌面应用。


  • 下载 Flokk
    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

此外，我们的示例应用 Flutter Gallery 可以为您展示 Flutter 的各个方面，这款应用最近进行了完全重写，以增加对桌面设备的支持。因此，我们能够确保其在 web、Windows、macOS 和 Linux 上运行良好。


  • Flutter Gallery (web 版)
    https://gallery.flutter.cn/

开始使用 Flutter 构建 Windows 桌面应用吧！

Flutter Gallery 中的许多案例代表了不同理念的应用风格，我们推荐您在使用 Flutter 设计自己的 Windows 应用时进行参考。如果感兴趣，您可以在 GitHub 上找到源代码。


  • 源代码地址
    https://github.com/flutter/gallery


开始使用 Flutter for Windows


请先按照 Windows 安装说明开始安装 Flutter SDK。要以 Windows 桌面设备为目标，您首先需要安装桌面文档中所述的工具。默认情况下，Flutter 假定您正在构建正式版软件，并且没有为开发 Windows 应用而进行配置。不过，这很容易通过命令行解决:

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

  • 在 Windows 系统上安装和配置 Flutter 开发环境
    https://flutter.cn/docs/get-started/install/windows
  • 桌面文档中所述的工具
    https://flutter.cn/desktop#additional-windows-requirements

第一个命令将 Flutter 设置为使用实验性 "dev" 渠道 (而不是默认的 "stable" 渠道)。这样您就可以使用仍在 alpha 阶段的平台支持，例如 Windows。第二个命令可以获取该渠道上的最新版本。第三个命令使您可以在 PC 上开发 Windows 应用。


完成这些设置后，每次您通过 Android Studio 或 Visual Studio Code 扩展程序，或者通过命令行创建新的 Flutter 应用时，都会创建一个 Windows 子文件夹。


  • Android Studio
    https://flutter.cn/docs/get-started/editor?tab=androidstudio
  • Visual Studio Code
    https://flutter.cn/docs/get-started/editor?tab=vscode

开始使用 Flutter 构建 Windows 桌面应用吧！

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

开始使用 Flutter 构建 Windows 桌面应用吧！

在您创建好应用后，构建该应用会生成一个发布模式的原生 EXE 文件以及必要的支持 DLL。如果您想在任何尚未安装 Flutter 的 Windows 10 设备上运行这个新的 Windows 应用，可以按照这里的说明压缩打包必要的文件。
  • 在桌面环境分发应用
    https://flutter.cn/desktop#distribution


Windows 插件


尽管目前 Windows 支持还是 alpha 版本，但是 Flutter 的社区成员们已经在着手开发 Windows 插件了。包括:

  • url_launcher: 从您的应用中启动浏览器并打开给定的 URL

    https://pub.flutter-io.cn/packages/url_launcher

  • path_provider: 提供用户设备上特殊目录的路径，如 Documents 和 temp

    https://pub.flutter-io.cn/packages/path_provider

  • shared_preferences: 将用户偏好设置序列化到磁盘上，从而在您的应用会话之间共享

    https://pub.flutter-io.cn/packages/shared_preferences

  • biometric_storage: 由生物特征加密的存储

    https://pub.flutter-io.cn/packages/biometric_storage

  • flutter_audio_desktop: 在桌面应用中播放音频

    https://pub.flutter-io.cn/packages/flutter_audio_desktop


使用这些插件的好处是，其中大多数还支持其他 Flutter 平台，这样您就可以将自己的应用适配至 Android、iOS、web、Windows 等平台。此外，尽管在 pub.dev (Dart 和 Flutter 的 package 管理平台) 上，大约三分之一的 package 是包含平台特定代码的插件，但大多数插件并非如此。例如，许多最高质量和最常用的 package 位列 Flutter Favorite 计划清单，其中大多数可以在 Windows 上运行。您如果想查看可在 Windows 上运行的 package 的完整列表，可以在 pub.dev 上查询。
  • Flutter Favorite
    https://pub.flutter-io.cn/flutter/favorites
  • 适用于 Windows 平台的 package
    https://pub.flutter-io.cn/flutter/packages?platform=windows


与 Windows 互操作


您也可以构建自己的 Windows 插件。当您位于 dev 渠道并为设备启用了 Windows 开发功能后，可以使用以下命令:

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

此时，您能够将自己的 Flutter 代码添加到 lib 子文件夹中，并将 Windows 代码添加到插件项目的 Windows 子文件夹中。您将使用 Platform Channels (平台通道) 在两个堆栈之间进行通信，本质上就是 Dart 与 C++ 代码之间的消息传递。有关这个话题的最佳示例，请参阅 url_launcher 的实现。


  • 撰写双端平台代码 (插件编写实现)

    https://flutter.cn/docs/development/platform-integration/platform-channels

  • url_launcher 的实现

    https://github.com/flutter/plugins/tree/master/packages/url_launcher/url_launcher_windows


但是，平台通道不是您与 Windows 互操作的唯一选择。您还可以使用 Dart FFI (外部函数接口) 来加载库，并调用 C 样式的 API，例如 Win32 API。正如您在 GitHub repo 中看到的那样，path_provider 插件使用 FFI 实现，这与使用平台通道的 url_launcher 有所不同。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 functionshowMessageBox('Test Message', 'Window Caption');


  • 使用 dart:ffi 调用原生代码
    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

这段代码不存在平台通道那样在两个线程之间转换的问题。FFI 包括对许多不同种类 API 的支持，包括 Win32、WinRT 和 COM。但先别急着自己去封装基于 C 的整个 Windows API，请去看看 win32 插件，它已经在做这件事情了，而且做得很好。事实上，path_provider 插件本身就是使用 win32 插件来实现的。有关 win32 插件的开发过程及工作原理，请阅读《使用 Dart FFI 提升 Windows 开发乐趣》。


  • Win32 插件
    https://pub.flutter-io.cn/packages/win32
  • path_provider
    https://pub.flutter-io.cn/packages/path_provider
  • 使用 Dart FFI 提升 Windows 开发乐趣
    https://medium.com/@timsneath/windows-fun-with-dart-ffi-687c4619e78d



Flutter for Windows 的资源


无论您处于 Flutter for Windows 历程的哪个阶段，都应该阅读 flutter.dev 上的桌面端开发文档，其中包括最新的详细信息。此外，您还可以通过 codelab 熟悉编写 Windows、macOS 和 Windows 的桌面 Flutter 应用，其中包括使用 OAuth 进行身份验证、访问 GitHub API 和使用 GraphQL 等真实场景的代码。或者查看另外一个可在 Windows 上运行的 Flutter 桌面代码示例 Photo Search。
  • Flutter 桌面支持
    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

开始使用 Flutter 构建 Windows 桌面应用吧！

Photo Search 使用标准的 Windows 文件打开对话框、树形视图 widget、拆分视图 widget，并使用真实的 REST API 呈现检索结果。


至于其他面向桌面的 widget，我们推荐菜单栏 (menubar) 插件、NavigationRail widget 和 DataTable widget。您还可能对 InteractiveViewer widget 感兴趣，它提供完整的桌面支持，可让您通过鼠标动作来平移和缩放其子 widget。


  • 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

另一组相当有用的 widget 来自 SyncFusion ，他们在 Windows 开发社区中已经广为人知，并为创建图表、计量槽、数据网格等工作提供了大量企业级品质的 widget。


  • SyncFusion widgets
    https://pub.flutter-io.cn/publishers/syncfusion.com/packages

开始使用 Flutter 构建 Windows 桌面应用吧！

这些 widget 均有社区和企业使用许可，因此您可以放心寻找适合自己项目的工具。



Flutter for Windows 应用案例


除了 Windows (以及广义上的 Flutter 桌面支持) package 和插件之外，Flutter 开发者也一直在构建用于 Windows 的优秀应用，比如 Invoice Ninja 的这一实验性作品:


  • Invoice Ninja

    https://www.invoiceninja.com/

开始使用 Flutter 构建 Windows 桌面应用吧！

Invoice Ninja 是一家提供收据软件的公司，Flutter 为其盈利带来了坚实的助力。他们的软件目前支持 Android 和 iOS 系统，并且在 web 上提供产品演示，为用户提供桌面版本已经在公司的计划之内。


  • 产品演示
    https://demo.invoiceninja.com/

Invoice Ninja 过去一直疲于奔命，却只能为 web 和移动端提供支持，曾经一度维护着三个独立的代码库。借助 Flutter 以及最近的 Flutter Desktop，我们已经能够使用单个代码库为每个主流平台构建应用。我们几乎是零成本地获得了应用的桌面版本，而且其性能是所有版本中最好的！

— Hillel Coren，Invoice Ninja 联合创始人


如果您希望在移动和桌面设备上构建一个真实、可盈利的 Flutter 应用，可以访问 GitHub 获取其源代码进行参考。
  • GitHub: Invoice Ninja
    https://github.com/invoiceninja/flutter-client


Aartos 佳作颇多，实时无人机检测系统就是其中之一，他们使用 Flutter 在多个平台上构建该系统的客户端软件。这个视频是一个早期版本的 Windows 客户端，和其移动客户端同时运行。
  • Aartos
    https://drone-detection-system.com/
  • 无人机检测系统客户端软件
    https://drone-detection-system.com/aartos-dds/product-overview/
  • Windows 端演示视频
    https://www.bilibili.com/video/BV1p54y1R79t/


iOS 和 Windows 两个版本共用完全相同的代码库。


如果您是一个有经验的 Flutter 开发者，您可能会发现自己需要在不同版本的 Flutter 之间来回切换: 例如一个版本用于发布正式版本的移动应用，另一个版本则用于试验 Windows alpha，那么您可能会喜欢 Flutter Version Manager (版本管理器)，它现在带有 Windows 图形用户界面，您可以在这里下载。
  • Flutter Version Manager
    https://github.com/leoafarias/fvm/releases

  • 演示视频

    https://www.bilibili.com/video/BV1LK411A7MX/


此工具已开放源代码，您可以亲自见证 Leo 是怎样让它看起来如此出色的。


  • FVM
    https://github.com/leoafarias/fvm


未来计划


发布了 alpha 版之后，我们的注意力将转移到完善功能集和稳定产品上来。作为一个开源项目，您可以在 GitHub 上跟踪 beta 版的进展，还剩下一些工作需要完成，包括无障碍功能、全球化与本地化、增强的键盘与文本处理、对命令行参数的支持等。


  • Flutter for Windows Beta
    https://github.com/flutter/flutter/projects/55

除了支持经典的 Win32 API 外，我们还在试验基于 UWP 的 Flutter 容器应用，该版本可以让 Flutter 登陆更多 Windows 设备，包括 Xbox。作为该试验的一部分，本周我们在 Windows Store 上发布了一个基于 UWP 的 Flutter Gallery。


  • 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

以下屏幕截图显示了在 Xbox 上运行的基于 UWP 的 Flutter Gallery:

开始使用 Flutter 构建 Windows 桌面应用吧！

下图是在一个双屏 Windows 设备 (在 Windows 10X 模拟器上) 运行的同一个应用:

开始使用 Flutter 构建 Windows 桌面应用吧！

  • Windows 10X 模拟器
    https://docs.microsoft.com/en-us/dual-screen/windows/get-dev-tools

您可以在 GitHub 上详细了解 Flutter for UWP 的进展。


  • 增加 UWP 支持
    https://github.com/flutter/flutter/issues/14967#issuecomment-697108439


总结


本次的 alpha 版本将 Flutter 的强大功能引入 Windows，为开发者提供了声明式、可组合和响应性的架构。该版本对 Material 规范的适应性实现，可以让您按照自己的需求来设计应用，并使用全套的 Flutter 开发和调试工具。您的应用在开发完成后将编译为原生 64 位代码，如同任何其他原生应用一样，您可以将其打包并在其他 Windows 设备上运行。最后，您可以使用相同的代码库，为 Android、iOS、web、macOS 和 Linux 平台打造应用。


如果您希望使用 Flutter 开始构建 Windows 应用，我们期待听到 您的反馈 ！如果您更喜欢运用您的 Windows 专业知识来 构建热门插件的 Windows 实现 ，或者为 Flutter 构建一些 Windows 专用的工具 (比如通过 flutter build windows 命令的输出结果创建 MSIX 的命令行工具)，我们也热烈欢迎！


  • 提交反馈

    https://github.com/flutter/flutter/issues

  • 构建热门插件的 Windows 实现

    https://flutter.cn/docs/development/packages-and-plugins/developing-packages#plugin


随着 Flutter 开始支持 Windows，您打算构建怎样的精彩应用呢？欢迎在评论区和我们分享您的想法。


开始使用 Flutter 构建 Windows 桌面应用吧！

推荐阅读






开始使用 Flutter 构建 Windows 桌面应用吧！  点击屏末 | 阅读原文 | 访问 Flutter 开发者社区中文资源


开始使用 Flutter 构建 Windows 桌面应用吧！

推荐阅读

真女神转生5：复仇 正式版替换包 试玩版游玩完整游戏方法 真女神转生5：复仇 正式版替换包 试玩版游玩完整游戏方法
如果你变成HTML标签，你希望你是啥？ 如果你变成HTML标签，你希望你是啥？

相关文章