Get started with Flutter for Surface Duo

Important

This article describes functionality and guidance that is in public preview and may be substantially modified before it's generally available. Microsoft makes no warranties, express or implied, with respect to the information provided here.

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. You can follow the Flutter Getting Started Guide if you are starting from scratch.

Flutter Foldable Support

Tip

Flutter Foldable Support is in public preview. Review the Flutter Engine PR and Flutter Framework PR on GitHub to provide feedback.

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. Set up the custom Flutter Engine.
  2. Compile the custom Flutter Engine.
  3. Set up the custom Flutter Framework.
  4. Build your app with Foldable Support.

These steps are explained in detail below.

Step 1. Set up the custom Flutter Engine

Follow the instructions on the Setting up the Engine development environment page. 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": "",
  },
]

You now have all the code needed to be able to compile your own version of the Flutter Engine with foldable support.

Step 2. Compile the custom Flutter Engine

Follow the instructions on the Compiling the engine page. 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.

Step 3. Set up the custom Flutter Framework

The flutter tool must be configured to use the custom engine instead of the default engine:

  1. 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. Add this repository's bin directory to your path. That will let you use the flutter command in this directory more easily.

    Warning

    Undo this step when you want to go back to your normal Flutter setup.

  5. Run flutter update-packages. This will fetch all the Dart packages that Flutter depends on. If 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.

Step 4. Build your app with Foldable Support

The Framework and Engine are separate and not working together at this stage. Follow the instructions on using a local engine from The flutter tool page to get them to work together.

That's it! 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.