Flutter for Surface Duo 入门指南Get started with Flutter for Surface Duo


本文介绍的功能和指南为 公共预览版,在正式发布之前可能会有重大修改。This article describes functionality and guidance that is in public preview and may be substantially modified before it's generally available. Microsoft 不对此处提供的信息作任何明示或默示的担保。Microsoft makes no warranties, express or implied, with respect to the information provided here.

在开始前,请按照说明在设置用于 Flutter 开发的计算机上下载并安装 Surface Duo 双屏幕仿真器。To get started, follow the instructions to download and install the Surface Duo dual-screen emulator on a machine that you have also setup for Flutter development. 如果从头开始,可以按照 Flutter 入门指南进行操作。You can follow the Flutter Getting Started Guide if you are starting from scratch.

Flutter 可折叠设备支持Flutter Foldable Support


Flutter 可折叠设备支持为公开预览版。Flutter Foldable Support is in public preview. 在 GitHub 上查看 Flutter 引擎 PRFlutter 框架 PR 以提供反馈。Review the Flutter Engine PR and Flutter Framework PR on GitHub to provide feedback.

虽然 Flutter 可折叠设备支持仍处于预览版状态并且尚未合并到 Flutter master 中,但设置需要使用 Flutter 的自定义版本:While the Flutter Foldable Support is still in review and not yet merged into Flutter master, setting up requires using a custom version of Flutter:

  1. 设置自定义 Flutter 引擎。Set up the custom Flutter Engine.
  2. 编译自定义 Flutter 引擎。Compile the custom Flutter Engine.
  3. 设置自定义 Flutter 框架。Set up the custom Flutter Framework.
  4. 使用可折叠设备支持构建应用。Build your app with Foldable Support.

下面将详细解释这些步骤。These steps are explained in detail below.

步骤 1。Step 1. 设置自定义 Flutter 引擎Set up the custom Flutter Engine

按照设置引擎开发环境页上的说明操作。Follow the instructions on the Setting up the Engine development environment page. 在步骤 4,应使用此 .gclient 配置:At step #4 you should use this .gclient configuration:

solutions = [
    "managed": False,
    "name": "src/flutter",
    "url": "git@github.com:andreidiaconu/engine.git",
    "custom_deps": {},
    "deps_file": "DEPS",
    "safesync_url": "",

你现在已经拥有了能够使用可折叠设备支持编译自己的 Flutter 引擎版本所需的全部代码。You now have all the code needed to be able to compile your own version of the Flutter Engine with foldable support.

步骤 2。Step 2. 编译自定义 Flutter 引擎Compile the custom Flutter Engine

按照编译引擎页上的说明操作。Follow the instructions on the Compiling the engine page. Surface Duo 仿真器是 x64 仿真器,因此在 Mac OS 或 Linux 计算机上,步骤 3 和 4 为:The Surface Duo emulator is an x64 emulator, so on a Mac OS or Linux machine, steps #3 and #4 are:

  • ./flutter/tools/gn --android --android-cpu x64 --unoptimized && ./flutter/tools/gn --unoptimized && ./flutter/tools/gn --android --unoptimized
  • ninja -C out/android_debug_unopt_x64 && ninja -C out/host_debug_unopt && ninja -C out/android_debug_unopt

你现在拥有使用可折叠设备支持的本地引擎版本。You now have local engine build with foldable support.

步骤 3。Step 3. 设置自定义 Flutter 框架Set up the custom Flutter Framework

flutter 工具必须配置为使用自定义引擎,而不是默认引擎:The flutter tool must be configured to use the custom engine instead of the default engine:

  1. 确保(Android 平台工具中的)adb 在你的路径中(例如 adb 打印合理输出的路径)。Ensure that adb (from the Android platform tools) is in your path (e.g., that which adb prints sensible output).

  2. git clone git@github.com:andreidiaconu/flutter.git

  3. cd flutter

  4. 将此存储库的 bin 目录添加到你的路径。Add this repository's bin directory to your path. 这样就可以更轻松地使用此目录中的 flutter 命令。That will let you use the flutter command in this directory more easily.


    如果要返回到常规的 Flutter 设置,请撤消此步骤。Undo this step when you want to go back to your normal Flutter setup.

  5. 运行 flutter update-packagesRun flutter update-packages. 此操作将提取 Flutter 所依赖的所有 Dart 包。This will fetch all the Dart packages that Flutter depends on. 如果版本求解失败,请先尝试 git fetch upstream 更新 Flutter 版本,再尝试 flutter update-packagesIf version solving failed, try git fetch upstream to update Flutter versions before flutter update-packages.

这些说明非常类似于设置框架开发环境所需执行的操作。These instructions are very similar to what you need to do to Set up the Framework development environment.

步骤 4。Step 4. 使用可折叠设备支持构建应用Build your app with Foldable Support

框架和引擎是独立的,不能在此阶段一起工作。The Framework and Engine are separate and not working together at this stage. 请按照 flutter 工具页上的本地引擎使用说明操作,使其协同工作。Follow the instructions on using a local engine from The flutter tool page to get them to work together.

就这么简单!That's it! 现在你的计算机上已有自定义 Flutter 框架和 Flutter 引擎,它们包含 Flutter 引擎 PRFlutter 框架 PR 中的所有更改,并且能够使用新的 MediaQuery 支持TwoPane 小组件感知铰链的弹出路由构建应用。You now have a custom Flutter Framework and Flutter Engine on your machine that contain all the changes in the Flutter Engine PR and Flutter Framework PR and are able to build your app using the new MediaQuery support, TwoPane widget and Hinge aware popup routes.